[마소] 2013.05 Angular.JS 의 구조와 특징
예제를 로컬에 구현해 보았다.
여러번 해본 것이지만 예제 나온김에 한번 더.
angular.js 파일은 받아두어야 한다.
기본적으로 일단 <html> 태그에 ng-app 를 입력해주어야 한다.
<body>에는 ng-controller 를 입력해주어야 한다.
반복문은 반복하려는 구문에 ng-repeat 를 입력해주면 해당 데이터 배열 갯수만큼 반복된다.
$scope로 데이터를 전달한다.
데이터 출력은 "{{데이터}}"의 형식으로 된다.
모델은 $scope의 속성값이다. (todoList)
뷰는 DOM, 보이는 템플릿 자체가 뷰인 셈이다.
컨트롤러는 자바스크립트 함수로, $scope를 argument로 가지고 있다.
※ Angular.JS 에서 사용하는 지시문
|
ng-app |
Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags. |
|
ng-bind |
Automatically changes the text of a HTML element to the value of a given expression. |
|
ng-model |
Similar to ng-bind, but allows two-way data binding between the view and the scope. |
|
ng-class |
Allows class attributes to be dynamically loaded. |
|
ng-controller |
Specifies a JavaScript controller class that evaluates HTML expressions. |
|
ng-repeat |
Instantiate an element once per item from a collection. |
|
ng-show & ng-hide |
Instantiate an element once per item from a collection. |
|
ng-switch |
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. |
|
ng-view |
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. |
※ Model–view–controller (MVC)
|
Model > JS Objects |
|
View > DOM |
|
Controller > JS Function |
※ Template, Model, View 방식으로 구현된다.
(참고 : http://docs.angularjs.org/#!/tutorial/step_04)
※ 예제 구현 화면
※ 소스 화면 (Sublime Text 2)
.
'프로그래밍 > Web' 카테고리의 다른 글
| Codeblock.js— A better code learning environment (0) | 2013.06.20 |
|---|---|
| PreloadJS (0) | 2013.06.20 |
| Text editor -텍스트에디터 : Brackets (0) | 2013.06.13 |
| Text editor - 텍스트 에디터 : Sublime with TrailingSpaces (0) | 2013.06.13 |
| ICEcoder — In-browser code editor (0) | 2013.06.04 |