<div id="readability-page-1" class="page"><div id="SEDOC-1492248126231--964634271_code_3">
                        <p>angular.module('todo').controller('TodoCtrl', ['$scope', function($scope) {
    $scope.todos = [
        {
        title : 'training 1',
        complete : false,
        createdAt: Date.now()
      },
        {
        title : 'training 2',
        complete : true,
        createdAt: Date.now()
      },
        {
        title : 'training 3',
        complete : false,
        createdAt: Date.now()
      }
    ];

    $scope.remove = function() {
      alert("test");        
    };
    
    $scope.add = function(newtodo){
      var newitem = {
        title : newtodo,
        complete : false,
        createAt : Date.now()
      }
      
      $scope.todos.push(newitem);
      
      $scope.newTodoTitle = ""; // form input field clear
    }
    

}]);</p>
                    </div></div>

끄적끄적 창고

1. << index.html >> : <custom-tag> </custom-tag> 의 형태로 사용 2. << app.js >> : html <body ng-app="todo ng-controller="TodoCtrl"> 있는 모듈을 선언한다.3. <directive.js> : html에서 사용된 <todo-title> 에 대한 directive를 선언한다. directive 내부에서 template은 문자열을 지정하 고 templateUrl은 파일을 지정한다. ★ html에서 <todo-title> 로 된것을 "-"(대시문자)없애고 Capitalize처리한다.=> todoTitle4. controller.js : cotroller 참고 소스

angular에서 html을 directive를 이용하여 분리 처리 예제

댓글