Home > Developer > Web Develop
Angular JS (angular.js) is a set of frameworks, templates, and data binding and rich UI components for developing Web pages. It supports the entire development process and provides the architecture of the Web application without the need for manual dom manipulation. Angularjs is very small, just 60K, compatible with mainstream browsers. Fits well with JQuery. Two-way data binding may be the coolest and most useful feature of ANGULARJS, revealing the principles of MVC.
Angularjs works by: The HTML template will be parsed into the DOM by the browser, and the DOM structure becomes the input of the Angularjs compiler.
Angularjs will traverse the DOM template to generate the corresponding NG instructions, all of which are responsible for setting data binding against the view (that is, the Ng-model in HTML). Therefore, the NG framework starts to work after the DOM is loaded.
Simple to use such as the following:
In HTML:
In JS:<body ng-app= "Ngapp" ><div ng-controller= "Ngctl" ><label ng-model= "MyLabel" ></label>< Input type= "text" ng-model= "myinput"/><button ng-model= "MyButton" ng-click= "btnclicked" ></button> </div></body>
Angular Appvar app = Angular.module ("Ngapp", [], function () { console.log ("Ng-app:ngapp"),}); /Angular Controllerapp.controller ("Ngctl", [' $scope ', function ($scope) { console.log ("Ng-controller:ngctl"); $scope. MyLabel = "text for label"; $scope. Myinput = "text for input"; $scope. btnclicked = function () { Console.log ("Label is" + $scope. MyLabel); }]);In this way, two-way data binding is implemented for NG: The view rendered in HTML is consistent with the data in the Angularjs. Change one, then the corresponding side will also be changed accordingly.
This way, it is really convenient to use. We only care about the style of the HTML tag and its corresponding properties and methods that are bound in the angular controller scope in JS. This is all, omitting many of the complex DOM operations.
This idea, in fact, is completely different from the DOM query and operation of jquery, so there are a lot of people who suggest using Angularjs, don't mix jquery. Of course, both have their pros and cons, and use whichever depends on their choice.
The app in Ng is equivalent to a modular module that can define multiple controllers in each app, each with its own scope and without interfering with each other.
Look at the HTML below:
<div ng-app= "Dataapp" > Unit Price: <input type= "number" min=0 ng-model= "price" ng-init= "prices = 299" ><br > Quantity: <input type= "number" min=0 ng-model= "Quantity" ng-init= "quantity = 1" ><br> Total Price: {{Quantity * Price}}</div>That is, variables in the front-end HTML that are enclosed in {{}} are bound together with the properties in the corresponding controller scopes in ANGULARJS. In fact, {{}} is equivalent to the Ng-bind directive, which means that ng-bind= "myData" can bind the MyData data in ng with the corresponding element in the front. This makes it easy to get random data from NG and present it on the page in real time.
In addition, the $scope object provides an $apply method for updating on an HTML page using the following methods:
$scope. $apply (function () {$scope. myvalue = "NewValue";});$scope object, we can be understood as a scope object in the NG framework, where data and views can be bound to each other, and at the same time isolated from the scope of other $scope objects.
Of course, $scope can also implement inheritance, which is then recorded separately when touching other objects in the NG framework.
Bidirectional data Binding---The fundamentals of ANGULARJS Learning
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
