A brief discussion on the relationship between controllers, services and instructions in Angular

This article will introduce to you the relationship between angular controllers, services and instructions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Related recommendation: "angular tutorial"]

Overall, the relationship between these three components is as follows :

• The service is responsible for fetching and storing data from the remote server.
• Controllers built on services will provide data and functionality to Angular's scope hierarchy.
• Directives built on top of services and controllers will interact directly with Document Object Model (DOM) elements.

Because the controller is not registered with the dependency injector, the controller and the service cannot list the controller as a dependency.

<div ng-controller="MyController"></div>

var m = angular.module('myModule');
 
m.factory('myService', function() {
    return { answer: 42 };
});
 
m.controller('MyController', function(myService) {
    //使用myService
});
 
m.controller('MyController2', function(MyController) {
    //错误：使用控制器注册
});
 
m.factory('myService2', function(MyController) {
    //错误：使用控制器注册
});

Each ng-controller will be instantiated once, and the service will only be instantiated once, that is, the service is a singleton.

The controller can list local objects as dependencies, such as $scope, but the service cannot list local objects as dependencies.

m.factory('myService', function($scope) {
    //错误：$scope未使用依赖注入器进行注册
});

This is why in Angular it is the controller that exposes JavaScript data and functions to HTML instead of the service: the controller has access to $scope.

The directive can have an associated controller and the service can be listed as a dependency. But controllers and services cannot list directives as dependencies.

angular.module('stockDogApp')
  .directive('stockTable', function() {
  	return {
  		template: 'Views/templates/stock-table.html',
  		restrict: 'E',
  		scope: {
  			watchlist: '='
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });

The directive can also have a require attribute, which is used to ensure that the scope of the directive must always be a descendant of the scope of another directive.

angular.module('stockDogApp')
  .directive('stockRow', function($timeout, QuoteService) {
  	return {
  		restrict: 'A',
  		require: '^stockTable' //stockTable指令，^表示在父作用域中寻找
  		scope: {
  			stock: '=',
  			isLast: '='
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });

The directive option require requires that the scope of the stockRow directive must be a descendant of the scope of the stockTable directive and can access the controller of the instantiated stockTable directive, which is the fourth parameter of the link function. If the two directives need to be used together, the require directive option is the right tool for the job.

Note: Please refer to "Advanced Programming with AngularJS" and treat it as a memo only.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on the relationship between controllers, services and instructions in Angular. For more information, please follow other related articles on the PHP Chinese website!