Share
În prima parte a seriei tutorial, ați creat interfața de utilizator și navigarea pentru aplicația manager de activități. În acest tutorial, veți vedea cum să implementați funcționalitatea pentru aplicația Ionic task manager pentru a adăuga și a lista sarcinile.
Să începem prin clonarea codului sursă din prima parte a seriei tutorial.
git clone https://github.com/royagasthyan/IonicTaskManager-Part1
Navigați la directorul proiectului și instalați dependențele necesare.
cd IonicTaskManager-Partea 1 npm instalare
Rulați aplicația din directorul de proiect.
ionice
Ar trebui să aveți aplicația care rulează la http: // localhost: 8100 /.
Ați creat deja Adăuga componentă și Listă componente pentru a adăuga sarcini și pentru a specifica sarcini. Pentru a le face să funcționeze în sincronizare, trebuie să mențineți comunicarea între cele două componente. Pentru a comunica între componente, veți folosi un dispozitiv injectabil CommonService.
Creați un dosar numit serviciu în src / pagini pliant.
Creați un fișier de serviciu numit common.service.ts și adăugați următorul cod:
import Injectable de la '@ angular / core'; @Injectable () clasa de export CommonService constructor () this.tasks = []
Veți urmări lista de sarcini în serviciul comun și va fi împărțită între Adăuga și Listă componente.
Definiți o variabilă numită sarcini în common.service.ts fişier. Veți păstra lista de sarcini în acest sens sarcini mulțime.
import Injectable de la '@ angular / core'; @Injectable () clasa de export CommonService public tasks: any; constructor () this.tasks = []
Creați un dosar numit sarcină în interiorul src / pagini pliant. Creați un fișier numit task.model.ts și adăugați următorul cod:
clasa de export Task constructor (Id public: Număr, public Nume: String, public IsDone: Boolean)
Veți folosi cele de mai sus Sarcină pentru a crea o instanță a unei noi sarcini.
Când utilizatorul face clic pe butonul Adăugare sarcină din Adăuga , veți adăuga elemente în sarcini variabilă în common.service.ts fişier. Deci, creați o metodă numită addTask în common.service.ts fișier, pe care îl veți apela de la Adăuga component.
import Injectable de la '@ angular / core'; import Task de la "... /model/task.model" @Injectable () clasa de export CommonService public tasks: any; constructor () this.tasks = [] addTask (item) this.tasks.push (noua sarcină ((new Date ()) getTime (), item, false));
Pentru a adăuga o sarcină la lista de sarcini, trebuie să importați common.service.ts fișier în interiorul Adauga pagina component.
import CommonService de la "... /service/common.service"
Inițializați CommonService în interiorul Adauga pagina constructor de componente.
constructor (public viewCtrl: ViewController, private commonService: CommonService)
În interiorul Adauga pagina componentă, creați o metodă numită adăuga unde veți adăuga sarcina la serviciul comun sarcini listă.
Iată cum adăuga metodă în Adauga pagina componentă arată:
adăugați () this.commonService.addTask (this.item); this.dismiss ();
După cum se vede în metoda de mai sus, ați sunat addTask metoda de la serviciul comun pentru a adăuga o sarcină la sarcini listă.
Odată ce elementul este adăugat, ați sunat destitui pentru a elimina suprapunerea pop-up. Iată cum add.component.ts file looks:
import Component de la '@ angular / core'; import ViewController de la "ionic-unghiular"; import CommonService de la "... /service/common.service" @Component (selector: 'page-add', templateUrl: 'add.component.html') clasa de export AddPage public tasks: any = []; element public: String; constructor (public viewCtrl: ViewController, private commonService: CommonService) dismiss () this.viewCtrl.dismiss (); adăugați () this.commonService.addTask (this.item); this.dismiss ();
În add.component.html pagina, adăugați ngModel directivă la elementul de intrare.
Adăugați evenimentul clic pe butonul din add.component.html pentru a declanșa adăuga în interiorul metodei add.component.ts.
Salvați modificările de mai sus și încercați să reporniți serverul ionic. Navigați adresa URL a browserului la http: // localhost: 8100 și ar trebui să puteți vizualiza aplicația mobilă în browser.
Faceți clic pe pictograma Adăugați pentru a adăuga o sarcină. Introduceți numele sarcinii și faceți clic pe butonul de adăugare. Pop-up-ul ar trebui să dispară.
Odată ce sarcina este adăugată în lista de sarcini, trebuie să actualizați vizualizarea în consecință. Deci, pentru a urmări sarcina atunci când este adăugată la listă, va trebui să utilizați unghiular Subiect.
Definiți un subiect numit task_subject în interiorul common.service.ts fişier.
public task_subject = Subiect nou()
Când se adaugă sarcina la sarcini listă, trebuie să declanșați subiectul task_subject pentru a informa abonatul că sa adăugat o sarcină.
Modificați addTask în interiorul metodei common.service.ts fișier pentru a include următorul cod:
this.task_subject.next ();
Aici este modificat addTask metodă:
addTask (item) this.tasks.push (noua sarcină ((new Date ()). getTime (), item, false)); this.task_subject.next ();
Abonați-vă la subiect task_subject în interiorul list.component.ts fişier.
constructor (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (răspuns => this.tasks = this.commonService.tasks
Ori de câte ori se adaugă o nouă sarcină sarcini de la commonService este atribuit sarcini în list.component.html iar vizualizarea este actualizată.
Iată cum list.component.ts codul arată:
import Component de la '@ angular / core'; import ModalController de la "ionic-unghiular"; importați AddPage din "... /add/add.component"; import CommonService de la "... /service/common.service" @Component (selector: 'page-list', templateUrl:'list.component.html ') class ListPage public tasks = []; constructor (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (răspuns => this.tasks = this.commonService.tasks presentAddModal () addmodal = this.modalCtrl.create (Adauga pagina); addModal.present ();
Modificați list.component.html pentru a itera peste sarcini variabilă de la list.component.ts fişier. Iată cum arată:
Item.Name
Salvați modificările de mai sus și reporniți serverul. Încercați să adăugați o nouă sarcină și va fi afișată pe ecranul listei.
Acum, să implementăm funcționalitatea pentru a marca sarcinile finalizate. De fiecare dată când se adaugă o nouă sarcină, adăugați un Este gata atributul ca fals.
Să păstrăm două matrice diferite pentru sarcini în așteptare și sarcini finalizate.
publice pendingTasks = [] publice doneTasks = []
De fiecare dată când se adaugă o nouă sarcină, veți actualiza cele două tablouri de mai sus așa cum se arată:
constructor (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (răspuns => this.pendingTasks = this.commonService.tasks.filter (item => return item.IsDone == false) ; this.doneTasks = this.commonService.tasks.filter (item => return item.IsDone == true);
Când utilizatorul face clic pe caseta de validare, trebuie să comutați Este gata stare. Adăugați o metodă numită checkPendingItem pentru a comuta Este gata pentru sarcinile în așteptare.
checkPendingItem (id) this.pendingTasks.map ((task) => if (task.Id == id) if (task.IsDone) task.IsDone = false; else task.IsDone = true; ) this.updateTask ()
În mod similar, adăugați o altă metodă numită checkDoneItem pentru a comuta starea sarcinii pentru articolele terminate. Iată cum arată metoda:
checkDoneItem (id) this.doneTasks.map ((sarcina) => if (task.Id == id) if (task.IsDone) task.IsDone = false; altceva task.IsDone = true; ) this.updateTask ()
Odata ce Este gata starea este schimbată, trebuie să actualizați sarcinile. Definiți o metodă numită updateTask, care este numit după Este gata comutați în ambele metode de mai sus.
updateTask () this.pendingTasks = this.commonService.tasks.filter (item => return item.IsDone == false); this.doneTasks = this.commonService.tasks.filter (item => return item.IsDone == true);
Modificați list.component.html pentru a afișa codul pendingTasks și doneTasks separat. Iată cum a fost modificat list.component.html file looks:
Ionic Task Manager Sarcinile mele Item.Name Sarcini arhivate Item.Name
Salvați modificările de mai sus și reporniți serverul ionic. Ar trebui să aveți aplicația rulată la adresa http: // localhost: 8100.
În acest tutorial, ați văzut cum să implementați funcția de adăugare și listare a sarcinilor din aplicația mobilă manager de activități Ionic. Ați văzut cum să utilizați un serviciu Angular pentru a partaja date între două componente. În acest tutorial, ați folosit serviciul Angular pentru a păstra datele într-o listă comună atunci când ați fost adăugat din componenta Adăugare și l-ați afișat în componenta Listă.
Spuneți-ne gândurile dvs. în comentariile de mai jos.
Codul sursă din acest tutorial este disponibil pe GitHub.
Accentsconagua