Angular Basics

Angular basic directives

  • “Ng-app” : Directive defines an AngularJS application.
  • The “ng-model” directive binds element values (such as those for input fields) to the application (V-Model).
  • The “ng-bind” directive binds application data to an HTML view (V-bind).
  • The “ng-init” directive initializes the Angular JS medical program variable
  • “. Directive “Creates a custom directive

Look at a small example of bidirectional binding.

<div ng-app=""> <p ng-init =" firstName= 'coolFish'"> < input type = "text" ng - model = "name" > < / p > < h1 > Hello {{firstName}} {{name}} < / h1 > < p ng - bind = "name" > < / p > < / div > < div. / / cycle Ng - app = "" ng - init =" names = [' Jani ', 'Hege', 'Kai'] "> < p > use ng - repeat to circular array < / p > < ul > < li ng - repeat =" x in names "> {{x}} < / li > < / ul > < / div > / / circular array of objects < div ng - app = "" ng - init =" names = ({name: 'coolFish, country:' xiamen '}, {name: 'is the total, the country:' guangzhou '}, {name: 'PE teacher, country:' Shanghai '}] "> < p > circular object: < / p > < ul > < li ng - repeat =" x in names "> {{x.n ame + ', '+ x.ountry}}</li> </ul> </div> // custom directive <body ng-app="myApp"> < ruob-directive ></ ruob-directive >< script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>coolFish! </h1>" }; }); </script> </body>Copy the code

Summary: If you have used VUE, this should make a lot of sense. AngularJS automatically starts when the page loads.

The ng-app directive tells AngularJS that

The element is AngularJS
“The application“The owner of.

The “ng-model” directive binds the value of the input field to the application variable “name”.

The “ng-bind” directive binds the application variable name to the innerHTML of a paragraph.

“Ng-init” defines and initializes variables directly in the text. And you can use it right away.

“Custom instructions” can be called in the following 4 ways, and can be used in a limited way, called in a specific way

<div class=" ruob-directive "></div> / / comment <! -- directive: runoob-directive --> var app = angular.module("myApp", []); App. directive("runoobDirective", function() {return {RESTRICT: "A", template: "<h1> </h1>" }; });Copy the code

Summary: Restrict can have any of the following values. The default value is EA. That is, an instruction can be invoked by the element name or attribute name

  • EUsed as the element name
  • AUse as an attribute
  • CUsed as a class name
  • MUse as a comment

Presents the expression

  • AngularJS expressions are written in double braces: **{{expression}}** Is similar to the difference expressions in Vue, but much more powerful

  • AngularJS expressions bind data to HTML in a similar way to the ng-bind directive.

  • AngularJS will “print” the data where the expression is written.

  • AngularJS expressions: They can contain text, operators, and variables.

<div ng-init =" firstName= 'coolFish'" ng-app=""> <p> My first expression: {{5 + 1 +firstName}}</p> <div ng-app="" ng-init="quantity=1; Cost = 5 "> < p > price: < span ng - bind =" quantity * cost "> < / span > < / p > < / div > / / / / may string and number < div ng - app =" "ng - init =" name = 'coolFish'; Age = 10 "> < p > {{' name: + name +" "+ 'age:' + age}} < / p > < / div > < div / / object ng - app =" " Ng - init = "person = {lastName firstName: 'cool' : 'Fish'}" > < p > last name for {{person. The lastName}} < / p > < / div > < div / / array ng - app = "" Ng - init = "points =,15,19,2,40 [1]" > < p > the third value is {{points [2]}} < / p > < / div >Copy the code

Summary: It’s a feeling, but the documentation says that Angular expressions do not support conditional judgments, loops, and exceptions, but do support filters, meaning within the difference expression

Presents the application

<input type="text" ng-model="firstName"><br> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="lastName"><br> {{firstName + " " + lastName}}</div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });Copy the code

Summary: Here model defines the application scope, Controller is used to control the application,