Angularjs Development Guide 11:angularjs Model,controller,view detailed

Source: Internet
Author: User

Model

modelIn Angularjs, the word can either represent a (for example, a phones value called model , it is a number that contains multiple phone arrays), or it can represent the entire data model in the application, depending on the context in the Angularjs document we are discussing.

In Angularjs, a model is any of the desirable properties of a Angularjs scope object. The name of the property is the identifier of the model. Its value can be any JavaScript object (including arrays and original objects).

The only requirement to turn a JavaScript object into a model is that the object must be a property reference to the Angularjs scope. This reference can be created both explicitly and implicitly.

You can explicitly create a scope property that references a JavaScript object as follows:

  • Assigns an object directly to the scope object property in JavaScript code, which is common in controllers:

       function myctrl  ( $scope )  {//create property ' foo ' on the Myctrl ' s scope //and assign it an Initial value ' Bar '  $scope .=  ' bar ' ;               /span>          
  • To use an expression in a template:

    <button ng-click="{{foos=‘ball‘}}">Click me</button>

  • Use directives in Templates ngInit (only for instances, not recommended for use in real-world applications):

    <body ng-init=" foo = ‘bar‘ ">

When working with a template structure such as the following, ANGULARJS creates the model implicitly (by creating a property of a scope object and assigning the appropriate value to it).

    • From input, select, textarea, or other form elements:

      <input ng-model="query" value="fluffy cloud">

The above code creates a named model in the current scope query , and the value is set to "Fluffy cloud".

    • In ngRepeater the iteration declaration:

      <p ng-repeat="phone in phones"></p>

The above code phones creates a sub-scope for each item in the array. and a named object (model) is created in the respective scope phone , and its value is set to the current value in the array.

Controller

In Angularjs, a controller is a JavaScript function that is used to enhance a scope instance other than the root scope. When you or Angularjs itself scope.$new creates a new sub-scope object, there is an option that allows you to pass it as a parameter to the controller. This enables the ANGULARJS to associate the controller with this scope, enhancing the behavior of the scope.

The controller is used for:

    • Sets the initial state of the scope object.
    • Adds behavior to a scope object.

Set the initial state for the Action object:

In general, when you create an app, you need to set the initial state for its scope.

Angularjs sets the initial state of the scope by invoking the Controller's constructor on the scope object, which is, in a sense, the same as using JavaScript's Apply method. This means that ANGULARJS does not create an instance of the controller type (it does not use the new method to invoke the Controller constructor). The controller is always called on an existing scope object.

You can set the initial state of the initial scope by creating a model property. Like what:

function GreetingCtrl ($scope) {$scope. Greeting = ' hola! ';}

The GreetingCtrl controller creates a model that can be called in a template greeting .

Adding behavior to scope objects

The behavior of a Angularjs scope object is represented by a scoped method. These methods can be called in a template or in a view. These methods interact with the model of the application and can change the model.

As we said in the chapter of the model, any object (or primitive type) is assigned to a scope and becomes a model. Any method assigned to a scope can be called in a template or view, and can be invoked through an expression or an ng event instruction. (e.g., Ngclick)

How do we use the controller correctly?

In general, a controller should not do too much work. It should contain only the business logic of a single view.

The most common practice of maintaining a single controller is to extract work that is not part of the controller into the service, and then use the services in the controller through dependency injection. This is discussed in detail in the section on Dependency injection services.

Do not use the controller to do the following things:

    • The controller should only care about the business logic. DOM Operations (presentation logic) often make testing difficult. Putting any representation logic into the controller will significantly increase the difficulty of testing the business logic. The ANGULARJS provides for dev_guide.templates.databinding automatic DOM manipulation. If you need to manipulate the DOM manually, pull the logic out of the presentation layer into the instruction.
    • Format the input-you should use the Angularjs form control to implement formatting.
    • Format the output-you should use the ANGULARJS filter to implement:
    • Instantiate a component or control the life cycle of other components (such as creating an instance of a service).

You can use the display to scope.$new relate the controller to the scope object, or implicitly through the ngController command or $route service.

Finally, we use examples to explain the controller:

To illustrate how the Angularjs controller component works, let's create a small application that has the following components:

    • A template with two buttons and a message
    • A spice string model called.
    • A controller with two methods is Spicyctrl. These two methods are used to set spice the value.
<body ng-controller= "Spicyctrl" > <button ng-click= "chilispicy ()" >Chili</button> <button Ng-click= "Jalapenospicy ()" >Jalapeño</button> <p>the food is {{spice}} spicy!</p></body> function  = ' very 'function() {   = ' chili 'function() {   = ' jalapeño ';}}

The message in the template (the contents of the P element) contains a spice binding to the model whose initial string is "very". This spice model will be set to chili or jalapeno, depending on which button is clicked. The message is 数据绑定 automatically updated. The following are some of the things to note in the example:

    • ngControllerDirectives are used (implicitly) to create scopes for templates. and use the controller specified in the directive spicyCtrl to enhance the scope.
    • Assigning a new property to the scope object creates or updates the model.
    • The methods used in the controller can be called in the template (in the BODY element or in the child element).
    • The old version of Angularjs (before 1.0RC) automatically adds a method to the scope object prototype, and now it won't. All methods must be manually added to the scope.

The Controller method can accept parameters such as:

<body ng-controller= "Spicyctrl" > <input ng-model= "customspice" value= "wasabi" > <button ng-click= " Spicy (' chili ') ">Chili</button> <button ng-click=" spicy (customspice) ">custom spice</button> <p>the food is {{spice}} spicy!</p></body>function= ' very 'function  (Spice) {   = Spice;}}

in the SpicyCtrl controller, only a method called spicy is defined, which accepts a parameter called Spice. The template associated with this controller passes a constant in the first button event chili to the method in the controller, passing a model property in the second button.

Example controller inheritance:

Controller inheritance in Angularjs is scoped-based inheritance, such as:

 <body ng-controller= "Mainctrl" > <p>good {{timeOfDay}}, {{name}}!</p> <div ng-controller= " Childctrl "> <p>good {{timeOfDay}}, {{name}}!</p> <p ng-controller=" Babyctrl ">good {{TimeOfDay}} {{Name}}!</p></body>function   Mainctrl ($scope) {$scope. TimeOfDay  = ' Morning '  = ' Nikki ' Span style= "color: #000000;" >;} function   Childctrl ($scope) {$scope. Name  = ' Mattie '  

Notice how we nested our instructions in the template ngController . This template structure allows Angularjs to create four scopes for a view:

    • Root scope
    • The Mainctrl scope, which contains the model TimeOfDay and model name.
    • Childctrl scope, which inherits the timeofday of the upper scope, and the name is replicated.
    • Babyctrl scopes, which replicate the name in TimeOfDay and Childctrl defined in Mainctrl.

Controller inheritance and model inheritance are the same principle.

Note: Regular prototype inheritance does not work for the controller. Because, as we mentioned earlier, the controller is not instantiated directly, but is called on the scope object.

View

In Angularjs, the view refers to the DOM after the browser is loaded and rendered, and in Angularjs, based on the template, controller, and model information.

In Angularjs's implementation of MVC, the view is known to model and controller. The view knows the two-way binding of the model, and the view knows by instruction that the controller, such as ngController and ngView instructions, can also be known through bindings, such as {{someControllerFunction()}} . In these ways, the view can invoke methods in the corresponding controller.

Come on!

Angularjs Development Guide 11:angularjs Model,controller,view detailed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.