Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 4. 제어(controller) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 4. 제어(controller) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:22
728x90
반응형

1. AngularJS Controllers


 AngularJS 어플리케이션은 제어(controller)에 의해 제어됩니다.


 ng-controller 지시어는 어플리케이션 제어를 선언합니다.


 제어는 정규 자바스크립트 객체 생성자에 의해 만들어 지는 자바스크립트 객체입니다.



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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


 제어는 메소드를 또한 갖습니다:




 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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


 큰 어플리케이션에서, 외부 파일로 저장된 제어는 종종 있습니다.


 자바스크립트 외부 파일을 불러오듯, 불러올 수 있습니다.





 

1
2
3
4
5
6
7
8
9
10
11
<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 를 참고하여 작성하였습니다.

728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 6. Http - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 3. 지시어(directives) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 2. 식(expression) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 1. 소개(Introduction) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more