본문 바로가기
Angular/angularjs

angular directive (모듈화)

dhsdb1541@naver.com 2020. 5. 20.

app.directive를 활용하면 템플릿들의 내용들을 js단으로 빼서 활용하거나 다른 html파일을 링크하는등

컴포넌트화 시킬수 있다.

 

js파일내 컴포넌트화 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="style.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="todo" ng-controller="TodoCtrl">
    <!-- <h1>Todo List</h1> -->
    <todo-title></todo-title>

    <div class="container">
      <form name="todoForm" ng-submit="add(newTodoTitle)">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            ng-model="newTodoTitle"
            placeholder="새로운  todo를 입력하세요"
            minlength="3"
          />
          <span class="input-group-btn">
            <button class="btn btn-success" type="submit">추가</button>
          </span>
        </div>
        <div ng-show="todoForm.$dirty && todoForm.$invalid">
          <div class="alert alert-warning" role="alert">
            3글자 이상 입력하세요.
          </div>
        </div>
      </form>
      {{todoForm}}
      <ul class="list-unstyled">
        <!-- ng-repeat=(변수, 인덱스) in $scope의 데이터 -->
        <li ng-repeat="todo in todos | filter:statusFilter">
          <todo-item></todo-item>
          <!-- <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="todo.completed" />
            </span>
            <input type="text" class="form-control" ng-model="todo.title" />
            <span class="input-group-btn">
              <button
                ng-click="deleteClick(todo)"
                class="btn btn-danger"
                type="button"
              >
                삭제
              </button>
            </span>
          </div> -->
          <div>
            <date>{{todo.createdAt | date}}</date>
          </div>
          <date>{{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}}</date>
        </li>
      </ul>

      <button class="btn btn-primary" ng-click="statusFilter={completed:true}">
        Completed
      </button>
      <button class="btn btn-primary" ng-click="statusFilter={completed:false}">
        Active
      </button>
      <button class="btn btn-primary" ng-click="statusFilter={}">All</button>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

 

 

//모듈: 컨테이너
//모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다
(function () {
  // app이라는 변수에 todo라는 모듈이 담긴다
  var app = angular.module("todo", []);

  //두번째 파라미터는 배열로준다
  app.controller("TodoCtrl", [
    "$scope",
    function ($scope) {
      // $scope.name = "Chris";
      // $scope.data = "aa";
      $scope.todos = [
        {
          title: "요가 수행",
          completed: false,
          createdAt: Date.now(),
        },
        {
          title: "앵귤러 학습",
          completed: true,
          createdAt: Date.now(),
        },
        {
          title: "운동하기",
          completed: false,
          createdAt: Date.now(),
        },
      ];
      $scope.deleteClick = function (todo) {
        console.log(todo);
        //find todo index in todos

        // $scope.todos = $scope.todos.filter((li) => li !== todo);
        var idx = $scope.todos.findIndex(function (item) {
          return item.id === todo.id;
        });
        //remove from todos
        if (idx > -1) {
          $scope.todos.splice(idx, 1);
        }
      };
      $scope.add = function (newTodoTitle) {
        console.log(newTodoTitle);
        var newTodo = {
          title: newTodoTitle,
          completed: false,
          createdAt: Date.now(),
        };
        $scope.todos.push(newTodo);
        console.log($scope.todos);

        //empty form
        $scope.newTodoTitle = "";
      };
    },
  ]);
  // js에서는 camelCase
  // html에서는 -를 붙인다
  app.directive("todoTitle", function () {
    return {
      template: "<h1>todo title</h1>",
    };
  });
  app.directive("todoItem", function () {
    return {
      // templateUrl:"todoItem.tpl.html",
      template: `<div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="todo.completed" />
            </span>
            <input type="text" class="form-control" ng-model="todo.title" />
            <span class="input-group-btn">
              <button
                ng-click="deleteClick(todo)"
                class="btn btn-danger"
                type="button"
              >
                삭제
              </button>
            </span>
          </div>`,
    };
  });
})();

 

 

html 파일로 빼기 

 

templateUrl을 통해 새로 html파일을 사용해서 템플릿 화 시킬수 있다.

 

script.js

app.directive("todoItem", function () {
    return {
      templateUrl: "todoItem.tpl.html",
      // template: `<div class="input-group">
      //       <span class="input-group-addon">
      //         <input type="checkbox" ng-model="todo.completed" />
      //       </span>
      //       <input type="text" class="form-control" ng-model="todo.title" />
      //       <span class="input-group-btn">
      //         <button
      //           ng-click="deleteClick(todo)"
      //           class="btn btn-danger"
      //           type="button"
      //         >
      //           삭제
      //         </button>
      //       </span>
      //     </div>`,
    };
  });

 

 

todoItem.tpl.html

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" ng-model="todo.completed" />
  </span>
  <input type="text" class="form-control" ng-model="todo.title" />
  <span class="input-group-btn">
    <button ng-click="deleteClick(todo)" class="btn btn-danger" type="button">
      삭제
    </button>
  </span>
</div>
<div>
  <date>{{todo.createdAt | date}}</date>
</div>
<date>{{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}}</date>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

혹은 아에 directives.js파일을만들어 분리해서 관리한다 

 

body하단부분에서 directives.js 파일을 관리해준다 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="style.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="todo" ng-controller="TodoCtrl">
    <!-- <h1>Todo List</h1> -->
    <todo-title></todo-title>

    <div class="container">
      <form name="todoForm" ng-submit="add(newTodoTitle)">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            ng-model="newTodoTitle"
            placeholder="새로운  todo를 입력하세요"
            minlength="3"
          />
          <span class="input-group-btn">
            <button class="btn btn-success" type="submit">추가</button>
          </span>
        </div>
        <div ng-show="todoForm.$dirty && todoForm.$invalid">
          <div class="alert alert-warning" role="alert">
            3글자 이상 입력하세요.
          </div>
        </div>
      </form>
      {{todoForm}}
      <ul class="list-unstyled">
        <!-- ng-repeat=(변수, 인덱스) in $scope의 데이터 -->
        <li ng-repeat="todo in todos | filter:statusFilter">
          <todo-item></todo-item>
          <!-- <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" ng-model="todo.completed" />
            </span>
            <input type="text" class="form-control" ng-model="todo.title" />
            <span class="input-group-btn">
              <button
                ng-click="deleteClick(todo)"
                class="btn btn-danger"
                type="button"
              >
                삭제
              </button>
            </span>
          </div> -->
        </li>
      </ul>

      <button class="btn btn-primary" ng-click="statusFilter={completed:true}">
        Completed
      </button>
      <button class="btn btn-primary" ng-click="statusFilter={completed:false}">
        Active
      </button>
      <button class="btn btn-primary" ng-click="statusFilter={}">All</button>
    </div>
    <script src="./script.js"></script>
    <script src="./directives.js"></script>
  </body>
</html>

 

 

script.js

 

//모듈: 컨테이너
//모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다
(function () {
  // app이라는 변수에 todo라는 모듈이 담긴다
  var app = angular.module("todo", []);

  //두번째 파라미터는 배열로준다
  app.controller("TodoCtrl", [
    "$scope",
    function ($scope) {
      // $scope.name = "Chris";
      // $scope.data = "aa";
      $scope.todos = [
        {
          title: "요가 수행",
          completed: false,
          createdAt: Date.now(),
        },
        {
          title: "앵귤러 학습",
          completed: true,
          createdAt: Date.now(),
        },
        {
          title: "운동하기",
          completed: false,
          createdAt: Date.now(),
        },
      ];
      $scope.deleteClick = function (todo) {
        console.log(todo);
        //find todo index in todos

        // $scope.todos = $scope.todos.filter((li) => li !== todo);
        var idx = $scope.todos.findIndex(function (item) {
          return item.id === todo.id;
        });
        //remove from todos
        if (idx > -1) {
          $scope.todos.splice(idx, 1);
        }
      };
      $scope.add = function (newTodoTitle) {
        console.log(newTodoTitle);
        var newTodo = {
          title: newTodoTitle,
          completed: false,
          createdAt: Date.now(),
        };
        $scope.todos.push(newTodo);
        console.log($scope.todos);

        //empty form
        $scope.newTodoTitle = "";
      };
    },
  ]);
  // js에서는 camelCase
  // html에서는 -를 붙인다
  // app.directive("todoTitle", function () {
  //   return {
  //     template: "<h1>todo title</h1>",
  //   };
  // });
  // app.directive("todoItem", function () {
  //   return {
  //     templateUrl: "todoItem.tpl.html",
  //     // template: `<div class="input-group">
  //     //       <span class="input-group-addon">
  //     //         <input type="checkbox" ng-model="todo.completed" />
  //     //       </span>
  //     //       <input type="text" class="form-control" ng-model="todo.title" />
  //     //       <span class="input-group-btn">
  //     //         <button
  //     //           ng-click="deleteClick(todo)"
  //     //           class="btn btn-danger"
  //     //           type="button"
  //     //         >
  //     //           삭제
  //     //         </button>
  //     //       </span>
  //     //     </div>`,
  //   };
  // });
})();

 

script.js에서 선언한 module (todo)

 

angular.module을 활용해서 모듈화한다.

 

directives.js

angular.module("todo").directive("todoTitle", function () {
  return {
    template: "<h1>todo title</h1>",
  };
});
angular.module("todo").directive("todoItem", function () {
  return {
    templateUrl: "todoItem.tpl.html",
    // template: `<div class="input-group">
    //       <span class="input-group-addon">
    //         <input type="checkbox" ng-model="todo.completed" />
    //       </span>
    //       <input type="text" class="form-control" ng-model="todo.title" />
    //       <span class="input-group-btn">
    //         <button
    //           ng-click="deleteClick(todo)"
    //           class="btn btn-danger"
    //           type="button"
    //         >
    //           삭제
    //         </button>
    //       </span>
    //     </div>`,
  };
});

 

저작자표시

'Angular > angularjs' 카테고리의 다른 글

angular service(factory)  (0) 2020.05.22
angular form (유효성 검증)  (0) 2020.05.20
ng-repeat, ng-filter, ng-click  (0) 2020.05.20
ng-app, controller  (0) 2020.05.20

'Angular/angularjs' 관련글

티스토리툴바