ANGULARJS Study notes--understanding the Controller Component

Original address: Http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model

　　

In angular, the controller is a JavaScript function (Type/class) that is used to extend the angular scope except the root scope (http://www.cnblogs.com/lcllao/ archive/2012/09/23/2698651.html) instance. When we or angular through scope. $new API (http://docs.angularjs.org/api/ng. $rootScope. scope# $new) When creating a new child Scope, There is an option to pass in the controller as a parameter of the method (it is not clear here, only that the controller's first parameter is a newly created scope, there is bound parent scope). This will tell angular to need a co-controller and a new scope, and extend its behavior.

Controller can be used as:

• Sets the initial state of the scope object.
• Increase the behavior to the scope.

One, Setting up the initial state of a scope object (sets the initial status of scope objects)

Typically, when we create an application, we need to set the initialization state for angular scope.

Angular applies a new scope object to the controller constructor (which is estimated to be passed in as a parameter) and establishes the initial scope state. This means that angular never creates an instance of a controller type (that is, the new operator is not used for the controller's constructor). The constructor is always applied to the scope object that exists.

We established the initial state of scope by creating the Model property. For example:

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

"GreetingCtrl" The controller creates a model called "greeting" that can be applied to the template.

Ii. Adding Behavior to a scope object (adding behavior in Scope object)

The behavior on the angular scope object is used in the form of the scope method property for the template and view. This behavior (behavior) can modify the model of the application.

As discussed in the Model section of the Guide (http://www.cnblogs.com/lcllao/archive/2012/09/24/2699861.html), arbitrary objects (or primitive types) are assigned to the scope, becomes the model property. Any function attached to the scope is available for the template view, either through angular expression or through the Ng event handler directive call (such as Ngclick).

Third, Using Controllers correctly

In general, a controller should not try to do too many things. It should only contain the business logic needed for a single view (and a bit of a turn-around, always thinking that a controller is a forwarding ...). ）。

The common way to keep the controller simple is to pull out work into the service that is not part of the controller, and use the service with the controller through dependency injection. These things are discussed in the Dependency Injection Services section of the wizard.

Do not do the following things in the controller:

• Any type of DOM operation-the controller should contain only the business logic. Dom manipulation, the application's performance logic, is notoriously difficult to test. Putting any representation logic into the controller greatly affects the testability of the application logic. Angular provides data binding (http://docs.angularjs.org/guide/dev_guide.templates.databinding) to automatically manipulate (update) the DOM. If we want to perform our custom DOM operations, we can extract the representation logic into directive (http://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html).
• Input formatting-use angular form controls (http://www.cnblogs.com/lcllao/archive/2012/09/17/2688127.html) instead.
• Output filtering (formatted filter)-use angular filters instead.
• Execute stateless or stateful code shared by controller-use angular services instead.
• Instantiate or manage the life cycle of other components (such as creating a service instance).

Iv. associating Controllers with Angular Scope Objects

We can explicitly pass scope. $new Associate controllers and scope objects, or implicitly through Ngcontroller directive (http://docs.angularjs.org/api/ Ng.directive:ngController) or $route service (http://docs.angularjs.org/api/ng. $route).

1. Example of Controller constructors and methods

To illustrate how the controller component works in angular, let's create a small application using the following components:

• A template with two buttons and a simple message.
• A model that consists of a string attribute named "Spice".
• A controller that has two methods for setting the Spice property.

The message in our template contains a binding to spice model, which is set to "very" by default. Depending on the click button, the value of the spice model is set to "chili" or "jalapeño", and the message is automatically updated with data binding.

<! DOCTYPE html>
Here are some things to note in the example above:

 
 

  
  
 
   
Ngcontroller directive is used as our template (implicitly) to create scope, which scope is called the Spicyctrl parameter.
 
   
Spicyctrl is just a normal JavaScript function. As a (discretionary) naming convention, the name begins with an uppercase letter and ends with "Ctrl" or "Controller".
 
   
Assigning values to a property creates or updates the model of the $scope.
 
   
The Controller method can be created by assigning directly to the $scope implementation. (Chilispicy method)
 
   
The controller's two methods are available in the template (both the element in which the Ng-controller property resides and its child elements).
 
   
Note: Previous versions of Angular (before 1.0RC) allow us to use this instead of $scope to define $scope methods, but this is no longer applicable. In the method defined on the scope, this is equivalent to $scope (angular this to scope), but not in our controller constructor.
 
   
Note: Previous versions of Angular (before 1.0RC) will automatically increase the controller's prototype method to scope, but not now. All methods need to be manually added to the scope. (There was a guide before the impression that it worked.) Not yet updated-_-!)
 
  
 
 
　　
The Controller method can take parameters, as shown in the following example:
 
<! DOCTYPE html>
Note that the Spicyctrl controller now only defines a method that has a parameter of "spice", called "spicy". The template can reference a controller method and pass a constant string or model value to it.
Controller inheritance is based on scope inheritance in angular. Let's take a look at the following example:
 
<! DOCTYPE html> 
Notice how we nested 3 ngcontroller directive into the template. For our view, this template structure will cause 4 scopes to be created:

 
   

  
    
 
     
Root scope.
 
     
Mainctrl scope, including the TimeOfDay and name model.
 
     
Childctrl scope, which covers the Mainctrl scope's name model, inherits the TimeOfDay model.
 
     
Babyctrl scope, which covers the timeofday of Mainctrl scope and the name of Childctrl scope.
 
    
 
   
The inherited work is the same in the controller and model. So in our previous example, all the model can be overridden by a controller.
Note: Standard prototype inheritance between two controllers is not as we would like to work, because, as we mentioned earlier, the controller is not directly initialized by angular, but instead, the scope object is apply. (controllers is not instantiated directly by angular, but rather is applied to the scope object, here as before, I still do not understand.) ）
V. Testing Controller
Although there are many ways to test the controller, one of the best conventions, as shown below, needs to be injected with $rootscope and $controller. (Test needs to match Jasmine.js)
 
<! DOCTYPE html>
If we need to test the nested controller, we need to create the same scope inheritance in test as in the DOM.
 
<! DOCTYPE html> 
ANGULARJS Study notes--understanding the Controller Component