Original: Angularjs Introductory note
the front-end time on the Internet to see the technical documents, inadvertently found it- - Angularjs, then looked at some of the relevant information, and then deeply attracted by it. So far, what I think is the Most fascinating thing about Angularjs is its bidirectional binding capabilities for automated data. Data binding helps you avoid writing large amounts of initialization code to save development time and frees developers from the painful abyss of frequent manipulation of the DOM . Whether the model changes the view or the view impact model,Angularjs Undoubtedly adds a lot of color to the static HTML Web page technology. Of course, its core features include modularity,MVC, semantic tagging, and dependency injection.
Unlike traditional jQuery and Other libraries, Angularjs is more focused on what we want (what), and lets the machine figure out how to doit-declarative programming. Angularjs is also based on the belief that declarative programming should be used for component user interfaces and for editing software artifacts, while imperative programming is appropriate for representing business logic.
Angularjs is ideal for building CRUD applications, but not for developing types of games, graphical interface editors, and more.
so much nonsense, we can not immediately understand, the following examples through the way to guide you into the angularjs of the Wonderful world.
to use angularjs , you need to introduce a angualr.min.js file on the page . File Address Portal:https://angularjs.org/.
The Html code is as follows:
<! doctype html > The App.js code is as follows:
(function () { var app = angular.module (' Store ', []); app.controller (' Storecontroller ', function ($ Scope) { this.products = gem; }); var gem =[{ name: ' Watermelon ', price:2.95, description: ' No sweet no money oh ', canpurchase:false, },{ name: ' Banana ', price:3.95, description: ' Bananas of the Barra ', canPurchase:true, },{ name: ' Peach ', price:2.95, &Nbsp; description: ' Eat a peach, steal the half-day leisure ', canPurchase:true, },{ name: ' Apple ', price:2.95, description: ' Green apple, sour sweet is me ', canpurchase:false, }]}) (); First , there is a Ng-app tag in the HTML tab of the HTML page , andNg-app marks the boundary of the Angularjs application, telling Angularjs should manage that piece. A Ng-app range can be understood as a module, and a page can contain multiple ng-app tags.
JS Create the module as follows:
var app = Angular.module (' Store ', []);
So we've created a named Store ng-app ng-controller controller tag, one Ng-controller js ng-controller We can inject $scope $ Scope controller $scope , defined in the $ The properties and methods of Rootscope
In the example above, we define the variable products object in the controller, which we output through Ng-repeat,ng-show, and Expressions in the page . details of the products. the Ng-repeat tag is used to iterate through an array or an array of objects. the Ng-show tag indicates whether the element is displayed, and the corresponding tag is the Ng-hide tag, which indicates whether the element is hidden. use double curly braces in Angularjs to output the value of an expression, such as {{product.name}}.
The above is the basic use of ANGULARJS, is so simple, simple tag combination can create a plump page.
Recommended:
Turing Tutorial:http://www.ituring.com.cn/article/13471
Google tutorials, entry by website: https://angularjs.org/
Angularjs Getting Started notes