Share
Dans cette série de tutoriels, vous apprendrez à commencer à créer une application mobile à l'aide du framework Ionic. Ionic utilise Angular pour écrire les composants et créer l'application mobile.
Tout au long de cette série, vous allez créer une application mobile simple de gestionnaire de tâches utilisant le cadre ionique..
De la documentation officielle:
Ionic est le beau SDK mobile gratuit et à source ouverte permettant de développer facilement des applications Web natives et progressives..
Commençons par installer Ionic à l’aide de Node Package Manager (npm). Avant d’installer Ionic, assurez-vous d’avoir Node.js installé sur votre système.
npm installer -g cordova ionic
Une fois Ionic installé, créez un nouveau projet vierge Ionic en utilisant la commande suivante:
début ionique angulaire-ionique vierge
Vous testerez l'application Ionic dans le navigateur jusqu'à ce qu'elle soit terminée. Une fois terminé, vous testerez l'application sur un appareil Android..
Tapez la commande suivante pour exécuter l'application à partir du navigateur..
service ionique
Pointez votre navigateur sur http: // localhost: 8100 / et vous devriez avoir le projet Ionic en cours d'exécution.
Voici à quoi ressemble la structure du projet:
Dans le projet Ionic, vous avez un dossier appelé src / app. À l'intérieur de app dossier, vous trouverez un fichier appelé app.module.ts où le module racine AppModule est défini.
dans le app.module.ts déposer à l'intérieur du importations section, vous pouvez voir que le composant racine a été défini à l'aide du code suivant:
IonicModule.forRoot (MyApp)
MyApp a été importé du app.component où il a mis le rootPage comme Page d'accueil, qui apparaît lorsque l'application se charge.
Créons la vue pour répertorier les tâches ajoutées. À l'intérieur de src / pages dossier, créez un autre dossier pour le liste composant appelé liste.
À l'intérieur de liste dossier, créer un fichier appelé list.component.html qui serait le modèle de composant. Ajoutez le code suivant au list.component.html fichier:
Liste des tâches ioniques Tache 1 Tâche 2 Tâche 3
Comme indiqué dans le code ci-dessus, vous avez utilisé des balises spécifiques à Ionic pour créer les éléments. Vous pouvez vous référer à la documentation officielle d'Ionic pour obtenir une liste des API de composant Ionic que vous pouvez utiliser lors de la création de vos modèles..
Pour contrôler le modèle créé ci-dessus, vous aurez besoin d'une classe de contrôleur. Créez un fichier appelé list.component.ts et définir le ListPage classe. Voici à quoi ça ressemble:
importer composant de '@ angular / core'; @Component (sélecteur: 'page-list', templateUrl: 'list.component.html') classe d'exportation ListPage constructor ()
Vous avez défini le composant de liste de tâches à l’aide de la touche @Composant décorateur. À l'intérieur de @Composant décorateur, vous avez défini le sélecteur à l'aide du sélecteur clé et le modèle en utilisant le templateUrl clé pour le composant.
L'application a besoin de savoir que le composant créé ci-dessus existe et vous devez donc l'importer à l'intérieur du module racine..
Importer le ListPage classe à l'intérieur du src / app / app.module.ts déposer et l'inclure dans le déclarations et entryComponents liste. Voici comment le modifié app.module.ts fichier regarde:
importer BrowserModule de '@ angular / platform-browser'; import ErrorHandler, NgModule à partir de '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule de 'ionic-angular'; importer SplashScreen de '@ ionic-native / splash-screen'; importer StatusBar de '@ ionic-native / status-bar'; importer ListPage de '… /pages/list/list.component'; importer MyApp de './app.component'; importer HomePage de '… / pages / home / home'; @NgModule (déclarations: [MyApp, HomePage, ListPage], importations: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage], fournisseurs: [StatusBar, SplashScreen, fournir: ErrorHandler, useClass: IonicErrorHandler]) classe d'exportation AppModule
Lorsque l'application se charge, vous souhaitez que le composant List nouvellement créé apparaisse à la place du Page d'accueil. Alors modifiez le rootPage défini à l'intérieur du app.component.ts fichier.
importer composant de '@ angular / core'; importer Platform de 'ionic-angular'; importer StatusBar de '@ ionic-native / status-bar'; importer SplashScreen de '@ ionic-native / splash-screen'; importer HomePage de '… / pages / home / home'; importer ListPage de '… /pages/list/list.component'; @Component (templateUrl: 'app.html') classe d'exportation MyApp rootPage: any = ListPage; constructeur (plate-forme: Platform, statusBar: StatusBar, splashScreen: SplashScreen) platform.ready (). then (() => statusBar.styleDefault (); splashScreen.hide (););
Comme indiqué dans le code ci-dessus, vous avez importé le ListPage à l'intérieur de app.component.ts déposer et changé le rootPage à ListPage au lieu de Page d'accueil.
Enregistrez les modifications ci-dessus et démarrez le serveur Ionic à l'aide de la commande suivante:
service ionique
L'application mobile doit s'exécuter à l'adresse http: // localhost: 8100 /.
A partir de l'écran de liste, vous allez ajouter un lien pour ajouter des éléments à la liste. Plaçons une icône d'ajout sur le côté droit de l'écran. À l'intérieur de list.component.html fichier, ajoutez ce qui suit pour ajouter l'icône plus.
Voici comment le modifié list.component.html fichier regarde:
Gestionnaire de tâches ionique Tache 1 Tâche 2 Tâche 3
Enregistrez les modifications ci-dessus et redémarrez le serveur. L'icône Plus apparaîtra à l'écran..
Lorsque l'utilisateur clique sur l'icône plus, vous devez afficher l'écran pour ajouter de nouvelles tâches. Créons donc un autre composant appelé le Ajouter composant.
Créez un dossier appelé ajouter à l'intérieur de des pages dossier. À l'intérieur de ajouter dossier, créer un fichier appelé add.component.html et ajoutez le code suivant:
Gestionnaire de tâches ionique Entrez la tâche
Le code ci-dessus affiche l'écran pour ajouter une nouvelle tâche.
Vous devez afficher l'écran ci-dessus lorsque l'utilisateur clique sur l'icône Plus dans la liste. Donc, vous allez le montrer comme un popup modal.
Créez un fichier appelé add.component.ts et ajoutez le code suivant:
importer composant de '@ angular / core'; @Component (selector: 'page-add', templateUrl: 'add.component.html') classe d'exportation AddPage constructor ()
Comme indiqué dans le code ci-dessus, vous venez de créer le composant Add en spécifiant le sélecteur et templateUrl.
Enregistrez le composant en l'important dans le répertoire app.module.ts déposer à l'intérieur du src / app dossier. Voici comment le modifié app.module.ts fichier regarde:
importer BrowserModule de '@ angular / platform-browser'; import ErrorHandler, NgModule à partir de '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule de 'ionic-angular'; importer SplashScreen de '@ ionic-native / splash-screen'; importer StatusBar de '@ ionic-native / status-bar'; importer ListPage de '… /pages/list/list.component'; importer AddPage de '… /pages/add/add.component'; importer MyApp de './app.component'; importer HomePage de '… / pages / home / home'; @NgModule (declarations: [MyApp, HomePage, ListPage, AddPage], importations: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage, AddPage], fournisseurs: [ StatusBar, SplashScreen, fournir: ErrorHandler, useClass: IonicErrorHandler]) classe d'exportation AppModule
Pour montrer le Ajouter une page composant dans un popup modal, vous devez importer Contrôleur modal fourni par ionique-angulaire. Importation Contrôleur modal dans list.component.ts.
importer ModalController de 'ionic-angular';
Créez une méthode appelée presentAddModal et créer un modal en utilisant le importé Contrôleur modal. Voici comment list.component.ts fichier regarde:
importer composant de '@ angular / core'; importer ModalController de 'ionic-angular'; importer AddPage à partir de '… /add/add.component'; @Component (selector: 'page-list', templateUrl: 'list.component.html') exporte la classe ListPage constructeur (constructeur public modalCtrl: ModalController) presentAddModal () let addModal = this.modalCtrl.create (AddPage ) addModal.present ();
Enregistrez l'événement click sur le bouton d'ajout dans list.component.html.
Enregistrez les modifications ci-dessus et redémarrez le serveur Ionic. Cliquez sur l'icône d'ajout dans la page de liste et vous aurez la page ajouter une tâche.
Pour le bouton de retour sur l'écran d'ajout de tâche, vous devez ajouter un rejeter méthode sur le bouton, cliquez dans le add.component.ts fichier.
Importer le ViewController module et appelez le rejeter méthode pour revenir à l'écran de liste. Voici à quoi ça ressemble:
importer composant de '@ angular / core'; importer ViewController de 'ionic-angular'; @Component (selector: 'page-add', templateUrl: 'add.component.html') exportez la classe AddPage constructeur (viewCtrl public: ViewController) ignore () this.viewCtrl.dismiss ();
Dans ce tutoriel, vous avez vu comment commencer à créer une application mobile à l'aide du framework Ionic, qui utilise Angular. Vous avez créé la vue pour une application de gestionnaire de tâches. Vous avez créé le composant Add et le composant List.
Dans la suite de cette série de didacticiels, vous allez implémenter la fonctionnalité permettant à l’application de gestion des tâches d’ajouter et de répertorier des tâches..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos suggestions dans les commentaires ci-dessous.
Accentsconagua