AngularJS
컨트롤러
수색…
통사론
- <htmlElement ng-controller = "controllerName"> ... </ htmlElement>
- <script> app.controller ( 'controllerName', controllerFunction); </ script>
첫 번째 컨트롤러
컨트롤러는 범위를 유지하고 페이지 내의 특정 동작을 처리하기 위해 각도로 사용되는 기본 구조입니다. 각 컨트롤러는 HTML보기와 결합됩니다.
다음은 각도 앱의 기본 상용구입니다.
<!DOCTYPE html>
<html lang="en" ng-app='MyFirstApp'>
<head>
<title>My First App</title>
<!-- angular source -->
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<!-- Your custom controller code -->
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>
여기에 몇 가지 유의할 점이 있습니다.
<html ng-app='MyFirstApp'>
ng-app 사용하여 앱 이름을 설정하면 외부 자바 스크립트 파일에서 애플리케이션에 액세스 할 수 있습니다. 이에 대해서는 아래에서 다룹니다.
<script src="js/controllers.js"></script>
컨트롤러와 액션 / 데이터를 정의하는 Javascript 파일이 필요합니다.
<div ng-controller="MyController as mc">
ng-controller 속성은 해당 DOM 요소와 하위 요소 (재귀 적) 인 모든 요소에 대해 컨트롤러를 설정합니다.
... as mc 같은 컨트롤러 (이 경우 MyController )를 여러 개 가질 수 있습니다.이 컨트롤러의 인스턴스에 별칭을 지정합니다.
<h1>{{ mc.title }}</h1>
{{ ... }} 표기법은 Angular 표현입니다. 이 경우, 이것은 <h1> 요소의 내부 텍스트를 mc.title 의 값과 mc.title 하게 설정합니다.
참고 : Angular는 양방향 데이터 바인딩을 사용합니다. 즉, mc.title 값을 업데이트하는 방법에 관계없이 컨트롤러와 페이지 모두에 반영됩니다.
또한 각도 표현식은 컨트롤러를 참조 할 필요가 없습니다 . 각도 표현식은 {{ 1 + 2 }} 또는 {{ "Hello " + "World" }} 처럼 간단 할 수 있습니다.
<button ng-click="mc.clicked()">
ng-click 은 Angular 지시어로,이 경우 Click 이벤트를 바인딩하여 MyController 인스턴스의 clicked() 함수를 트리거합니다.
이러한 것을 염두에두고 MyController 컨트롤러 구현을 작성해 보겠습니다. 위의 예에서이 코드를 js/controller.js 합니다.
먼저 Javascript에서 각도 앱을 인스턴스화해야합니다.
var app = angular.module("MyFirstApp", []);
여기서 전달하는 이름은 ng-app 지시문을 사용하여 HTML에 설정 한 이름과 같습니다.
이제 app 객체가 생겼으므로이를 사용하여 컨트롤러를 만들 수 있습니다.
app.controller('MyController', function(){
var ctrl = this;
ctrl.title = "My First Angular App";
ctrl.description = "This is my first Angular app!";
ctrl.clicked = function(){
alert("MyController.clicked()");
};
});
참고 : 우리가 컨트롤러 인스턴스의 일부가되기를 원하는 경우, this 키워드를 사용합니다.
이것은 단순한 컨트롤러를 만드는 데 필요한 모든 것입니다.
컨트롤러 만들기
angular
.module('app')
.controller('SampleController', SampleController)
SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
$log.debug('*****SampleController******');
/* Your code below */
}
참고 : .$inject 는 축소 후 종속성이 뒤섞이지 않도록합니다. 또한 명명 된 함수로 순서가 맞는지 확인하십시오.
컨트롤러 생성, 축소 안전
컨트롤러 생성을 확장에서 보호하는 몇 가지 다른 방법이 있습니다.
첫 번째는 인라인 배열 주석입니다. 다음과 같이 보입니다.
var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);
컨트롤러 메소드의 두 번째 매개 변수는 일련의 종속성을 허용 할 수 있습니다. 당신이 볼 수 있듯이 나는 정의한 $scope 및 $http 하는 컨트롤러 함수의 매개 변수에 해당해야하는 a 될 것입니다 $scope , 및 b 것 $http .을 배열의 마지막 항목은 컨트롤러 기능이어야합니다.
두 번째 옵션은 $inject 속성을 사용하는 것입니다. 다음과 같이 보입니다.
var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}
이는 인라인 배열 주석과 동일한 기능을하지만 다른 옵션보다 한 가지 옵션을 선호하는 사용자에게 다른 스타일을 제공합니다.
주입 된 종속성의 순서는 중요합니다.
배열 폼을 사용하여 종속성을 주입 할 때 종속성 목록이 컨트롤러 함수에 전달 된 해당 인수 목록과 일치하는지 확인하십시오.
다음 예제에서 $scope 및 $http 가 반대로됨을 유의하십시오. 이로 인해 코드에 문제가 발생할 수 있습니다.
// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);
Angular JS에서 ControllerAs 사용하기
Angular $scope 는 Controller와 View 사이의 접착제로 모든 데이터 바인딩 요구에 도움이됩니다. 컨트롤러는 컨트롤러와 뷰를 바인딩하는 또 다른 방법이며, 주로 사용하는 것이 좋습니다. 기본적으로 Angular (즉, $ scope 및 Controller As)의 두 컨트롤러 구조입니다.
컨트롤러를 사용하는 다른 방법은 -
controllerAs 뷰 구문
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
controllerAs 컨트롤러 구문
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}
VM과 컨트롤러
function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
controllerAs 는 $scope 이상의 문법적 설탕입니다. 여전히 뷰에 바인딩하고 여전히 $scope 메소드에 액세스 할 수 있습니다. controllerAs 사용하는 것은 각 코어 팀에서 제안한 모범 사례 중 하나입니다. 이것에 대한 많은 이유가 있으며, 그들 중 몇몇은 -
$scope는 컨트롤러의 멤버를 중간 객체를 통해 뷰에 노출합니다.this.*를 설정하면 컨트롤러에서 공개하고자하는 내용 만 볼 수 있습니다. 또한 이것을 사용하는 표준 JavaScript 방법을 따릅니다.controllerAs구문을 사용하면보다 읽기 쉬운 코드를 사용할 수 있으며 parent 속성은$parent구문을 사용하는 대신 상위 컨트롤러의 별칭 이름을 사용하여 액세스 할 수 있습니다.문맥 상 더 읽기 쉽고, "도트 찍기 (dotting)"없이 발생할 수있는 참조 문제를 피하는 View (예 : 이름 대신 customer.name)의 "점으로 찍힌"객체에 대한 바인딩 사용을 촉진합니다.
중첩 된 컨트롤러가있는 뷰에서
$parent호출을 사용하지 않도록합니다.controllerAs구문을 사용할 때 이에 대한 캡처 변수를 사용하십시오. ViewModel을 나타내는vm과 같은 일관된 변수 이름을 선택하십시오. 왜냐하면this키워드는 맥락 적이기 때문에 컨트롤러 내부의 함수 내에서 사용되면 컨텍스트가 바뀔 수 있기 때문입니다. 이 컨텍스트를 캡처하면이 문제가 발생하지 않습니다.
참고 : controllerAs 구문을 사용하면 현재 컨트롤러에 대한 현재 범위 참조에 추가되므로 필드로 사용할 수 있습니다.
<div ng-controller="Controller as vm>...</div>
vm 은 $scope.vm 으로 사용할 수 있습니다.
Minification-Safe 각형 컨트롤러 생성
축소 안전 앵글 컨트롤러를 생성하려면 controller 기능 매개 변수를 변경하십시오.
module.controller 함수의 두 번째 인수는 배열을 전달해야합니다. 여기서 마지막 매개 변수 는 컨트롤러 함수 이고 앞에있는 모든 매개 변수는 각 주입 된 값의 이름 입니다.
이는 일반적인 패러다임과 다릅니다. 주입 된 인수로 컨트롤러 기능을 사용합니다.
주어진:
var app = angular.module('myApp');
컨트롤러는 다음과 같아야합니다.
app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);
주 : 주입 된 매개 변수의 이름은 일치시킬 필요는 없지만 순서대로 바인드됩니다.
이렇게하면 다음과 비슷한 내용으로 축소됩니다.
var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);
축소를 프로세스의 모든 인스턴스 대체 할 app 함께 의 모든 인스턴스 a $Injectable1Instance 와 b , 그리고 모든 인스턴스 $Injectable2Instance 와 c .
중첩 된 컨트롤러
중첩 제어기는 $scope 도 연결합니다. 중첩 된 컨트롤러에서 $scope 변수를 변경하면 상위 컨트롤러에서 동일한 $scope 변수가 변경됩니다.
.controller('parentController', function ($scope) {
$scope.parentVariable = "I'm the parent";
});
.controller('childController', function ($scope) {
$scope.childVariable = "I'm the child";
$scope.childFunction = function () {
$scope.parentVariable = "I'm overriding you";
};
});
이제 두 가지를 처리하려고합니다.
<body ng-controller="parentController">
What controller am I? {{parentVariable}}
<div ng-controller="childController">
What controller am I? {{childVariable}}
<button ng-click="childFunction()"> Click me to override! </button>
</div>
</body>
중첩 제어기는 장점을 가지고 있지만, 그렇게 할 때 반드시 명심해야합니다. ngController 지시문을 호출하면 컨트롤러의 새로운 인스턴스가 만들어 ngController 종종 혼란과 예기치 않은 결과가 발생할 수 있습니다.