Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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] 1. 소개(Introduction) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 1. 소개(Introduction) - Angular JS 강좌

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

AngularJS Introduction

 AngularJS는 자바스크립트 프레임워크(JavaScript Framework) 입니다. HTML 페이지에 <script> 태그를 추가하여 사용가능 합니다.


 AngularJS는 Directives를 붙인 HTML 요소의 확장입니다. Expressions HTML로 데이터를 연결 할 수 있습니다.




1. AngularJS is a JavaScript Framework

 AngularJS는 자바스크립트 파일로서 분배되고, 웹페이지의 script 태그에 추가하여 사용가능 합니다.


 

1
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
cs



2. AngularJS Extends HTML

 AngularJS는 ng-directives HTML의 확장입니다. 


 ng-app directive는 AngularJS 어플리케이션을 정의합니다.


 ng-model directive는 어플리케이션 데이터를 제어(input, select, textarea)하는 HTML 값을 연결합니다.


 ng-bind directive는 어플리케이션 데이터를 HTML 뷰에 연결합니다.




예제: 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<div ng-app="">
     <p>Name: <input type="text" ng-model="name"></p>
     <p ng-bind="name"></p>
</div>
 
</body>
</html>
cs







 AngularJS는 웹페이지가 로드될 때, 자동으로 시작됩니다.

 ng-app directive는 <div>요소가 AngularJS 어플리케이션의 주인임을 AngularJS에게 알려줍니다.

 ng-model은 어플리케이션 변수 name이 입력 필드의 값임을 연결합니다.

 ng-bind는 어플리케이션 변수 name의 <p> 요소의 innerHTML을 연결합니다.



3. AngularJS Directives
 위에서 보셨듯이, AngularJS directive는 ng 접두사를 통하여 HTML 요소를 나타냅니다.

 ng-init은 AngularJS 어플리케이션 변수를 초기화 합니다.




1
2
3
4
5
<div ng-app="" ng-init="firstName='John'">
 
<p>The name is <span ng-bind="firstName"></span></p>
 
</div>
cs



 * ng- 대신, data-ng- 를 사용하세요. HTML 5에서도 적용을 원하신다면.



 HTML5 적용 대체 예제:


1
2
3
4
5
<div data-ng-app="" data-ng-init="firstName='John'">
 
<p>The name is <span data-ng-bind="firstName"></span></p>
 
</div>
cs




4. AngularJS Expressions
 AngularJS 식은 이중 괄호안에 작성되어 집니다: {{ expression }}
 
 AngularJS 식은 ng-bind와 마찬가지의 방법으로 데이터를 HTML에 연결합니다.

 ANgularJS는 식이 작성된 곳에 정확한 데이터를 출력하게 될 것 입니다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
 
    <div ng-app="">
        <p>My first expression: {{ 5 + 5 }}</p>
    </div>
 
    </body>
</html>
cs







 

5. AngularJS Applications

 AngularJS 모듈(Module)은 AngularJS 어플리케이션을 정의합니다. 


 AngularJS 컨트롤러(Controllers)는 AngularJS 어플리케이션을 제어합니다.


 ng-app 지시자는 어플리케이션을 정의하고, ng-controller 지시자는 제어부(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
26
27
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<p>Try to change the names.</p>
 
<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















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

728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 4. 제어(controller) - 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  (0) 2016.06.14
'AngularJS_1' Related Articles more