app.controller vs angular.controller의 함수
난 angular.js를 배우고 있는데 언제가 될지 궁금해app.controller("MyCtrl",...)언제 사용해야 하는지function MyCtrl($scope){...}사용해야 합니다.
이 예에서는 두 가지 접근법 사이에 큰 차이는 없습니다(플런커 링크).
index.syslog:
<body ng-app="myApp">
<div ng-controller="FirstCtrl as app1">
<button class="btn" ng-model="app1.count"
ng-click="app1.increment()">
Click to increment</button>
{{ app1.count }}
</div>
<div ng-controller="SecondCtrl">
<button class="btn" ng-model="count"
ng-click="increment()">
Click to increment</button>
{{ count }}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript" src="example.js"></script>
</body>
example.syslog:
var app = angular.module("myApp", []);
app.controller("FirstCtrl",function () {
this.count = 0;
this.increment = function (){
this.count = this.count + 1;
}
});
function SecondCtrl($scope){
$scope.count = 0;
$scope.increment = function (){
$scope.count = $scope.count + 1;
}
}
모듈 기반 컨트롤러 선언을 사용하는 주요 이유는 다음과 같습니다.
- 최소화를 지원합니다.종속성 주입에 실패하여 코드를 최소화하면 두 번째 접근 방식이 중단됩니다.
- JavaScript의 베스트 프랙티스는 글로벌 네임스페이스와 그 첫 번째 구문 도움말을 오염시키는 것을 최소화하는 것입니다.
두 가지 사용법 모두에서 권장되는 접근법은$scope(사용하는 것보다) 그것을 사용합니다.this(두 번째 접근법에서도 실행할 수 있습니다).
접근법 1과 2의 차이는 최소화를 지원하는 방법에 있습니다.전자의 경우 삽입된 인수 배열을 지정할 수 있지만 후자의 경우 변경 가능합니다.$inject이것은 물론 조금 기술적이지만 최소화를 지원하는 것이 좋습니다.설명서의 최소화에 대한 참고 사항을 참조하십시오.
전자는 또한 글로벌 범위에서 함수의 이름을 붙이지 않으며, 이는 일반적으로 좋은 일입니다!
일반적으로 응용 프로그램을 만들 때 Angular 스코프의 초기 상태를 설정해야 합니다.
Angular는 새로운 Angular 스코프 오브젝트에 컨트롤러 컨스트럭터 함수를 적용합니다(JavaScript의 Function#apply).이 오브젝트는 초기 스코프 상태를 설정합니다.즉, Angular는 (컨트롤러 컨스트럭터에서 새로운 연산자를 호출함으로써) 컨트롤러 유형의 인스턴스를 생성하지 않습니다.생성자는 항상 기존 범위 개체에 적용됩니다.
모델 속성을 생성하여 범위의 초기 상태를 설정합니다.예를 들어 다음과 같습니다.
function GreetingCtrl($scope) {
$scope.greeting = 'Hola!';
}
GreetingCtrl 컨트롤러는 템플릿에서 참조할 수 있는 그리팅 모델을 만듭니다.
메모: 이 문서의 많은 예에서는 글로벌 범위에서 함수가 생성되었음을 보여 줍니다.이는 데모용일 뿐입니다.실제 어플리케이션에서는 다음과 같이 어플리케이션에 Angular 모듈의 .controller 메서드를 사용해야 합니다.
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
또한 어레이 표기법을 사용하여 Angular가 제공하는 $scope 서비스에 대한 컨트롤러의 의존성을 명시적으로 지정합니다.
언급URL : https://stackoverflow.com/questions/18912287/app-controller-vs-function-in-angular-js
'programing' 카테고리의 다른 글
| 각도 JS는 태그 내의 HTML을 표시합니다. (0) | 2023.04.01 |
|---|---|
| $location Change Start, $route Change Start 및 $state의 차이Change Start(변경 시작) (0) | 2023.04.01 |
| iOS에서의 네이티브 JSON 지원 (0) | 2023.04.01 |
| reactjs의 this.refs를 사용하여 입력 유형에서 값을 얻는 방법 (0) | 2023.04.01 |
| Wordpress 사용자가 레일 설계로 이행 (0) | 2023.04.01 |