Reading notes (i), "Angularjs is learned"

Source: Internet
Author: User

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"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.