angular service(factory)

controller에 있는 데이터를 관리하는 함수및 로직들을 

service로 빼서 사용할수 있다 (Spring의 MVC 패턴과 굉장히 유사한듯싶다)

 

컨트롤러 로직을 간단하게 만들어서 가독성을 높여주는 장점이 있다.

 

services.js 

// service
// factory
// provider

//첫번째인자: 서비스의 이름, 두번째 실행내용
angular.module("todo").factory("todoStorage", function () {
  var storage = {
    todos: [
      {
        title: "요가 수행",
        completed: false,
        createdAt: Date.now(),
      },
      {
        title: "앵귤러 학습",
        completed: true,
        createdAt: Date.now(),
      },
      {
        title: "운동하기",
        completed: false,
        createdAt: Date.now(),
      },
    ],
    get: function () {
      return storage.todos;
    },
    remove: function (todo) {
      console.log(todo);
      //find todo index in todos

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

      //empty form
      // storage.newTodoTitle = "";
    },
  };
  return storage;
});

 

해당 생성한 데이터 관리 모듈을 

$scope와 todoStorage를 의존성 주입해서 대입시켜준다

 

 

//scope변수 의존성주입
//service 의존성 주입
angular.module("todo").controller("TodoCtrl", function ($scope, todoStorage) {
  $scope.todos = todoStorage.get();
  // $scope.todos = [
  //   {
  //     title: "요가 수행",
  //     completed: false,
  //     createdAt: Date.now(),
  //   },
  //   {
  //     title: "앵귤러 학습",
  //     completed: true,
  //     createdAt: Date.now(),
  //   },
  //   {
  //     title: "운동하기",
  //     completed: false,
  //     createdAt: Date.now(),
  //   },
  // ];
  $scope.deleteClick = function (todo) {
    todoStorage.remove(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) {
    todoStorage.add(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 = "";
  };
});