Share
Dans la première partie de la série de didacticiels, vous avez créé l'interface utilisateur et la navigation pour l'application du gestionnaire de tâches. Dans ce tutoriel, vous verrez comment implémenter la fonctionnalité permettant à l'application Ionic Task Manager d'ajouter et de répertorier des tâches..
Commençons par cloner le code source de la première partie de la série de tutoriels..
clone de git https://github.com/royagasthyan/IonicTaskManager-Part1
Accédez au répertoire du projet et installez les dépendances requises.
cd IonicTaskManager-Part1 npm install
Exécutez votre application à partir du répertoire du projet..
service ionique
L'application doit être exécutée à l'adresse http: // localhost: 8100 /.
Vous avez déjà créé le Ajouter composant et liste composant pour ajouter des tâches et pour lister les tâches respectivement. Pour les synchroniser, vous devez maintenir la communication entre les deux composants. Pour communiquer entre les composants, vous utiliserez un injectable Service commun.
Créez un dossier appelé un service dans le src / pages dossier.
Créez un fichier de service appelé common.service.ts et ajoutez le code suivant:
import Injectable from '@ angular / core'; @Injectable () export class CommonService constructor () this.tasks = []
Vous suivrez la liste des tâches dans le service commun et celle-ci sera partagée entre le Ajouter et liste Composants.
Définir une variable appelée les tâches dans le common.service.ts fichier. Vous garderez votre liste de tâches dans cette les tâches tableau.
import Injectable from '@ angular / core'; @Injectable () export class CommonService tâches publiques: tout; constructor () this.tasks = []
Créez un dossier appelé tâche à l'intérieur de src / pages dossier. Créez un fichier appelé task.model.ts et ajoutez le code suivant:
classe d'exportation Task constructeur (id public: Number, nom public: String, public IsDone: Boolean)
Vous utiliserez ce qui précède Tâche classe pour créer une instance d'une nouvelle tâche.
Lorsque l'utilisateur clique sur le bouton Ajouter une tâche à partir du Ajouter composant, vous allez ajouter des éléments à la les tâches variable dans le common.service.ts fichier. Alors créez une méthode appelée Ajouter une tâche dans le common.service.ts fichier, que vous appelez à partir du Ajouter composant.
import Injectable from '@ angular / core'; import Task from '… /model/task.model' @Injectable () export class CommonService tâches publiques: tout; constructor () this.tasks = [] addTask (item) this.tasks.push (new Task ((new Date ()).. getTime (), item, false));
Pour ajouter une tâche à la liste des tâches, vous devez importer le common.service.ts déposer à l'intérieur du Ajouter une page composant.
importer CommonService de '… /service/common.service'
Initialiser le Service commun à l'intérieur de Ajouter une page méthode du constructeur de composant.
constructeur (viewCtrl public: ViewController, commonService privé: CommonService)
À l'intérieur de Ajouter une page composant, créer une méthode appelée ajouter où vous allez ajouter la tâche au service commun les tâches liste.
Voici comment ajouter méthode dans le Ajouter une page composant ressemble:
add () this.commonService.addTask (this.item); this.dismiss ();
Comme on le voit dans la méthode ci-dessus, vous avez appelé le Ajouter une tâche méthode du service commun pour ajouter une tâche à la les tâches liste.
Une fois l'élément ajouté, vous avez appelé le rejeter méthode pour ignorer la superposition contextuelle. Voici comment add.component.ts fichier regarde:
importer composant de '@ angular / core'; importer ViewController de 'ionic-angular'; importer CommonService depuis '… /service/common.service' @Component (sélecteur: 'page-add', templateUrl: 'add.component.html') classe d'exportation AddPage tâches publiques: any = []; élément public: String; constructeur (viewCtrl public: ViewController, commonService privé: CommonService) licencier () this.viewCtrl.dismiss (); add () this.commonService.addTask (this.item); this.dismiss ();
dans le add.component.html page, ajoutez le ngModel directive à l'élément d'entrée.
Ajoutez l'événement click au bouton dans le add.component.html pour déclencher le ajouter méthode à l'intérieur du add.component.ts.
Enregistrez les modifications ci-dessus et essayez de redémarrer le serveur ionique. Accédez à l'URL du navigateur jusqu'à http: // localhost: 8100 et vous devriez pouvoir afficher l'application mobile dans le navigateur..
Cliquez sur l'icône Ajouter pour ajouter une tâche. Entrez le nom de la tâche et cliquez sur le bouton Ajouter. Le pop-up devrait disparaître.
Une fois la tâche ajoutée à la liste des tâches, vous devez mettre à jour la vue en conséquence. Donc, pour suivre la tâche une fois ajouté à la liste, vous devrez utiliser Angular Assujettir.
Définir un sujet appelé task_subject à l'intérieur de common.service.ts fichier.
public task_subject = new Subject()
Lorsque la tâche est ajoutée à la les tâches liste, vous devez déclencher le sujet task_subject pour informer l'abonné qu'une tâche a été ajoutée.
Modifier le Ajouter une tâche méthode à l'intérieur du common.service.ts fichier pour inclure le code suivant:
this.task_subject.next ();
Voici le modifié Ajouter une tâche méthode:
addTask (item) this.tasks.push (nouvelle tâche ((nouvelle date ()). getTime (), item, false)); this.task_subject.next ();
Abonnez-vous au sujet task_subject à l'intérieur de list.component.ts fichier.
constructeur (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (réponse => this.tasks = this.commonService.tasks;)
Chaque fois qu'une nouvelle tâche est ajoutée, le les tâches du service commun est affecté à la les tâches dans list.component.html et la vue est mise à jour.
Voici comment list.component.ts le code ressemble:
importer composant de '@ angular / core'; importer ModalController de 'ionic-angular'; importer AddPage à partir de '… /add/add.component'; importer CommonService depuis '… /service/common.service' @Component (sélecteur: 'liste de pages', templateUrl: 'list.component.html') classe d'exportation ListPage public tasks = []; constructeur (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (réponse => this.tasks = this.commonService.tasks;) presentAddModal () let addModal = this.modalCtrl.create (Ajouter une page); addModal.present ();
Modifier le list.component.html itérer sur le les tâches variable de la list.component.ts fichier. Voici à quoi ça ressemble:
nom de l'article
Enregistrez les modifications ci-dessus et redémarrez le serveur. Essayez d'ajouter une nouvelle tâche et elle s'affichera sur l'écran de liste.
Implémentons maintenant la fonctionnalité pour marquer les tâches terminées. Chaque fois qu'une nouvelle tâche est ajoutée, vous ajoutez un Est fait attribuer comme faux.
Gardons deux tableaux différents pour les tâches en attente et les tâches terminées.
public waitingTasks = [] public doneTasks = []
Chaque fois qu'une nouvelle tâche est ajoutée, vous mettez à jour les deux tableaux ci-dessus comme indiqué:
constructeur (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (response => this.pendingTasks = this.commonService.tasks.filter (item => return item.IsDone == false) ; this.doneTasks = this.commonService.tasks.filter (item => return item.IsDone == true);)
Lorsque l'utilisateur clique sur la case à cocher, vous devez basculer la Est fait statut. Ajouter une méthode appelée checkPendingItem pour basculer le Est fait statut des tâches en attente.
checkPendingItem (id) this.pendingTasks.map ((task) => if (task.Id == id) if (task.IsDone) task.IsDone = false; sinon task.IsDone = true; ) this.updateTask ()
De même, ajoutez une autre méthode appelée checkDoneItem pour basculer le statut de la tâche pour les éléments terminés. Voici à quoi ressemble la méthode:
checkDoneItem (id) this.doneTasks.map ((task) => if (task.Id == id) if (task.IsDone) task.IsDone = false; sinon task.IsDone = true; ) this.updateTask ()
Une fois la Est fait l'état est basculé, vous devez mettre à jour les tâches. Définir une méthode appelée updateTask, qui s'appelle après Est fait basculer dans les deux méthodes ci-dessus.
updateTask () this.pendingTasks = this.commonService.tasks.filter (item => return item.IsDone == false); this.doneTasks = this.commonService.tasks.filter (item => return item.IsDone == true);
Modifier le list.component.html code pour afficher le tâches en attente et doneTâches séparément. Voici comment le modifié list.component.html fichier regarde:
Gestionnaire de tâches ionique Mes tâches nom de l'article Tâches archivées nom de l'article
Enregistrez les modifications ci-dessus et redémarrez le serveur ionique. L'application doit être exécutée à l'adresse http: // localhost: 8100..
Dans ce didacticiel, vous avez vu comment implémenter la fonctionnalité permettant d'ajouter et de répertorier les tâches dans l'application mobile Ionic Task Manager. Vous avez vu comment utiliser un service Angular pour partager des données entre deux composants. Dans ce didacticiel, vous avez utilisé le service Angular pour conserver des données dans une liste commune lorsqu’elles ont été ajoutées à partir du composant Add et les afficher dans le composant List..
Faites-nous savoir vos pensées dans les commentaires ci-dessous.
Le code source de ce tutoriel est disponible sur GitHub.
Accentsconagua