Learn from me. Angularjs:controller data sharing, inheritance, communication usage

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

Abstract: This paper presents the detailed use of data sharing, inheritance, and communication in controller in ANGULARJS.

This tutorial uses the ANGULARJS version: 1.5.3

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

angularjs:https://angularjs.org/

first, Controller Foundation and usage

The name of the controller in Angularjs is the control, which is a JavaScript function (Type/Class) that adds additional functionality to the scope ($scope) of the view. And each controller has its own scope and can also share data within the scope of their parent controller.

The functions that can be implemented are as follows:

(1) Setting the initial state for a scope object

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

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

Above we set up a inputvalue, if you want to use in the HTML page, you can directly use {{Inputvalue}}, as follows:

Of course, you can also bind this data to a single input, select, and so on, as follows:
<input  type= "text" Ng-model = "Inputvalue" >

(2) 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 application model 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 a ng event instruction. As follows:
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, because the scope of the child controller will be prototyped 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 appropriate 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.
The following example:
<! DOCTYPE html>

It is important to note that the Childctrl div must be placed in the div where the Parentctrl is located to take effect! And if you need to invoke the child controller's method from the parent controller, an error will occur using the above code.

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 altogether three kinds. The function to be implemented is that the global variables defined in the Ng-app can be used in different ng-controller.
The global variable is defined directly by Var, which is the same as the pure JS.
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, which is injection, which uses the service to inject the 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 way we can function inside the $on, $emit, $boardcast these ways to achieve, where $on represents event monitoring, $emit represents to the parent above the
A scope-triggered event, $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.

The event arguments in the $on method, the properties and methods of their objects are as follows

 
       

  
        
 
         
 
          
Event Properties
 
          
Purpose
 
         
 
        
  
        
 
         
 
          
event.targetscope 
 
          
 emit or propagate the scope of the original event 
 
         
 
         
 
          
event.currentscope 
 
          
 The scope of the event currently 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, but it will set ' defaultprevented ' to true. It does not check the value of ' defaultprevented ' until the event listener's implementation takes action. 
 
         
 
         
 
          
event.defaultprevented
 
          
If you call
 
         
 
        
 
       
v. Some suggestions for controller layer
1, the controller layer does not involve too much business logic, you can extract the common parts to 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 as a service injection controller layer.
5. The $scope in the controller is the only source of page data. Do not modify the DOM directly.
6, controller do not in the global scope

Reference article:
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 from me. Angularjs:controller data sharing, inheritance, communication usage