Home > Web Front-end > JS Tutorial > body text

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

青灯夜游
Release: 2021-05-13 10:59:25
forward
2583 people have browsed it

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.

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

[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>
Copy after login
var m = angular.module(&#39;myModule&#39;);
 
m.factory(&#39;myService&#39;, function() {
    return { answer: 42 };
});
 
m.controller(&#39;MyController&#39;, function(myService) {
    //使用myService
});
 
m.controller(&#39;MyController2&#39;, function(MyController) {
    //错误:使用控制器注册
});
 
m.factory(&#39;myService2&#39;, function(MyController) {
    //错误:使用控制器注册
});
Copy after login

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(&#39;myService&#39;, function($scope) {
    //错误:$scope未使用依赖注入器进行注册
});
Copy after login

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(&#39;stockDogApp&#39;)
  .directive(&#39;stockTable&#39;, function() {
  	return {
  		template: &#39;Views/templates/stock-table.html&#39;,
  		restrict: &#39;E&#39;,
  		scope: {
  			watchlist: &#39;=&#39;
  		},
  		controller: function ($scope) {
  			//...
  		}
  	}
  });
Copy after login

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(&#39;stockDogApp&#39;)
  .directive(&#39;stockRow&#39;, function($timeout, QuoteService) {
  	return {
  		restrict: &#39;A&#39;,
  		require: &#39;^stockTable&#39; //stockTable指令,^表示在父作用域中寻找
  		scope: {
  			stock: &#39;=&#39;,
  			isLast: &#39;=&#39;
  		},
  		link: function ($scope, $element, $attrs, stockTableCtrl) {
  			//..
  		}	
  	}
  });
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!