Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 31
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 16. Application - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 16. Application - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:36
728x90

AngularJS Application 

 AngularJS 단일 페이지 어플리케이션(Single Page Application{SPA})을 만들 시간입니다!

1. An AngularJS Application Example









2. Application Explained
myNote.html


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>
 
    <head>
    <script src=
    </head>
 
    <body ng-app="myNoteApp" ng-controller="myNoteCtrl">
 
    <h2>My Note</h2>
 
 
    <textarea ng-model="message" cols="40" rows="10"></textarea>
 
    <p>
    <button ng-click="save()">Save</button>
    <button ng-click="clear()">Clear</button>
    </p>
 
    <p>Number of characters left: <span ng-bind="left()"></span></p>
 
    <script src="myNoteApp.js"></script>
    <script src="myNoteCtrl.js"></script>
 
    </body>
</html>
 
cs






myNoteApp.js


 

1
2
3
 
var app = angular.module("myNoteApp", []);
 
cs




myNoteCtrl.js

 

1
2
3
4
5
6
7
 
app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});
cs



 <html> 요소는 AngularJS 어플리케이션의 컨테이너입니다: ng-app="myNoteApp"


1
<html ng-app="myNoteApp">
cs



 HTML 페이지의 <div>는 제어의 범위입니다: ng-controller="myNoteCtrl" 


 

1
2
<div ng-controller="myNoteCtrl">
 
cs



 ng-model은 <textarea>를 제어 변수 message와 연결합니다:



 

1
2
3
 
<textarea ng-model="message" cols="40" rows="10"></textarea>
 
cs




 두 개의 ng-click 이벤트는 clear()와 save() 제어 함수를 호출합니다.


1
2
3
4
 
<button ng-click="save()">Save</button>
 
<button ng-click="clear()">Clear</button>
cs






 ng-bind는 문자가 몇 개 남았는지 표시하는 <span>에 left() 제어 함수를 연결합니다.


 

1
Number of characters left: <span ng-bind="left()"></span>
cs


 



 어플리케이션 라이브러리를 페이지에 추가합니다:


 

1
2
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
cs





3. AngularJS Application Skeleton
 <html> 요소는 AngularJS 어플리케이션의 컨테이너입니다.

 <div> 요소는 AngularJS 제어의 범위를 선언합니다.

 하나의 어플리케이션에 여러 개의 제어를 가질 수 있습니다.

 어플리케이션 파일은 어플리케이션 모듈 코드를 정의합니다.

 하나 또는 여러 개의 제어 파일은 제어 코드를 정의합니다.




4. Summary - How Does it Work?
 AngularJS 라이브러리는 <head>에서 로드됩니다, 왜냐하면 스크립트는 올바른 컴파일을 위한 라이브러리 코드에 의존적이기 때문입니다.

 ng-app은 어플리케이션의 root 요소에 위치해있습니다.

 단일 페이지 어플리케이션(SPA)를 위해, 어플리케이션의 root는 종종 <html>요소입니다.

 하나 또는 여러 개의 ng-controller는 어플리케이션 제어를 정의 합니다. 각각의 제어는 각각의 범위를 갖습니다: 선언되는 위치의 HTML 요소

 ANgularJS는 HTML DOMContentLoaded 이벤트를 자동적으로 시작합니다. 

 ng-app지시어를 발견하면, AngularJS는 지시어로 명명된 어떠한 모듈들을 로드하고, 어플리케이션의 root로 ng-app을 함께 DOM을 컴파일 합니다.

 어플리케이션의 root는 전체 페이지가 되거나, 페이지의 일부분이 될 수도 있습니다.


 


 


  



 

* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 13.5 API - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 15. Includes - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 14. Bootstrap- Angular JS 강좌  (0) 2016.06.14
[AngularJS] 13. 검사(Validations) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 12. 서식(Forms) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more