AngularJS controller controller correct communication method_AngularJS

AngularJS is a very powerful front-end MVC framework. The controller in AngularJS is a function that is used to add additional functions to the scope of the view ($scope). We use it to set the initial state of the scope object and Add custom behavior.

When we create a new controller, angularJS will help us generate and pass a new $scope object to this controller. In any part of the angularJS application, there is a parent scope, top-level This is the level where ng-app is located, and its parent scope is $rootScope.

$root of each $scope points to $rootScope, and $cope.$parent points to the parent scope.

The communication between cotrollers is essentially how the $scope where the current controller is located communicates with the $scopes on other controllers.

There are usually 3 solutions:

Using the principle of scope inheritance, the child controller accesses the content in the parent controller. Use events in angularJS, that is, use $on, $emit, $broadcast for message delivery. Use services in angularJS
The first way

That is, scopes are nested within scopes. There are certain usage restrictions and scopes need to be nested. In actual development, this scenario is relatively rare, but it is not impossible. This method is simpler and more direct.

By default in angularJS, when an attribute cannot be found in the current scope, it will be searched in the parent scope. If it cannot be found, it will be searched until $rootScope is found. If it cannot be found in $rootScope, the program will still run, but the view will not be updated.

Example

javascript

//Javascript
app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}

The second way

Because scopes are hierarchical, scope chains can be used to pass events.

There are two ways to deliver events: * $broadcast: The triggered event must be propagated downward to notify the entire event system (allowing any scope to handle this event). * $emit: If you want to remind a global module, you need to pass the event upward when you need to notify a higher-level scope (such as $rootscope).

Use $on on the scope for event monitoring.

Example

JavaScript

app.controller('ParentController', function($scope) { 
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

Another issue I want to talk about here is the performance issue of event propagation. If the $broadcast+$on method notifies all sub-scopes, there will be performance issues here, so it is recommended to use the $emit+$on method. In order to further improve performance, the defined event handling function must be released together when the scope is destroyed.

Using $emit+$on requires us to bind the event listener to $rootScope, for example:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {
var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
console.log('foo');
});
$scope.$on('$destroy', unbind);
}
]);

But this method is a bit cumbersome, and it makes me uncomfortable when defining multiple event handling functions, so let’s improve it

Use a decorator to define a new event binding function:

JavaScript

angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);

Then when we define the event handler function in the controller:

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]); 

I highly recommend this approach

The third way

Using the characteristics of the service singleton mode in angularJS, service (service) provides a way to maintain data throughout the entire life cycle of the application, communicate between controllers, and ensure data consistency .

Generally, we encapsulate the server to provide an interface for applications to access data, or to interact with data remotely.

Example

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});

The above is the correct communication method for the AngularJS controller. I hope it can help everyone.