1. Introduction to angularjs
AngularJS is a structural framework designed for dynamic WEB applications. It allows you to use HTML as a template language, and by extending HTML syntax, you can build your application components more clearly and concisely. Its innovation is that it uses data binding and dependency injection, which eliminates the need to write a lot of code. All of these are implemented through browser-side Javascript, which also makes it perfectly combined with any server-side technology.
After saying so much, you probably don’t understand anything. . . Is it right? Don't worry, let me talk about its several characteristics: modularity, two-way data binding, dependency injection, and instructions. Let’s learn from these characteristics below.
2.angularjs is based on the concept of MVC
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 drew. Let’s take a look at it briefly:
3. Combined explanation
As mentioned above, the characteristics of angularjs are: modularity, dependency injection, two-way binding and instructions. Now let me explain it to you in combination with the above picture:
Modularity: the filter below in the figure above, directive... The four blocks are the four representative methods of module (I will explain the usage and functions of each function one by one). It can also be understood as their own small modules. Each module has different functions, but the division of labor and clear structure, which realizes modularity.
Dependency injection: The four small modules mentioned above seem to be separate, but they have interdependent relationships between them and can be referenced to each other to achieve powerful functions (how to reference them in detail later). This is dependency injection.
Instructions: It can also be seen from the above picture that the instructions are the directive method in the picture. There are many built-in instructions in angularjs, such as ng-app (specifying the scope of angularjs), ng-model (defining a data model and implementing two-way binding), ng-repeat (repeat a tag), ng-change (whether the value of the tag has changed), etc. The most important function here is custom instructions (the tutorial also says it is an extension of html).
Bidirectional binding: Bidirectional binding is the module and view in the above picture, that is, the two-way binding of data and view. You will use the ng-model command mentioned just now.
4. Look at a simple example of two-way binding.
:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.2.19/"></script> <!-- IntroducedAngularJSBag -->
</head>
<body>
<div>
<input type="text" ng-model="text">
<b>Hello {{text}}</b>
</div>
</body>
</html>
You can take the above code to the browser and run it (note the address of angularjs), and you will be surprised to find that angularjs is really powerful! !
Here is a brief explanation of the difficult parts that appear in the above code:
ng-app specifies the scope of the application, which means that the entire html code can recognize angularjs.
ng-model binds the element to the data model name text, and the input input value will be stored in this model.
{{text}}This is a way of writing an expression in angularjs, that is, the text in the middle is a variable that corresponds to the model name above, and can listen to the changes in the input value in real time, and update the view display instantly.
Haha, angularjs is quite simple. I hope this small note can arouse everyone's interest in angularjs. I will continue to update angularjs' study notes later. Hope it will be helpful to everyone. If you don’t understand the notes above, just ask me and I will definitely give you an answer. I wish you all a happy life!