Home >Web Front-end >JS Tutorial >A brief introduction to angularjs study notes_AngularJS

A brief introduction to angularjs study notes_AngularJS

WBOYOriginal: 2016-05-16 15:38:021005browse

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 the syntax of HTML, you can build your application components more clearly and concisely. Its innovation is that it uses data binding and dependency injection to save you from writing a lot of code. These are all implemented through browser-side Javascript, which also makes it perfectly integrated with any server-side technology.

Having said so much, I guess you don’t understand anything. . . Is it right? Don't worry, let me talk about some of its features: modularity, two-way data binding, dependency injection, and instructions. Let’s study these features below.

2.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. Here is a model diagram I drew. Let’s take a rough look at it first:

3. Combined explanation

As mentioned above, the characteristics of angularjs are: modularization, dependency injection, two-way binding and instructions. Now let me explain it to you based on the picture above:

Modularity: The four squares below the filter, directive... in the picture above are the four representative methods of the module (I will explain the usage and function of each function one by one later), which can also be understood. As their own small modules, each module has different functions, but the division of labor is clear and the structure is clear, achieving modularization.

Dependency injection: The four small modules mentioned above seem to be independent, but they are interdependent and can reference each other to achieve powerful functions (how to reference will be explained in detail later) ), this is dependency injection.

Instruction: As can be seen from the above picture, the instruction is the directive method in the picture. There are many built-in instructions in angularjs, such as ng-app (specify the scope of angularjs), ng-model (define a data model and implement two-way binding), ng-repeat (repeat a label), ng-change ( Monitor whether the value of the tag has changed), etc., and the directive here is the most important function is the custom directive (some tutorials also say it is an extension of html).

Two-way binding: Two-way binding is the module and view in the picture above, that is, two-way binding of data and view. The ng-model directive just mentioned will be used.

4. Look at a simple two-way binding example.

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </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 referencing angularjs). You will be surprised to find that angularjs is really powerful! !

Let me briefly explain to you the difficult to understand places 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 data model name text to the element, and the input value of the input 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. It can monitor changes in the input value in real time and update the view display in real time

Haha, angularjs is quite simple. I hope this little note can arouse everyone’s interest in angularjs. I will continue to update angularjs study notes later. Hope it helps everyone. If there is anything you don’t understand about the above notes, just ask me and I will definitely answer it for you. I wish you all a happy life!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth analysis of jsonp protocol principle_jsonNext article：In-depth analysis of jsonp protocol principle_json

See more

A brief introduction to angularjs study notes_AngularJS

Related articles