Angular의 컨트롤러, 서비스 및 명령어 간의 관계에 대한 간략한 설명

이 글에서는 angular컨트롤러, 서비스 및 지침 간의 관계를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【관련 추천: "angular Tutorial"】

전체적으로 이 세 가지 구성 요소의 관계는 다음과 같습니다.

• 서비스는 원격 서버에서 데이터를 가져오고 저장하는 역할을 담당합니다.
• 서비스를 기반으로 구축된 컨트롤러는 Angular의 범위 계층 구조에 데이터와 기능을 제공합니다.
• 서비스 및 컨트롤러에 구축된 지시문은 DOM(문서 개체 모델) 요소와 직접 상호 작용합니다.

컨트롤러가 종속성 주입기에 등록되지 않았기 때문에 컨트롤러와 서비스는 컨트롤러를 종속성으로 나열할 수 없습니다.

<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) {
    //错误：使用控制器注册
});

각 ng-controller는 한 번 인스턴스화되고 서비스도 한 번만 인스턴스화됩니다. 즉, 서비스는 싱글톤입니다.

컨트롤러는 로컬 개체를 $scope와 같은 종속성으로 나열할 수 있지만 서비스는 로컬 개체를 종속성으로 나열할 수 없습니다.

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

이것이 Angular에서 서비스 대신 HTML에 JavaScript 데이터와 기능을 노출하는 컨트롤러인 이유입니다. 컨트롤러는 $scope에 액세스할 수 있습니다.

지시문에는 연결된 컨트롤러가 있을 수 있으며 서비스는 종속성으로 나열될 수 있습니다. 그러나 컨트롤러와 서비스는 지시문을 종속성으로 나열할 수 없습니다.

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

지시어에는 require 속성이 있을 수도 있는데, 이는 지시어의 범위가 항상 다른 지시어 범위의 하위 항목이어야 함을 보장하는 데 사용됩니다.

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

지시문 옵션 require에서는 stockRow 지시문의 범위가 stockTable 지시문 범위의 하위 항목이어야 하며 링크 함수의 네 번째 매개변수인 인스턴스화된 stockTable 지시문의 컨트롤러에 액세스할 수 있어야 합니다. 두 지시문을 함께 사용해야 하는 경우 require 지시문 옵션이 해당 작업에 적합한 도구입니다.

참고: "AngularJS를 사용한 고급 프로그래밍"을 참조하고 메모로 사용하세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Angular의 컨트롤러, 서비스 및 명령어 간의 관계에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!