Maintenant que nous avons une compréhension des applications d'une seule page,
nous allons continuer à travailler sur
notre application angulaire que nous avons travaillé dans les exercices jusqu'à
loin et le développer en
l'application d'une seule page en utilisant le support du module de routeur angulaire.
Nous avons déjà inclus plusieurs composants dans
notre application angulaire dans l'exercice précédent et nous avons déjà
configuré pour que notre application angulaire puisse acheminer
entre deux composants différents.
Maintenant, nous allons intégrer plus dans notre application angulaire et
la développer dans l'application angulaire à part entière avec
la navigation parmi les différentes vues
rendues par les différents composants de notre application.
Continuant avec notre application telle qu'elle est maintenant,
nous avons la maison en cours de rendu lorsque vous naviguez vers notre application
maintenant et puis le modèle Home a
été affiché entre l'en-tête et le pied de page et quand vous allez au Menu,
le menu est affiché entre l'en-tête et le pied de page dans la vue ici.
Maintenant, évidemment, nous devons intégrer les autres composants que nous
inclus dans notre application angulaire
pour le développer comme une application angulaire à part entière.
Dans cet exercice, nous allons intégrer le ContactComponent,
nous mettrons à jour le modèle pour le ContactComponent,
nous mettrons également à jour le modèle pour le HomeComponent et faire ce
un pas vers notre application angulaire d'une seule page.
Commençons par le composant ContactComponent.
Pour commencer, copiez d'abord le modèle pour
le ContactComponent que je vous ai donné dans les instructions d'exercice, puis
le coller dans le fichier contactcomponent.html afin que nous puissions vider
la vue réelle de notre ContactComponent plus en détail ici.
Maintenant, vous pouvez voir que j'ai coupé et collé le code pour
le fichier de modèle à partir des instructions dans mon ContactComponent.
Nous allons terminer l'intégration de
le ContactComponent dans notre application et ensuite nous allons regarder
à quoi ressemble le ContactComponent, puis revenir
et regarder rapidement ce code un peu plus tard.
Maintenant, pour intégrer le ContactComponent dans notre application angulaire,
nous devons inclure un chemin vers le ContactComponent dans nos routes.
Donc, en allant au fichier routes.ts juste après le Menu,
Je vais inclure un autre chemin pour le ContactComponent, j'utiliserai
l'URL comme nous contacter et
le composant correspondant est ContactComponent ici.
Donc, avec cela, nous avons maintenant intégré notre ContactComponent
dans notre application et nous allons enregistrer les changements dans
ceci et ensuite nous devrons également mettre à jour le composant d'en-tête et mettre à jour
le lien a dans le composant d'en-tête pour nous aider à naviguer vers le composant ContactComponent.
Donc, je vais juste copier ceci à partir du menu un lien dans
la barre d'outils de mon composant d'en-tête là-bas, puis copier cela dans
le ContactComponent, puis le mettre à jour en tant que contactez-nous.
Sauvegardons les modifications dans tous les fichiers et
puis jetez un oeil à l'application résultante.
En allant à l'application dans notre navigateur,
si nous naviguons maintenant vers le ContactComponent,
nous pouvons voir que les détails du ContactComponent sont affichés
ici entre l'en-tête et le pied de page comme on s'y attend.
Donc, à l'intérieur du ContactComponent,
nous avons le titre Contact Us
là, puis quelques informations de localisation où j'ai affiché l'adresse.
Donc, ceci est similaire à l'adresse que nous avons
dans le pied de page donc je ne vais pas expliquer que dans le détail
, alors nous avons une autre partie ici où nous incluons la carte de notre emplacement.
Nous ne allons pas le faire pour le moment,
nous allons juste le laisser comme vide et puis vous voyez aussi que j'ai
trois boutons que j'ai inclus ici pour Call, Skype et Email.
Ces trois boutons sont activés dans notre application
et j'utilise le bouton surélevé de tapis pour rendre ces trois boutons.
Donc, vous pouvez voir que ces boutons sont différents de
les autres boutons que vous avez inclus dans votre application là-bas.
Donc, ceci est un composant de bouton surélevé de notre matériau angulaire là-bas.
Donc, après avoir vu le ContactComponent et
le fait que nous sommes capables de naviguer vers le ContactComponent.
Maintenant, à partir des autres composants,
jetons un coup d'œil à
le code HTML que nous avons inclus pour le modèle de notre ContactComponent.
En allant à contactcomponent.html, vous verrez que nous avons
le titre de cette page inclus en utilisant cette div
ici et la deuxième div à l'intérieur ici avec FxFlex
inclut les informations de localisation et ensuite ceci à l'intérieur de cette information d'emplacement,
Je suis à nouveau en train de définir un autre div qui me permettra de
inclure plusieurs vues dans cet autre div ici.
Donc, à l'intérieur de cela, je définit
une autre div avec une colonne de mise en page d'effets et une ligne de calque d'effets.
Donc, c'est une façon imbriquée de définir mes vues CSS Flex ici.
Donc, à l'intérieur de ce nouveau,
J'utilise une vue div Flex avec FxFlex 50 donc il
occupe une moitié, puis FxFlex offset 20 pixels.
Donc, cette vue CSS sera déplacée vers la droite de 20 pixels donc j'ai
une certaine marge là et puis nous avons
l'adresse incluse ici et puis en bas ici,
vous pouvez voir qu'à l'intérieur d'un autre div,
j'ai une balise avec un bouton surélevé mat associé à elle.
C'est ce qui provoque les boutons surélevés que nous
avons en bas de la page Contact là-bas.
Donc, trois d'entre eux ici.
Un pour le numéro de téléphone.
Un pour le Skype et un pour l'email ici et notez aussi que je fais usage de
les icônes Font Awesome pour chacun d'eux, puis la carte
de votre emplacement dans un autre div ici.
Donc, ces deux enferment à l'intérieur de cette div externe qui est à nouveau enfermé à l'intérieur de la div.
Donc, façon imbriquée de définir les dispositions flexibles pour nos différentes parties ici.
Donc, c'est à ce sujet pour le ContactComponent.
Nous avons maintenant intégré cela dans notre application d'une seule page.
Maintenant, allez au DishService.
Maintenant, dans le DishService avec la méthode getDish,
, je vais introduire deux méthodes supplémentaires.
Une méthode appelée getDish,
un plat spécifique et puis j'identifierai le plat avec un id spécifié ici.
Donc, l'id serait
et cela spécifierait me donner le plat avec l'id correspondant à ce nombre.
Donc, ce sera une méthode de plus dans laquelle je vais ajouter
et ajouter également dans une autre méthode appelée getFeaturedDish.
Donc, ce plat en vedette utilisera
la propriété vedette que nous avons ajoutée
, puis retournera le plat pour lequel la fonction est définie sur true.
Donc, c'est ainsi que vous pouvez sélectionner un plat spécifique puis le rendre disponible.
Maintenant, la raison pour laquelle j'ai ce drapeau en vedette est que lorsque la fonction est définie sur true,
ce plat particulier sera rendu sur le HomeComponent.
Maintenant, comment sélectionnons-nous ces plats ?
Alors, ajoutons le code pour cela.
Donc, pour le GetDish,
Je dois retourner quelque chose de la constante de vaisselle que j'ai déjà là.
Donc, à partir de la constante vaisselle,
je vais utiliser la façon de JavaScript de faire le filtrage d'un tableau.
Donc, le filtrage d'un tableau m'aidera à sélectionner
uniquement les éléments du tableau qui
correspondent à un critère particulier qui sera spécifié
à l'intérieur du filtre ici et puis parmi eux je ne retournerai que le premier.
Maintenant, il se trouve que lorsque je spécifie un id,
, il ne sélectionnera qu'un seul élément, mais alors cela deviendra un tableau.
Donc, à partir de ce tableau, j'ai besoin d'extraire cet élément dans ce tableau.
Donc, c'est pourquoi j'utilise entre accolades zéro là.
Donc, cela m'aidera à identifier.
Alors, comment filtrer mes plats ?
Donc, pour chaque plat de ma liste de plats,
donc c'est là que je vais utiliser
une autre fonctionnalité de dactylographie appelée fonctions de flèche.
La fonction flèche est une façon abrégée d'écrire une fonction.
Donc, si vous êtes habitué à écrire des fonctions,
au lieu d'écrire la fonction en disant soigneusement la fonction
et puis entre parenthèses plat et ainsi de suite,
je peux simplement l'écrire dans les cas où la fonction est très simple,
il est très facile d'écrire ceci comme une fonction de flèche ici.
Donc, ici, je vais spécifier dire que l'id du plat est égal à l'id.
Donc, ce que je spécifie ici est de filtrer le tableau des plats et d'extraire
seulement les éléments du tableau pour lesquels l'id du plat.
Donc, chaque élément ici est identifié par ce paramètre plat ici.
Donc, pour lequel l'id du plat correspond à l'identifiant
qui a été fourni en tant que paramètre au plat.
Donc, de cette façon, vous allez extraire ce plat spécifique de
ce tableau, puis retourner ce plat de cette méthode getDish.
Les fonctions fléchées m'ont aidé à écrire du code d'une manière plus simple.
Si vous n'aimez pas les fonctions de flèche
alors vous pouvez l'écrire de la manière plus conventionnelle en disant,
« function dish », puis à partir de là, vous retournerez dish.id triple égal à id,
donc cela retournera un booléen.
Lorsque le filtre rencontre un vrai intérieur ici,
ces éléments de la vaisselle seront sélectionnés dans le tableau.
Donc, c'est là que vos connaissances JavaScript vous sont avantagées.
Donc, vous devez savoir comment fonctionne un filtre JavaScript
pour vous aider à comprendre comment cela se fait.
Ok, maintenant de la même façon pour le plat en vedette,
Je vais utiliser une méthode similaire pour extraire de mes plats
tableau en utilisant un filtre ici mais le filtre que
je vais définir ici serait à nouveau une fonction de flèche ici.
Vous vous habituerez aux fonctions fléchées et une fois que vous vous y êtes habitués,
alors vous réaliserez à quel point elles sont simples.
Donc, ici, la façon de me sélectionner
est la propriété dish.featured parce que ce dish.feature est déjà un booléen là-bas.
Donc, cela m'aidera à retourner le plat en vedette.
Donc, pour quel que soit le plat,
la caractéristique du plat est vraie.
Ce plat particulier sera filtré à partir de
le tableau des plats et puis il n'y aura qu'un jour.
Quoi qu'il en soit, vous devriez vous assurer de ce
afin que vous ne définissiez en vedette que pour l'un de ceux-ci,
et puis j'utilise ceci parce que ce filtre retournera un sous-tableau du tableau de vaisselle,
donc j'ai besoin de sélectionner cet élément.
Il y aura un seul élément à l'index zéro.
Donc, j'utilise l'index zéro pour sélectionner cet élément et retourner
à partir de la méthode de plat get featured ici.
Donc, cela complète la mise à jour du service de plat.
Pour construire notre modèle de maison,
nous allons mettre en vedette sur la vue maison un plat sélectionné,
une promotion actuelle sélectionnée par le restaurant,
et un leader d'entreprise sélectionné dans la liste des lecteurs.
Le leader de l'entreprise qui figure sur la première page fera partie de votre mission qui suit cette leçon particulière.
Mais nous allons maintenant inclure,
nous avons un plat en vedette et la promotion en vedette sur la première page.
Donc, ce qui signifie que j'ai besoin d'un service de promotion qui renvoie
l'ensemble des promotions qui sont menées par ce restaurant particulier.
Alors, permettez-moi d'ajouter un service de promotions pour mon application.
Donc, pour ce faire, dans le dossier partagé,
, je vais créer un nouveau fichier appelé promotion.ts.
Dans les promotion.ts, je vais créer une promotion classe,
classe promotion et retourner cette promotion ici.
Alors, que contient cette classe de promotion ?
Il contient une propriété id,
puis il contient le nom de la promotion du restaurant.
Ainsi, par exemple, la promotion pourrait être comme un buffet de week-end.
Ou 10% de chaque jour à
midi et des choses comme ça peuvent être présentées sur la première page de vos restaurants là-bas.
Donc, nom alors je vais également inclure une image,
qui doit être de la chaîne de type l'URL de l'image,
puis étiquette qui sera une chaîne.
Prix aussi une chaîne.
Maintenant, le travail implique,
vous ne me voyez pas les utiliser pour le moment,
nous allons les mettre en usage dans l'un des exercices ultérieurs en vedette booléenne.
Donc, vous voyez le drapeau en vedette apparaissant à nouveau dans la promotion aussi,
, puis chaîne de description.
Donc, vous voyez que la promotion structurée est à peu près
similaire à la structure du plat que nous avons vu plus tôt.
Donc, c'est la classe de promotion ici.
Maintenant, avec la classe de promotion,
J'ai besoin de créer une autre classe qui
exporte l'ensemble de promotion dire constant avec les promotions ici.
Donc ici, je vais importer
la classe de promotion
du fichier promotion.ts,
, puis j'exporterais une constante appelée promotion.
Donc, vous voyez que j'utilise une structure très similaire à la vaisselle ici.
Donc, vous commencez à voir que,
cette structure que nous avons utilisée plus tôt pour
les promotions pour les plats est également utile pour déclarer les promotions.
Si vous avez une structure différente,
vous verrez qu'avec les leaders la structure sera un peu
différente pour l'objet JavaScript ici. Les promotions.
Maintenant, les détails d'une promotion spécifique que je l'ai donnée dans les instructions,
donc je suggère que vous copiez et collez-la à partir de
là-bas au lieu de me taper le tout ici.
Alors, laissez-moi aller de l'avant et copier et coller
cet objet JavaScript dans ce tableau d'objets JavaScript ici,
donc là vous allez.
La promotion n'a qu'un seul objet pour le moment.
À l'avenir, nous pouvons en ajouter plus.
À ce stade, je n'en ai qu'un, alors je viens de l'ajouter là-dedans,
et je vais utiliser cela et c'est la promotion en vedette pour mon restaurant là-bas.
C'est juste une promotion,
alors laissez-moi mettre à jour ces promotions,
c'est ce dont j'ai besoin.
Donc, je vais juste enregistrer les modifications dans le fichier promotion.ts.
Ensuite, je vais créer un autre service appelé service de promotion.
Donc, pour ce faire, allons à la ligne de commande à l'invite de commande type
ng générer des services/promotion d'enquêtes.
Donc, le service de promotion est créé là-bas.
Donc, maintenant le PromotionService est en place.
Alors, ajoutons les fonctionnalités du PromotionService.
Donc, en allant sur PromotionService,
, vous voyez que le PromotionService est maintenant inclus dans votre dossier de services ici,
donc nous devons préparer un PromotionService.
Donc, dans le PromotionService,
, je vais importer
promotion à partir de partage/promotion,
la classe de promotion, et aussi importer
des promotions à partir de la classe partagée/promotions là-bas.
Les promotions constantes à partir de là.
Maintenant, comme nous l'avions pour le service de plat,
nous devons créer trois méthodes dans le PromotionsService.
Donc, ce que je vais faire est de me sauver le problème,
Je vais aller dans le plat.service,
et ensuite copier ces trois,
et ensuite coller dans mon service de promotion,
puis éditer le code.
Ok, donc du service de promotion,
J'ai besoin de retourner getPromotions et
ceci est du type de promotion et ensuite cela retournera PROMOTIONS,
et ensuite obtenir le deuxième serait promotion
qui reçoit à nouveau l'identifiant de la promotion,
donc je vais retourner
PROMOTIONS.filter promo.id est id.
Alors la promotion GetFeatured.
Donc, vous pouvez voir que la structure du service Promotionest très similaire à
le service à vaisselle et ce ne serait pas le type de promotion,
et cela retournera
promotions.Filter promo et ce sera promo.featured et c'est tout.
Mon PromotionService est prêt.
Maintenant, je vais aller dans le volet maison, et préparer ça,
de sorte que dans mon volet maison,
je vais afficher un plat et une promotion vedette.
Le présenté/plat et fonctionné/promotion seront affichés dans
le composant home à l'aide du composant de la carte de matériau angulaire.
Donc, nous devons d'abord obtenir les données dans notre composant home,
donc c'est ce que nous allons faire dans le fichier de script de type home components là-bas.
Donc, en allant dans le fichier de script de type home components, home component.ts.
Ici, j'ai besoin d'importer le plat
de shared/dish et aussi le plat
correspondant de services/dish.service.
Ok, maintenant je vais aussi faire la même chose pour les promotions,
donc je vais juste copier ça et le coller ici,
et ensuite éditer celui-ci,
pour que ce soit la promotion,
ce serait PromotionService,
et ensuite promotion, et ensuite ce serait PromotionService.
Donc, avec cela, nous avons à la fois les services de plat et
et le service de promotion disponibles pour nous,
dans notre composante maison.
Venant maintenant au constructeur.
Laisse maintenant injecter les deux services ici,
et les rendre disponibles pour nos applications ou service de vaisselle,
et le service de promotion injecté ici.
Donc, avec cela, nous avons accès aux deux services.
Alors maintenant, dans la méthode NGONinit,
, je vais chercher les deux plats en vedette.
Donc, je dirais this.DishService.getFeaturedDish
et aussi la promotion,
PromotionService et getFeaturedPromotion.
Juste pour être complet,
laissez-moi déclarer le plat ici comme de type
Dish et la promotion comme de type Promotion ici.
Donc, cela devrait clarifier toutes les valeurs que nous utilisons ici.
Donc, avec cela, nous terminons la mise à jour de notre fichier de caractères des composants maison.
Passons maintenant au fichier template,
, puis ajoutez les deux cartes pour afficher le plat en vedette et la promotion en vedette.
Maintenant, pour cela, je vous ai donné le code dans les instructions.
Donc, je vais juste copier ce code et le coller ici.
Vous savez déjà comment créer des cartes,
afin que vous puissiez facilement suivre le code que je colle ici.
Ainsi, le modèle de composants maison est également mis à jour,
afin que vous puissiez voir qu'il a deux cartes ici.
Pour un, affichant le plat et l'autre affichant la promotion ici,
et enfermé dans un div FxLayout ici.
Alors, sauvegardons les changements, puis jetez un coup d'œil à notre application.
Après avoir créé le service de promotion,
, nous devons également inclure le service de promotion dans l'AppModule,
et le rendre disponible pour notre application.
Donc, je vais aller ici,
et ensuite importer
le service de promotion ici.
Ensuite, a déclaré le service de promotion
comme l'un des fournisseurs
dans mon fichier AppModule.ts ici.
Donc, dans le fichier AppModule,
, j'ai besoin de ces deux,
, puis d'enregistrer des modifications.
Aller au navigateur,
vous pouvez maintenant voir que dans le navigateur,
le composant home affiche maintenant les deux cartes,
une pour le plat en vedette et une pour la promotion en vedette ici.
Donc, vous pouvez voir que les deux voitures sont affichées ici.
Je peux maintenant accéder à la page Menu,
, puis aussi à la page Contact.
La page À propos n'est toujours pas là,
vous allez remplir la page À propos dans le cadre de votre deuxième affectation.
En regardant la même application sur une taille d'écran plus petite,
donc c'est un écran iPhone 6 Plus.
Regardons le composant maison et un écran iPhone 6 Plus.
Vous pouvez voir ce plat en vedette et promotion en vedette sur la page d'accueil là-bas.
Ensuite, le menu que nous avons vu plus tôt,
et aussi la page Contact affichée ici.
Donc, vous pouvez voir que maintenant notre application d'une seule page est beaucoup plus configurée.
Sauf pour le About,
que nous ferons dans la deuxième mission.
Un autre changement mineur que vous pouvez faire dans votre fichier HTML des composants d'en-tête,
est que, avec la directive de liaison du routeur,
la Route angulaire supporte également une directive appelée RouteLinkActive.
Cela nous permet d'appliquer certaines classes à l'élément particulier ici.
Donc, dans ce cas,
si ce lien devient actif que ce que je spécifie ici,
sera appliqué en tant que classe à cet élément particulier là-bas.
Donc, je vais spécifier une classe appelée active.
Donc ici, je spécifie RouterLinkActive avec active.
Donc, si je définit une classe CSS appelée active,
alors la classe sera appliquée à ce lien,
chaque fois que cette vue particulière est affichée sur la page des applications ici.
Je vais copier la même chose et l'appliquer à tous les boutons restants,
où j'ai déjà défini le lien du routeur.
Donc, je vais appliquer la classe RouterLinkActive,
à l'Accueil, au Menu et au Contactez-nous.
Maintenant, cela signifie aussi que je devrais définir une classe CSS active.
Donc, pour ce faire, je vais aller dans le fichier SESS des composants d'en-tête,
, puis définir une classe active ici,
donc je vais définir la classe active juste là.
Pour définir la classe active,
je vais ajouter une autre variable de couleur ici appelée background-moredark.
Ensuite, la couleur correspondante est 4527A0,
c'est une version plus foncée de cette couleur foncée de fond, 4527A0.
Ensuite, pour mon actif,
ce que je vais faire est, de la classe active,
Je laisserai la classe définir un arrière-plan,
définir l'arrière-plan de
cet élément à la couleur background-moredark.
Donc, lorsque cette vue particulière est sélectionnée et affichée dans la page,
alors cette classe active sera appliquée à
cette balise particulière
là par la directive active de lien de routeur que nous avons appliquée ici.
Maintenant, quel changement cela provoque sur notre page Web.
Maintenant, en allant sur notre page web,
, nous allons voir ce que cela introduit sur notre page web.
En allant à notre application,
vous voyez maintenant que lorsque nous sommes dans
la vue de la maison dans le composant home affiché ici, sa vue correspondante.
Ensuite, le bouton Accueil ici a une couleur d'arrière-plan différente qui est
appliquée parce que la classe active a été ajoutée parce que nous
définissons le RouterLinkActive à actif ici.
Donc, cette classe est appliquée.
De même, lorsque vous sélectionnez le menu,
alors vous voyez que le menu est mis en surbrillance dans l'en-tête,
et la vue des menus est affichée ici,
et de même pour le contenu.
Maintenant, cela nous permet de voir en un coup d'œil quelle payer vue particulière VR,
dans notre application d'une seule page.
Donc, il s'agit d'une amélioration supplémentaire de l'interface utilisateur,
qui nous permet de voir quelques fonctionnalités intéressantes.
Bien que, cela n'ajoute pas beaucoup à la fonctionnalité de l'application,
mais juste ajouter quelques petites fonctionnalités qui seront un ajout utile à votre application.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons travaillé à intégrer
le composant contact dans notre application d'une seule page.
Nous avons également conçu quelques cartes que nous avons incluses dans le composant home,
et ajouté quelques nouvelles fonctionnalités à notre application.
C'est le bon moment pour vous d'enregistrer les modifications dans votre dépôt Git avec le message,
Application d'une seule page Partie 1.