Home>

This article records the use of the three major modules (modal, controller, and view) of angularjs.It is convenient for beginners to learn angularjs smoothly.

Today I will explain the three major modules of angularjs in detail:modal, controller, and view.

First let me tell you about the relationship between these three modules.

1. The data model (modal) mainly provides data.It does not operate directly with the view.

The controller saves the data provided by the modal,Operate with views.

3.view is the view, which is the page display.

4. All in all,The controller is responsible for the communication between the data and the view,Is the interface between the two.They have a clear division of labor,Achieve modularity.

How to use the data model (modal)?

Speaking of data models,Let's take a look at the example from the previous tutorial:

<! Doctype html>
 <html ng-app="app">
   <head>
   <meta charset="utf-8">
   <title>document</title>
     <script src="angular-1.2.19/angular.js"></script><!-The angularjs package was introduced->
     <script src="controll.js"</script>//Introduce controller
   </head>
   <body>
     <div ng-controller="controller">
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

1. First introduced,The angularjs package, when it starts, it first looks for the ng-app instruction, which specifies the entire scope;

2. Then it will continue to find specific instructions,Here you will find ng-model, which defines a "text" data model.

3. This model of text is used below,So two-way binding is implemented.(As long as it is in the scope of ng-app,Can use text directly)

How to use the controller?

First, let's talk about a few points about using the controller:

1. Do not reuse controllers with views. A controller is generally only responsible for a small view (one-to-one correspondence).

2. Do not operate the dom directly in the controller. This is not the responsibility of the controller.To operate the dom, use the instruction derived (see the tutorial in the previous section);

3. Do not perform data filtering operations in the controller.There is a special filter service to achieve this;

4. In general,Different controllers do not call each other.The interaction of the controller is usually through events.

Then we look at the blue part of the code above,The content of controll.js is:

function controller ($scope) {
   $scope.greeting={
     text:"hello"
   };
 }

angularjs finds a ng-controller directive, and then it finds the place where this directive is defined,Is the controll.js file, and then you can use greeting.text to get its value directly.

3. How to use views?

Speaking of how to use views,Must mention directive. (Here is new knowledge !!!)

Let's look at a piece of code:

var appmodule=angular.module ("app", []);//app is the name of the ng-app directive in html
appmodule.directive ("hello", function () {//define a directive,Name is hello
  return {
    restrict:"e",    template:"<div>hi there</div>",    replace:true
  };
});

The above code defines an instruction label,You can try<hello></hello>directly in the html and see what happens! !! !!

Then I explain the meaning of each attribute:

1.restrict:(string) optional parameter,Specify the form in which the instruction is declared in the dom.The values ​​are:e (element), a (attribute), c (class), m (comment);the above example is set to the element form (<hello></hello>);

2.template:(string or function) optional parameters,What is returned,The above example returns a div;

3.templateurl:Same as above, return content through url,If there is a lot of content returned,This property is recommended.

4.relace:(boolean), the default value is false. The above example is set to true:the page will be replaced by the returned div after using the hello tag.

5.transclude:(boolean), when set to true. This configuration option allows us to extract the content contained in that element of the directive,Then place it in a specific position of the instruction template,Used with ng-transclude.

6. There are some other attributes,Let's take a closer look at the specifics.. .

  • Previous C # get client related information example summary
  • Next Android method to achieve volume adjustment