반응형

[마소] 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) 

 

.

반응형

+ Recent posts