Angular JS 용어 정리

• Html
• JavaScript
• CSS

<div ng-controller="TodoCtrl">

    <span>{{remaining()}} of {{todos.length}} remaining</span>

    [ <a href="" ng-click="archive()">archive</a> ]

    <ul class="unstyled">

        <li ng-repeat="todo in todos">

            <input type="checkbox" ng-model="todo.done">

            <span class="done-{{todo.done}}">{{todo.text}}</span>

        </li>

    </ul>

    <form ng-submit="addTodo()">

        <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here">

        <input class="btn-primary" type="submit" value="add">

    </form>

</div>

function TodoCtrl($scope) {

    $scope.todos = [

        {text:'learn angular', done:true},

        {text:'build an angular app', done:false}

    ];

    $scope.addTodo = function() {

        $scope.todos.push({text:$scope.todoText, done:false});

        $scope.todoText = '';

    };

    $scope.remaining = function() {

        var count = 0;

        angular.forEach($scope.todos, function(todo) {

            count += todo.done ? 0 : 1;

        });

        return count;

    };

    $scope.archive = function() {

        var oldTodos = $scope.todos;

        $scope.todos = [];

        angular.forEach(oldTodos, function(todo) {

            if (!todo.done) $scope.todos.push(todo);

        });

    };

}

.done-true {

    text-decoration: line-through;

    color: grey;

}

해당 글은 angular js 에서 예제를 갖고 왔다

여기서 angular의 기본 문법을 보자

1.ng-controller:컨트롤러 선언
  ng-click:클릭하면 동작
<div ng-controller="TodoCtrl">
    이 안에 있는 Angular 엘리먼트들은 스크립트에서 "TodoCtrl"로
    선언한 메소드를 컨트롤러로 사용하겠다고 선언을 한것이다.
</div>

2.ng-repeat:모델 선언
<li ng-repeat="todo in todos">
    todo라는 js안에서 todos라는 json형태의 내용들을 사용할 수 있게 된다.
    <input type="checkbox" ng-model="todo.done">
    ng-model 이것은 todos안에 있는 done이라는 변수를 사용하게 되는 것이다.
<li>

3.ng-submit:submit으로 동작
<form ng-submit="addTodo()">
    <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
    여기서 중요한건 angularJS에서는 submit으로 js로 넘겨서 ng-model todos의 모델을 사용함으로
    모델을 "todoText"로 모델로 선언해둔 곳을 통하여 addTodo로 보내서 하나씩 추가하게 되는 방식이다.
</form>


이 글만 보더라고 Angular JS자체에서 MVC패턴을 사용할 수 있다는 큰 장점을 볼 수 있을것이다.

앞으로 계속 써봐야 알겠지만 이 프레임워크를 통하여 script의 MVC패턴을 간결하게 표현할 수 있다는거에 신기하면서

앞으로 익숙해진다면 유지보수에서 보기 편하고(단 Angular JS를 알고있는 사람한에서) 파워풀한 소스가 될 것 같다.


실 작동(reality work) URL[http://jsfiddle.net/Kwangheum/8vDMT/1/]