Simple use of Angularjs (entry level)

Angularjs was born in 2009 and was created by Misko Hevery, who was later acquired by Google. is a good front-end JS framework, has been used in several Google products.

Angularjs has many features, the most core of which are: MVC, modularization, automated bidirectional data binding, semantic tagging, dependency injection, and so on.

-----------Baidu Encyclopedia

The following is a primer, this article is mainly in the form of code analysis.

1. Introduce the Angularjs JS file on the Web page.

Can be downloaded through the official website, you can also search on Baidu, recommended to download from the official website.

http://www.angularjs.net.cn/this Chinese web address. Tutorials are also available.

2. Code Analysis

Here is an example of copy:

<! DOCTYPE html>
　　
Where Ng-app is specifying a ANGULARJS application.
The corresponding JS code is: Angular.module ("Todoapp", []); Define a module
NG-CONTROLLER Specifies a controller that indicates that all child elements under the label are managed by the controller.
The corresponding JS code is:. Controller (' Todolistcontroller ', function () {}); define a controller
A Ng-app can define multiple controllers.
This example is through Var todolist=this; let ToDoList replace the controller.
Exposes the available properties and methods for this controller by defining the properties and methods of the todolist.
You can see that it is referenced in HTML by the name of the ToDoList property.
where {{}} represents data binding.
Ng-model: Indicates that the foreground is data bound to the controller, of course, the background initialization has data, will also be displayed in the foreground.
Ng-submit: Defined in the Form tab, the code submits the form, or you can add Ng-click to the button label to achieve the same effect.
Ng-repeat: The repeating attribute generates a corresponding number of labels for the elements that need to be traversed.
In the example above, a span label corresponding to the number of todolist is generated.
The attribute application is directly todolist.todos.
The reference to the method is: Todolist.addtodo (). Of course, this is just one of the exposed methods. The next chapter will introduce the other.
Simple use of Angularjs (entry level)