Share
Dans cet article, nous allons jeter un coup d'œil aux pages ioniques. Je vais vous montrer comment modifier le contenu de votre application, créer des pages d'applications supplémentaires et configurer la navigation..
Dans Getting Started With Ionic, nous avons appris à créer notre tout premier projet Ionic. À partir de là, dans ce tutoriel, nous allons modifier l'une des pages que nous avons créées pour notre application..
Pour éditer notre page, nous devons ouvrir notre projet en utilisant un éditeur de texte. Dans mon cas, j'utiliserai le code Visual Studio, mais n'hésitez pas à utiliser votre propre éditeur de texte préféré. Une fois votre projet ouvert, il devrait ressembler à l'image ci-dessous (notez que nous ouvrons tout le dossier du projet et pas seulement une page spécifique):
Ionic utilise des fichiers de page contenant tous les fichiers nécessaires pour modifier une page donnée de votre application. Ces pages se trouvent dans un dossier sous le src dossier dans votre projet Ionic.
Nous allons faire un simple changement dans notre application Ionic, en modifiant la page d'accueil. Pour ce faire, accédez à la home.html déposer dans src / pages / home et apportez les modifications suivantes au fichier:
Ma maison Bienvenue sur mon application ionique!
C'est super génial.
Ceci est ma 1ère application ionique jamais.
Cela fait, accédez à la home.scss fichier, également dans src / pages / home, et apportez les modifications suivantes:
page-home contenu-ion fond: noir! important; h2 couleur: blanc; p couleur: blanc;
Ici, nous avons changé la couleur de fond de la page d'accueil du blanc au noir en ciblant teneur en ions. C'est ici que notre contenu de page existe. De plus, nous avons également ciblé les h2 élément d'en-tête ainsi que le p (paragraphe) des éléments et a changé la couleur du texte pour les deux en blanc.
Avec vos modifications terminées (n'oubliez pas de sauvegarder), exécutez soit service ionique ou laboratoire ionique à partir de la ligne de commande. Ces outils Ionic CLI vont compiler votre application et la rendre disponible pour des tests. Je vais utiliser laboratoire ioniquedans cet exemple.
Une fois que vous avez exécuté l'une de ces commandes avec succès, votre serveur de développement local doit lancer votre application et ressembler à ceci:
Nous avons donc modifié la page d'accueil en modifiant le texte ainsi que la couleur d'arrière-plan de la page. Comment avons-nous fait cela? Notre dossier de page d'accueil est composé de trois fichiers: home.html, home.scss, et home.ts.
le home.ts fichier est un fichier TypeScript constitué d'un composant angulaire avec le décorateur de composant suivant:
@Component (sélecteur: 'page-home', templateUrl: 'home.html')
le home.html Le fichier agit en tant que modèle du composant, que nous pouvons utiliser pour modifier le contenu de notre page d'accueil. Il est spécifié avec le templateUrl paramètre du décorateur de composant.
Pour changer le style de la page d'accueil, nous pouvons utiliser CSS ou SCSS dans home.scss fichier.
Ensuite, nous allons créer une page supplémentaire dans notre application appelée Info. Afin de créer cette nouvelle page, nous devons exécuter la commande suivante dans notre projet: ionique générer des informations de page. Dans Visual Studio Code, nous pouvons le faire en ouvrant le terminal intégré à partir de Vue> Terminal intégré. Tapez simplement la commande ici et appuyez sur Entrer.
Cela va générer une nouvelle page dans votre projet, avec les fichiers info.html, info.ts, et info.scss.
Une fois la page générée, vous devriez pouvoir la voir sous le dossier Pages dans vos fichiers de projet. Pour que nous puissions utiliser cette page nouvellement créée dans notre application, nous devrons d'abord l'enregistrer dans notre répertoire. app.module.ts fichier. Vous pouvez trouver cela dans le src / app dossier.
Tout d'abord, ajoutez un importation déclaration pour le fichier de composant de votre page d'information près du sommet de app.module.ts.
importer InfoPage de '… / pages / info / info';
Vous pouvez ajouter ceci ci-dessous le importation déclarations pour les autres pages.
Puis ajouter InfoPage au déclarations et entryComponents des tableaux de votre module d'application. Votre @NgModule déclaration devrait maintenant ressembler à ceci:
@NgModule (declarations: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], //… entryComponents: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], //…
Dans sa forme la plus simple, Ionic pousse et pops des pagescomme son concept de navigation. L'idée est que nous empilons des pages les unes sur les autres. Lorsque nous ouvrons une nouvelle page, nous la plaçons dans la pile et lorsque nous revenons à la page précédente, nous supprimons la page en cours..
Ainsi, lorsque vous consultez une page dans une application Ionic, vous affichez toujours la page la plus haute de la pile, et si vous cliquez pour afficher une autre page, vous serez poussant cette page en haut de la pile de navigation couvrant la page précédente de la vue.
Si vous revenez à la page précédente, vous serez alors éclater la page en cours de la pile et en affichant la page ci-dessous. Pensez-y comme un jeu de cartes, où vous ajoutez et retirez des cartes du jeu.
Pour continuer avec notre exemple, avec notre page créée et enregistrée avec succès dans notre application, configurons la navigation vers notre page nouvellement créée à partir de la page d'accueil..
En utilisant la page d’accueil que nous avons modifiée précédemment, personnalisons-la davantage en ajoutant un bouton qui nous permettra de naviguer vers notre page d’informations. Ajoutez le code suivant à home.html, dans le contenu ionique et sous le texte du paragraphe:
Le code ci-dessus spécifie un composant ionique, à savoir un bouton ionique. Plus tard, nous ajouterons un gestionnaire de clic. Lorsque vous appuierez sur ce bouton, nous naviguerons vers la page d'informations..
Votre page d'accueil devrait ressembler à ceci maintenant:
Cependant, si nous devions cliquer sur notre bouton nouvellement créé maintenant, cela ne nous mènerait nulle part, car nous ne l'avions pas encore programmé avec aucune fonctionnalité. Pour ce faire, nous devrons ajouter un événement d'écoute de clic suivi d'une fonction sur notre bouton, comme suit:
Ensuite, allons de l'avant et déclarons la fonction que nous avons écrite ci-dessus, browseToInfo (), dans notre home.ts fichier. Tout d'abord, importez le NavController aide de la ionique-angulaire bibliothèque de base. NavController nous permet de gérer la navigation dans notre application Ionic, et nous l'utilisons pour afficher la page d'informations en haut de la page d'accueil lorsque l'utilisateur clique sur le bouton.
Nous devrons également importer le InfoPage composant. Placez ces lignes en haut de votre home.ts fichier.
importer NavController de 'ionic-angular'; importer InfoPage de '… / info / info';
Ensuite, nous allons modifier le composant page d'accueil pour recevoir une instance de NavController via l'injection de dépendance. Modifiez le constructeur de la page d'accueil comme suit:
constructeur (public navCtrl: NavController)
Enfin, nous pouvons déclarer le browseToInfo fonctionner à l'intérieur de notre Page d'accueil composant.
browseToInfo () this.navCtrl.push (InfoPage)
Tout ce que nous faisons est de pousser une référence au composant de page d’information vers le NavController.
Avec ce qui précède terminé, accédez à la info.html page, et ajoutez un nouvel en-tête à teneur en ions. Peut-être quelque chose comme C'est génial…
Maintenant, si vous exécutez votre application et cliquez sur le bouton Accédez à Info bouton sur la page d'accueil, vous verrez votre page d'information nouvellement créée. Notez également le bouton de retour, créé automatiquement pour vous par Ionic..
Toutes nos félicitations! Vous avez créé et navigué avec succès sur une nouvelle page. N'hésitez pas à répéter ce processus et à créer d'autres pages au sein de ce projet de démonstration.
Jusqu'à présent dans cette série, nous avons réussi à créer un nouveau projet Ionic, créer de nouvelles pages, éditer le contenu de nos pages et configurer la navigation. Nous avons maintenant couvert quelques-uns des concepts de base qui nous aideront plus loin dans le développement d'applications ioniques..
Pendant que vous êtes ici, consultez certains de nos autres articles sur le développement d'applications Ionic.!
Accentsconagua