-
[AngularJS] 4. 제어(controller) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:16
1. AngularJS Controllers
AngularJS 어플리케이션은 제어(controller)에 의해 제어됩니다.
ng-controller 지시어는 어플리케이션 제어를 선언합니다.
제어는 정규 자바스크립트 객체 생성자에 의해 만들어 지는 자바스크립트 객체입니다.
12345678910111213141516171819202122232425<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app="myApp" ng-controller="myCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{firstName + " " + lastName}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";});</script></body></html>cs AngularJS 어플리케이션은 ng-app="myApp"에 의해 정의됩니다. 어플리케이션은 <div> 태그 내부에서 실행됩니다.
ng-controller="myCtrl"는 AngularJS 지시어 입니다. 이것은 제어기로 정의됩니다.
myCtrl 함수는 자바스크립트 함수입니다.
AngularJS는 $scope 객체와 함께 제어기를 적용할 것입니다.
AngularJS에서, $scope는 어플리케이션 객체입니다(어플리케이션 변수와 함수의 주인[owner]).
제어기(Controller)는 범위(firstName & lastName) 내에서 두 변수를 생성합니다.
ng-model 지시어는 firstName과 lastName의 제어 변수에 입력 필드를 연결합니다.
2. Controller Methods
제어는 메소드를 또한 갖습니다:
1234567891011121314151617181920212223242526272829<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app="myApp" ng-controller="personCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{fullName()}}</div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";$scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;};});</script></body></html>cs 3. Controllers In External Files
큰 어플리케이션에서, 외부 파일로 저장된 제어는 종종 있습니다.
자바스크립트 외부 파일을 불러오듯, 불러올 수 있습니다.
1234567891011<div ng-app="" ng-controller="personController">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: {{firstName + " " + lastName}}</div><script src="personController.js"></script>cs * 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 5. 필터(filter) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 3. 지시어(directives) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 2. 식(expression) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 1. 소개(Introduction) - Angular JS 강좌 (0) 2015.06.12
