4-3.Angular 入門教學 - 將商業邏輯的部分獨立成一支Service

影片講解

那這一篇我們就進一步的將todo專案商業邏輯的部分切成另一支Service

不過這部分就比較見仁見智了，有沒有需要切出去就看自己的專案情境

部份情況可以不用切，因為真的沒必要再多一個檔案

但有時候真的就需要切出來，而這邊先示範一次切出來的感覺給大家看看

首先，先在建立一個service

ng g s todo

接著我們將覺得是商業邏輯的部分搬過去todo.service.ts

export class TodoService {
  toggleAllBtn = false;
  nowTodoStatusType = TodoStatusType.All;
  todoDataList: Todo[] = [];

  get nowTodoList() {
    let list: Todo[] = [];

    switch (this.nowTodoStatusType) {
      case TodoStatusType.Active:
        list = this.todoActive;
        break;
      case TodoStatusType.Completed:
        list = this.todoCompleted;
        break;
      default:
        list = this.todoDataList;
        break;
    }

    return list;
  }

  get todoActive(): Todo[] {
    return this.todoDataList.filter(data => !data.Status);
  }

  get todoCompleted(): Todo[] {
    return this.todoDataList.filter(data => data.Status);
  }

  constructor(private todoApiService: TodoApiService) {
    this.getData();
  }

  getData() {
    this.todoApiService.取得列表().subscribe(data => {
      this.todoDataList = data;
      this.todoDataList.forEach(data2 => {
        data2.CanEdit = true;
        data2.Editing = false;
      });
      this.checkToggleAllBtn();
    });
  }

  checkToggleAllBtn() {
    if (this.todoCompleted.length === this.todoDataList.length) {
      this.toggleAllBtn = true;
    } else {
      this.toggleAllBtn = false;
    }
  }

  add(value: string) {
    const seqno = new Date().getTime();
    const todo: Todo = new TodoClass(value, false, seqno);
    this.todoDataList.push(todo);
    this.todoApiService.新增(todo).subscribe(data => {
      this.todoDataList.forEach(data2 => {
        if (data2.Seqno === seqno) {
          data2.TodoId = data.TodoId;
          data2.CanEdit = true;
        }
      })
    });
  }

  toggleAll() {
    this.toggleAllBtn = !this.toggleAllBtn;
    this.todoDataList.forEach(data => {
      data.Status = this.toggleAllBtn;
    });

    this.todoApiService.統一全部狀態(this.toggleAllBtn).subscribe();
  }

  clickCheck(item: Todo) {
    item.Status = !item.Status;

    this.todoApiService.修改(item).subscribe();
    this.checkToggleAllBtn();
  }

  delete(item: Todo) {
    this.todoApiService.刪除(item).subscribe();
    this.todoDataList = this.todoDataList.filter(data => data !== item);
  }

  update(item: Todo) {
    this.todoApiService.修改(item).subscribe();
    item.Editing = false;
  }

  clearCompleted() {
    this.todoApiService.刪除完成的代辦事項().subscribe();
    this.todoDataList = this.todoActive;
  }

}

以上就是搬過來的樣子，那通常變數的部分我們會放在constructor()上面

constructor()下面則是放方法

接著我們再進行app.component.ts改寫

export class AppComponent implements OnInit {
  title = 'OneTodo';
  todoInputModel = '';
  TodoStatusType = TodoStatusType;

  get toggleAllBtn() {
    return this.todoService.toggleAllBtn;
  };
  get nowTodoList() {
    return this.todoService.nowTodoList;
  }

  get nowTodoStatusType() {
    return this.todoService.nowTodoStatusType;
  }

  get todoActive(): Todo[] {
    return this.todoService.todoActive;
  }

  get todoCompleted(): Todo[] {
    return this.todoService.todoCompleted;
  }

  constructor(private todoService: TodoService) { }

  ngOnInit(): void {
  }

  setTodoStatusType(type: number) {
    this.todoService.nowTodoStatusType = type;
  }

  add() {
    this.todoService.add(this.todoInputModel);
    this.todoInputModel = '';
  }
  
  update(item: Todo) {
    this.todoService.update(item);
  }
  
  delete(item: Todo) {
    this.todoService.delete(item);
  }

  clickCheck(item: Todo) {
    this.todoService.clickCheck(item);
  }

  toggleAll() {
    this.todoService.toggleAll();
  }

  clearCompleted() {
    this.todoService.clearCompleted();
  }

  edit(item: Todo) {
    if (item.CanEdit) {
      item.Editing = true;
    }
  }

}

改寫完後會發現這邊變得很乾淨，只剩下方法跟一些畫面的變數及控制邏輯

處理資料的部分都留給todo.service.ts做

這邊就有點像一個目錄入口，進來後再分別對應要執行哪一個TodoService的哪一個方法

那未來如果要修改畫面相關的東西，就到component這邊來改

那要改處理程序的話就去service改

也算是把程式不同的職責切開來，日後維護的架構會比較清楚

不過其實還有一個更重要的因素非這樣切開不可，下一個元件章節就會示範到

到時候再來看看囉

那文章很難表達每一個步驟，所以想看整個操作流程，可以看影片

範例檔：下載