Learn Angularjs:controller with Me. data sharing, inheritance, communication use specific explanations

Lin Bingwen Evankaka Original works. Reprint please specify the source Http://blog.csdn.net/evankaka

Abstract: This paper introduces the use of data sharing, inheritance and communication in controller in Angularjs.

This tutorial uses the ANGULARJS version number: 1.5.3

AngularJs github:https://github.com/angular/angular.js/

angularjs:https://angularjs.org/

first, Controller Foundation and use method

The controller is the Chinese name in Angularjs. It is a JavaScript function (type/class). Used to add additional functionality to the scope ($scope) of the VIEW. And each controller has its own scope, and at the same time can share the data within the scope of their parent controller.

The functions that can be implemented include the Following:

(1) setting the initial state for a scope object

You can set the initial state of the initial scope by creating a model Property. Example:

var app = Angular.module (' myApp ', []); app.controller (' mycontroller ', function ($scope) {    $scope. inputvalue = " Lin Bingwen Evankaka ";});

Above we set up a inputvalue, suppose to use in the HTML page. You can use {{inputvalue}} directly, for example, the following:

of course, You can also bind this data to a single input, select, and so on, such as the Following:
<input  type= "text" ng-model = "inputvalue" >

(2) adding behavior to a Scope object

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 application model and can change the Model.
As we said in the chapter of the model, no matter what object (or native Type) is assigned to the scope, it 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 NG event Instruction. For example, the Following:
var app = Angular.module (' myApp ', []); app.controller (' mycontroller ', function ($scope) {    $scope. Myclick = function ( {    Alert ("click");    }});
Then use the following page:
<button ng-click= "myclick ()" ></button>  
This adds a click event to the button

second, Controller Inheritance
The inheritance that is said here generally refers to the scope data, which is because the scope of the child controller will prototype to inherit the scope of the parent Controller.
So when you need to reuse the functionality from the parent controller, all you have to do is add the corresponding method to the parent Scope. As a result, the Self-controller will get all the methods in the parent scope through the prototype of its scope.
Examples include the following:
<! DOCTYPE html>

Note here that the Childctrl div must be placed in the div where the Parentctrl is located to take effect!
And assuming you need to invoke the child Controller's method from the parent controller, then using the above code will cause an Error.

iii. sharing of data between controllers
(1) define scope in parent controller, child sharing
<! DOCTYPE html>
(2) share the data globally
There are two kinds of Angularjs itself, the method of setting global variables, and the method of setting global variables with js, There are three kinds of total together.
The function to be implemented is that the global variables defined in the Ng-app can be used in different ng-controller.
Define global variable directly with var. This pure JS is the Same.
Use Angularjs value to set the global Variable.
Use ANGULARJS constant to set global Variables.

Here's How to use value
<! DOCTYPE html>
(3) Service Dependency Injection
One of the most prominent special Angularjs is Di. That is, Injection. Use service to inject data that needs to be shared to the required Controller.
That's the best way.
<! DOCTYPE html>iv. communication between controllers
In general, inheritance-based approaches are sufficient for most situations, but this approach does not implement communication between sibling controllers, so it leads to the way events are Made.
In the event-based approach we are able to function within the $on, $emit, $boardcast these ways to achieve, in which $on represents event Monitoring. $emit indicates that the parent-to-
The scope trigger Event. The $boardcast represents a broadcast event to a scope below the child level.
$emit can only pass event and data to the parent controller
$broadcast can only pass event and data to child controller
$on for receiving event and data
Example One:
<! DOCTYPE html>
Example Two:
<! DOCTYPE html>Output result:

$emit and $broadcast can pass multiple Parameters. $on can also receive multiple Parameters.


In the $on method, the event parameters are the attributes and methods of the object, such as the following

 
       

  
        
 
         
 
          
Event Properties
 
          
Purpose
 
         
 
        
  
        
 
         
 
          
event.targetscope 
 
          
 emit or propagate the scope of the original event 
 
         
 
         
 
          
event.currentscope 
 
          
 Now the scope of the event being processed 
 
         
 
         
 
          
event.name 
 
          
 event name 
 
         
 
         
 
          
event.stoppropagation () 
 
          
 a function to prevent further propagation (bubbling/trapping) of events (this applies only to events emitted using ' $emit ') 
 
         
 
         
 
          
event.preventdefault () 
 
          
 This method does not actually do anything. however, ' defaultprevented ' is set to True. 
 
 
 Checks the value of ' defaultprevented ' until the event Listener's implementation takes Action. 
 
         
 
         
 
          
event.defaultprevented
 
          
Assume that the call
 
         
 
        
 
       
v. Some suggestions for controller layer
1, the controller layer does not involve too much business logic, to be able to extract the common part of the service layer
2, Service Layer: mainly responsible for data exchange and processing, processing some business areas of logic;
3, Controller Layer: The main responsible for initializing the $scope variables used to pass to the view layer, and processing some of the logic of the page interaction;
4, when a function is to design remote API calls, datasets, Business Insight Complex logic, will be a large number of repeated operations, you can consider the code in service form into the controller layer.
5. The $scope in the controller is the only source of page Data.
Do not alter the DOM DIRECTLY.
6, controller do not in the global scope

Articles:
http://www.jianshu.com/p/1e1aaf0fd30a
http://cnodejs.org/topic/54dd47fa7939ece1281aa54f
http://www.html-js.com/article/1847
Http://blog.51yip.com/jsjquery/1601.html
Http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html?utm_source=tuicool&utm_medium=referral
Http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html
 
Learn Angularjs:controller with Me. data sharing, inheritance, communication use specific explanations