Home > Developer > Web Develop
001-:
Client templates: In angular, templates and data are sent to the browser and then assembled on the client.
Data binding (MVVM): data binding can automatically synchronize data between model and view.
Dependency Injection:
002-Data binding:
Building ANGULARJS Development Environment www.angularjs.org
<BodyNg-app><inputtype= "text"Ng-model= "Name"value=""><!--{{angular-expression}} -{{name}}<inputtype= "text"Ng-model= "Name"value=""><Scripttype= "Text/javascript"src=".. /.. /vendor/angular/angularjs.js "></Script></Body>
1.NG-APP directive: Inform Angular should manage the interface which piece;
2.Angular expression differs from JS expression:
-Attribute evaluation: The evaluation of all attributes is for scope, and JS is for the Window object;
-Tolerance: expression evaluation, for undefined and null,angular is tolerant, but JS will produce nullpointerexceptions;
-No Process Control statement: In the Angular expression, you cannot do any of the following: conditional branching, looping, throwing exceptions;
-Filter (filters): The expression result can be passed into the filter chain (filter chains).
003-Controller:
<Body> <DivNg-app> <DivNg-controller= "Firstcontroller"> <inputtype= "text"value=""Ng-model= "Name"> <inputtype= "text"value=""Ng-model= "Age">{{Name}} {{age} }</Div> </Div> <Scripttype= "Text/javascript"src= "App/index.js"></Script><Scripttype= "Text/javascript"src=".. /.. /vendor/angular/angularjs.js "></Script></Body>
var function ($scope) { //$scope scope // Declare a model $scope. Name = ' Alrale '; = ' a ';}1. $scope: Is an object that points to the model and is the execution context of the expression; scope is placed in a hierarchy of DOM structures similar to the application.
004-ngbind:
<Body> <DivNg-app> <DivNg-controller= "Firstcontroller"> <inputtype= "text"value=""Ng-model= "Name"> <inputtype= "text"value=""Ng-model= "Age"> <DivNg-bind= "Name"></Div> <DivNg-bind= "Age"></Div> </Div> </Div> <Script>Alert ('!'); </Script> <Scripttype= "Text/javascript"src= "App/index.js"></Script><Scripttype= "Text/javascript"src=".. /.. /vendor/angular/angularjs.js "></Script></Body>
var function ($scope) { $scope. Name = ' Alrale '; = ' a ';}005-Multiple Controllers
<Body> <DivNg-app> <DivNg-controller= "Firstcontroller"> <inputtype= "text"value=""Ng-model= "Name"> <DivNg-controller= "Secondcontroller"> <inputtype= "text"value=""Ng-model= "Name"> </Div> </Div> </Div> <Scripttype= "Text/javascript"src= "App/index.js"></Script><Scripttype= "Text/javascript"src=".. /.. /vendor/angular/angularjs.js "></Script></Body>
var function ($scope) { = ' Alrale '; = ' a ';} var function ($scope) { }006-$apply Methods in $scrope:
<Body> <DivNg-app> <DivNg-controller= "Firstcontroller">{{Date}}</Div> </Div> <Scripttype= "Text/javascript"src= "App/index.js"></Script><Scripttype= "Text/javascript"src=".. /.. /vendor/angular/angularjs.js "></Script></Body>
varFirstcontroller =function($scope) {$scope. Date=NewDate (); //setinterval (function () { ////Although here changes, but does not trigger dirty check //$scope. Date = new Date (); //},1000)SetInterval (function() {$scope. $apply (function() {$scope. Date=NewDate (); }) },1000)}
1. Dirty Check: Copy the original object to a snapshot, at a certain time, compare the current object and snapshot values, if not the same indicates a change.
2.Angular checks to see if the variable is changing with a dirty check.
Angular Policy:
-Does not dirty check all objects, when the object is bound to HTML, this object adds a micro-check object (Wetcher).
-Does not dirty check all the properties, also when the property is bound, this property will be listed as the Check property.
When the angular program is initialized, the properties of the bound object are added as listener objects (watcher), which means that an object is bound to n properties, adding N Watcher.
3. Manually trigger dirty check: $apply into angular context, and then through $digest to trigger dirty check, recommend to $apply parameters, otherwise it will check all the listening properties in the $scope.
4. It is not recommended to call the $digest () property directly, but to use $apply ().
ANGULARJS[1]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
