각도에서 컨트롤러는 루트 범위를 제외한 각도 범위 (//www.vevb.com/article/91749.htm)의 인스턴스로 사용되는 JavaScript 함수 (유형/클래스)입니다. 우리가 범위를 통해 새로운 아동 스코프를 만들 때. $ new API (http://docs.angularjs.org/api/ng.$ rootscope.scope#$new), 방법의 매개 변수로 컨트롤러로 전달할 수있는 옵션이 있습니다 (여기서는 컨트롤러의 첫 번째 매개 변수만이 새로 만들어진 스코프라는 것을 알고 있습니다. 이것은 컨트롤러와 새로운 범위를 결합해야한다고 말하고 동작을 확장해야한다는 것을 알 수 있습니다.
컨트롤러는 다음과 같이 사용할 수 있습니다.
1. 스코프 객체의 초기 상태를 설정하십시오.
2. 범위에 동작을 추가하십시오.
1. 스코프 객체의 초기 상태 설정
일반적으로 응용 프로그램을 만들 때 각도의 초기화 상태를 설정해야합니다.
Angular는 컨트롤러 생성자에 새로운 스코프 객체를 적용하고 (매개 변수로 전달되는 것으로 추정 됨) 초기 스코프 상태를 설정합니다. 이는 Angular가 컨트롤러 유형 인스턴스를 생성하지 않음을 의미합니다 (즉, 컨트롤러 생성자에 새 연산자를 사용하지 않음). 생성자는 항상 기존 스코프 객체에 적용됩니다.
모델 속성을 만들어 초기 범위 상태를 만듭니다. 예를 들어:
함수 greetingctrl ($ scope) {$ scope.greeting = "hola!";}
컨트롤러 "GreetingCtrl"은 템플릿에 적용 할 수있는 "인사"라는 모델을 만듭니다.
2. 스코프 객체에 동작 추가
각도 범위 객체의 동작은 템플릿 및 뷰에 대한 스코프 메소드 속성 형태입니다. 이 동작은 응용 프로그램의 모델을 수정할 수 있습니다.
가이드 모델 장 (//www.vevb.com/article/91777.htm)에서 논의 된 바와 같이, 모든 객체 (또는 원시 유형)가 범위에 할당되며 모델 속성이됩니다. 스코프에 첨부 된 모든 기능은 템플릿 뷰에서 사용할 수 있으며 각도 표현식 또는 NG 이벤트 핸들러 지침 (예 : NGClick)을 통해 호출 할 수 있습니다.
3. 컨트롤러를 올바르게 사용합니다
일반적으로 컨트롤러는 너무 많이 시도해서는 안됩니다. 단일보기에만 필요한 비즈니스 논리 만 포함해야합니다 (그리고 돌아 서서는 아니고 항상 컨트롤러가 전달이라고 생각했습니다 ...).
컨트롤러를 간단하게 유지하기 위해 일반적인 방법은 컨트롤러에 속하지 않은 작업을 서비스에 추출하고 컨트롤러의 종속성 주입을 통해 이러한 서비스를 사용하는 것입니다. 이러한 것들은 마법사의 종속성 주입 서비스 장에서 논의 될 것입니다.
컨트롤러에서 다음을 수행하지 마십시오.
4. 컨트롤러를 각도 범위 객체와 연결합니다
우리는 스코프를 통해 컨트롤러와 스코프 객체를 명시 적으로 연결하거나 ngcontroller directive (http://docs.angularjs.org/api/ng.direction:ngcontroller) 또는 $ route service (http://docs.angularjs.org/api/ng.$route)를 암시 적으로 사용할 수 있습니다.
1. 컨트롤러 생성자 및 방법의 예
컨트롤러 구성 요소가 Angular에서 어떻게 작동하는지 설명하려면 다음 구성 요소를 사용하여 작은 응용 프로그램을 작성하겠습니다.
템플릿의 메시지에는 향신료 모델에 대한 바인딩이 포함되어 있으며 기본적으로 "매우"로 설정됩니다. 클릭중인 버튼에 따라 향신료 모델의 값을 "칠리"또는 "Jalapeño"로 설정하면 데이터 바인딩으로 메시지가 자동으로 업데이트됩니다.
<! docType html> <html ng-app> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> Spicy-Controller </title> <meta content = "ie = edge, chrome = 1"http-equiv = "x-ua-catientive"> type = "text/css"> .ng-cloak {display : none; } </style> </head> <hod> <div ng-controller = "spicyctrl"> <button ng-click = "chilispicy ()"> chili </button> <button ng-click = "jalapenospicy ( 'jalapeño')"> jalapeño </button> <p> {spice}}}}}}}}} <script src = "../ Angular-1.0.1.js"type = "text/javaScript> </script> <script type ="text/javaScript "> function spicyCtrl ($ scope) {$ scope.spice ="atrog "; $ scope.chilispicy = function () {$ scope.spice = "Chili"; }; $ scope.jalapenospicy = function (val) {this.spice = val; }; } </script> </body> </html>위의 예에서 주목할 사항 :
컨트롤러 메소드는 다음 예에서 볼 수 있듯이 매개 변수를 사용할 수 있습니다.
<! docType html> <html ng-app> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 컨트롤러-메드-아르먼트 </title> <meta content = "ise = edge, chrome = 1" "x-ua-catietive type = "text/css"> .ng-cloak {display : none; }. {{spice}} spicy! </p> </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript> <script type ="text/javaScript "> 함수 spicyctrl ($ scope) {$ scope.spicy ="very "; $ scope.spicy = function (spice) {$ scope.spice = spice; }; } </script> </body> </html>SpicyCtrl 컨트롤러는 이제 매개 변수 "Spice"가있는 메소드 만 정의하고 "Spicy"라고합니다. 템플릿은 컨트롤러 방법을 참조하고 일정한 문자열 또는 모델 값을 전달할 수 있습니다.
각도의 컨트롤러 상속은 범위 상속을 기반으로합니다. 다음 예를 살펴 보겠습니다.
<! docType html> <html ng-app> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 컨트롤러-인셔 턴스 </title> <meta content = "ie = edge, chrome = 1"http-equiv = x-ua-comative "> type = "text/css"> .ng-cloak {display : none; } </style> </head> <hod> <div ng-controller = "mainctrl"> <p> good {{timeofday}}, {{name}}! </p> <div ng-controller = "childctrl"> <p> good {{timeofday}}, {<p>}}! ng-controller = "babyctrl"> good {{timeofday}}, {{name}! $ scope.timeofday = '메인 타임'; $ scope.name = '기본 이름'; } function childctrl ($ scope) {$ scope.name = 'child name'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = '아기 이름'; } </script> </body> </html>3 NGController를 템플릿에 직접 둥지에 주목하십시오. 우리의 관점에서,이 템플릿 구조는 4 개의 스코프를 생성합니다.
상속 작업은 컨트롤러 및 모델에서 동일합니다. 따라서 이전 예에서는 컨트롤러를 통해 모든 모델을 다시 작성할 수 있습니다.
참고 : 앞에서 언급했듯이 컨트롤러는 각도를 통해 직접 초기화되지 않고 그 범위 객체를 적용하기 때문에 두 컨트롤러 간의 표준 프로토 타입 상속은 작동하지 않습니다. (컨트롤러는 Angular에 의해 직접 인스턴스화되지 않고 오히려 스코프 객체에 적용됩니다. 여기에 이전과 동일합니다. 여전히 이해하지 못합니다.)
5. 테스트 컨트롤러
컨트롤러를 테스트하는 방법에는 여러 가지가 있지만 아래와 같이 최고의 규칙 중 하나는 $ rootscope 및 $ 컨트롤러를 주입해야합니다. (테스트는 jasmine.js와 조정되어야합니다)
<! docType html> <html ng-app> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 컨트롤러-테스트 </title> <meta content = "ie = edge, chrome = 1"http-equiv = x-ua-compitive ""x-compitive "" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <body> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script src = "../ Angular-scenario-1.0.1.js"type = "text/javascript"> <script src =. 유형 = "text/javaScript"> </script> <script src = "../ Angular-mocks-1.0.1.js"type = "text/javaScript"> </script> <script type = "text/javaScript"> 함수 myController ($ scope.spices = [{name ") :"pasilla ","spicines ":" { "이름": "Jalapeno", "Spiceiness": "Hot Hot!"}, { "name": "Habanero", "Spiceness": "Lava Hot !!"}]; $ scope.spice = "Habanero"; } 설명 ( "myController function", function () {explice ( "myController", function () {var scope; evereach (inject (function ($ rootscope, $ 컨트롤러) {scope = $ rootscope. $ new (); var ctrl = $ controller (myController, {$ scope mocle}); Spices ', function () {scope.spices.length (3); }); (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateinterval = 1000; var trivialReporter = new jasmine.trivialReporter (); jasmineenv.addreporter (trivialReporter); };중첩 컨트롤러를 테스트 해야하는 경우 DOM에서와 같은 테스트에서 동일한 범위 상속 관계를 만들어야합니다.
<! docType html> <html ng-app> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 컨트롤러-테스트 </title> <meta content = "ie = edge, chrome = 1"http-equiv = x-ua-compitive ""x-compitive "" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <body> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script src = "../ Angular-scenario-1.0.1.js"type = "text/javascript"> <script src =. type = "text/javaScript"> </script> <script src = "../ Angular-mocks-1.0.1.js"type = "text/javaScript"> </script> <script type = "text/javascript"> function mainctrl ($ scope) {$ scope.timeofday = 'main time'; $ scope.name = '기본 이름'; } function childctrl ($ scope) {$ scope.name = 'child name'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = '아기 이름'; } 설명 ( "myController", function () {var mainscope, childscope, babyscope; evereach (inject (inject ($ rootscope, $ 컨트롤러) {mainscope = $ rootscope. $ new (); var mainctrl = $ controller (mainctrl, {$ scope : mainscp}); $ 컨트롤러 (childctrl : childscope}); expling (메인 이름) (childscope.name). (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateinterval = 1000; var trivialReporter = new jasmine.trivialReporter (); jasmineenv.addreporter (trivialReporter); };위는 컨트롤러 구성 요소를 이해하는 Angularjs에 대한 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 지원해 주셔서 감사합니다!