* ALL COPYRIGHTS are at w3schools. This article's purpose is only for study. *
AngularJS Introduction
AngularJS 는 Javascript framework 이다. <script> 태그를 통해 사용할 수 있다.
AngularJS is a JavaScript Framework
AngularJS 는 Javascript의 framework이므로 라이브러리는 Javascript로 작성됐다.
Javascript 파일로 배포되며 아래와 같이 script 태그를 통해 사용할 수 있다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS Extends HTML
ng-app 는 AngularJS application 을 의미한다.
ng-model 은 INPUT, SELECT, TEXTAREA 등과 같은 HTML Control 들을 application data와 bind 시킨다.
ng-bind 은 application data 와 HTML view 를 bind 시킨다.
AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
예제 설명:
AngularJS 는 웹 페이지가 로드될 때 자동으로 시작된다.
ng-app 는 AngularJS 에게 <div> 가 AngularJS 소속이라는 것을 알려준다.
ng-model 은 input 필드의 값을 변수 이름에 bind 시켜준다.
ng-bind 은 innerHTML binding 된 데이터를 HTML로 보여준다.
AngularJS Directives
보다시피 AngularJS 는 HTML 요소들을 ng 라는 prefix를 붙여서 표현한다.
ng-init 은 변수를 초기화시킨다.
AngularJS Example
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>Alternatively with valid HTML:
AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>원한다면 ng- 대신 data-ng- 도 사용가능하다.
다음장에서 자세히 배워보자.
AngularJS Expressions
AngularJS 의 표현은 다음과 같다. {{ expression }}.
AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 표현은 AngularJS data 를 HTML 로 바인딩시킨다. (ng-bind 와 같음)
AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
AngularJS Applications
AngularJS modules 은 AngularJS applications을 정의한다.
AngularJS controllers 은 AngularJS applications을 컨트롤한다.
ng-app 은 application 을 정의하며, ng-controller 은 controller 를 정의한다.
AngularJS Example
<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>AngularJS modules 은 applications 을 정의한다:
AngularJS Module
var app = angular.module('myApp', []);AngularJS controllers 는 applications 을 컨트롤한다:
AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});'Coding > HTML' 카테고리의 다른 글
| 동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법 (0) | 2017.04.06 |
|---|---|
| Jquery empty() / remove() / detach() 차이점 (0) | 2017.04.05 |
| [W3Schools AngularJS 한글강좌] Directives (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Modules (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Expressions (0) | 2017.01.16 |
