> 웹 프론트엔드 > JS 튜토리얼 > Angular의 컨트롤러, 서비스 및 명령어 간의 관계에 대한 간략한 설명

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

青灯夜游
풀어 주다: 2021-05-13 10:59:25
앞으로
2603명이 탐색했습니다.

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

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

【관련 추천: "angular Tutorial"】

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

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

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

<div ng-controller="MyController"></div>
로그인 후 복사
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) {
    //错误:使用控制器注册
});
로그인 후 복사

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

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

m.factory(&#39;myService&#39;, function($scope) {
    //错误:$scope未使用依赖注入器进行注册
});
로그인 후 복사

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

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

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) {
  			//...
  		}
  	}
  });
로그인 후 복사

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

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) {
  			//..
  		}	
  	}
  });
로그인 후 복사

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

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

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

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

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿