Recently in the study of Angularjs, bought a "angularjs that is learned to use" as their own introductory books, so far read the contents of the two chapters, I feel this book is good, things speak easy to understand. The reason to write this article, one is to urge oneself can persist in study, two is able to give oneself a back to review of opportunity, at the same time also hoped can help to want to study angular classmate one or two.
This series of articles is written in a "Note + personal understanding" way. Will extract the more important content, while some places will also talk about personal understanding. As the first article, do a angular primer, combine an introductory example to see how to build a ANGULARJS application:
1 <! DOCTYPE html> 2
To build a ANGULARJS application:
(1) The first step is to introduce the ANGULARJS library, which can be a CDN or local, I am here locally
| 1 |
<scriptsrc="js/angular.min.js" type="text/javascript" charset="utf-8"></script> |
(2) Tell which part of the page is under ANGULARJS control, start Angularjs
In Angularjs, we can manually specify the control range of the Angularjs, through the "ng-app" directive in the previous example, we added "ng-app=" in the start tag of
Specify the control range of the Angularjs-
Start AngularjsThis instruction can pass in a parameter, this parameter is the name of the module of Angularjs, this to the module to say.
when we specify the control range of the In addition to the above two points, we have also noticed a special place-{{1+2}}Curly braces represent data bindings in Angularjs. This data binding can be a one-way data binding, or it can be an expression. -if it is a variable (one-way data binding), the UI changes as the value of the variable changes. -if it is an expression, Angularjs renders the computed value on the UI. Read the Getting Started example, and look at an example:1 <! DOCTYPE html> 2
In addition to the "Ng-app" directive mentioned earlier, this example appears in the new "Ng-modelandNg-bindInstructions (1) Ng-model directive: This directive can be used in input controls, which can be used when a user wants to enter data or get a value from a JavaScript variable. Ng-model= "Name" In this example means that the obtained value (input) is passed to the name variable. (2) Ng-bind directive: The role of "{{}}" is the same, binding data. But Ng-bind and {{}} have some difference in efficiency, we need to know the following two points: ① "{{}}" will be converted to Ng-bind and executed when Angularjs executes, so it will be inefficient but simple to use. ② "{{}}" on the UI when using "{{}}" to bind data. Although it is relatively short, it can be found. The workaround is to add a style "Ng-cloak" to the element that uses "{{}}", which is a style that hides the element first, and then displays it after the conversion is finished, and the core of the style code is "Display:none!important;" It's best to write it yourself, or you can define it with ANGULARJS, but you need to introduce the Angularjs file [forward from http://www.cnblogs.com/enjoymylift/p/6051455.html] at the beginning.Reading notes (i), "Angularjs is learned"