Angular Todo App 3

Isolate business logic

Next to the previous section, the business logic should be vintage denim in a separate service, we build Todoservice in the Todo folder

Ng G S Todo/todo

　　

Introducing UUID Packages

Todo ID to be unique, one is to use a self-growth sequence, one is a randomly generated set of impossible to repeat a sequence of characters, the common is the UUID

NPM Install--save Angular2-uuid

Installation succeeded:

Modify ID Type

Export class Todo {    id:string;    desc:string;    Completed:boolean;}

　　

Modify Service

Import {injectable} from ' @angular/core ', import {Todo} from './todo.model ', import {UUID} from ' Angular2-uuid '; @Injec Table () Export class Todoservice {  todos:todo[]=[];  Addtodo (todoitem:string): todo[]{let    todo={      id:uuid. UUID (),      Desc:todoitem,      completed:false    };    This.todos.push (TODO);    return this.todos;  }  Constructor () {}}

　　

Component Injection Dependent service

Import {Component, OnInit} from ' @angular/core '; import {Todo} from "./todo.model"; import {Todoservice} from "./todo. Service "; @Component ({  selector: ' App-todo ',  templateurl: './todo.component.html ',  styleurls: ['./ Todo.component.css '],  Providers:[todoservice]}) Export class Todocomponent implements OnInit {  todos:todo[]= [];  Desc= ";  Addtodo () {    This.todos=this.service.addtodo (THIS.DESC);    This.desc= ';  }  Constructor (private Service:todoservice) {}  Ngoninit () {  }}

　　

Install plug-ins (optional)

To see the results clearly, we installed a plugin for Chrome, and entered in the Chrome address bar

chrome://extensions/

　　

Download a "Angury" plugin to install, then press F12 to bring up the developer tool with a Angury tab

Ok!

Angular Todo App 3