Introduction to angularjs learning notes _ AngularJS

This article mainly introduces the introduction of angularjs learning notes. For more information, see 1. Introduction to angularjs

AngularJS is a structure framework designed for Dynamic WEB applications. It allows you to use HTML as the template language. by extending the HTML syntax, you can build your application components more clearly and concisely. Its innovation lies in the use of data binding and dependency injection, which frees you from writing a lot of code. All of these are implemented through Javascript on the browser, which makes it perfectly integrated with any server-side technology.

If you say so much, you may not understand anything... Right? Don't worry. Let me talk about some of his features: modularization, two-way data binding, dependency injection, and instructions. Next we will learn from these features.

Ii. angularjs is based on the MVC Concept

The so-called MVC is module (Data Model), view (view), controller (controller)

In fact, angularjs combines these three modules. Below is a model diagram I have drawn. Let's take a rough look at it:

Iii. Explanation

As mentioned above, angularjs features modularity, dependency injection, bidirectional binding, and commands. Now I will explain it to you:

Modularization: The following filter in, directive... the four blocks are the four representative methods of the module (the usage and functions of each function will be explained one by one later). They can also be understood as their respective small modules. Each module has different functions, however, the division of labor is clear, the structure is clear, and modularization is achieved.

Dependency injection: the four small modules mentioned above seem to be independent, but they are mutually dependent and can be referenced from each other, implement powerful functions (we will introduce in detail how to reference them later), which is dependency injection.

Command: we can also see that the command is the direve VE method in the figure. Angularjs has many built-in commands, such as ng-app (specifying the scope of angularjs) and ng-model (defining a data model and implementing bidirectional binding ), ng-repeat (repeat a tag), ng-change (whether the value of the listener tag has changed), and so on, in this case, directive is the most important feature of custom commands (also known as html extensions in some tutorials ).

Bidirectional binding: module and view, that is, bidirectional binding between data and view. The ng-model command mentioned above will be used.

4. Let's look at a simple two-way binding example.

Index.html:

     
   Document