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 |
|
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 |
|
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 |
