Avant d'aller de l'avant avec le reste des exercices et les affectations de ce cours,
J'ai pensé que ce serait un bon moment pour moi de
donner à mon application angulaire une belle structure.
Donc, c'est là que je vais ajouter dans l'en-tête et le pied de page
pour mon application angulaire afin que la façon dont
l'interface utilisateur est rendue soit beaucoup plus attrayante que ce qu'elle a été jusqu'à présent.
Alors, voyons comment nous pouvons construire plusieurs composants pour
occuper différentes parties de l'écran dans notre application angulaire.
Donc, ici, vous verrez que mon application angulaire va maintenant se composer d'un en-tête,
qui est un composant séparé, le pied de page,
qui est un autre composant,
et ensuite entre les deux,
j'aurai la partie de mon application angulaire qui va
sera contrôlée plus tard par en utilisant le routeur angulaire.
Alors, voyez-vous, je prépare la scène pour ce qui va arriver plus tard dans ce cours.
Donc, en cours de route,
, nous allons également utiliser les icônes Font Awesome dans notre application angulaire.
Je suis juste friand des icônes impressionnantes Font,
donc j'ai pensé que ce serait un bon endroit pour
introduire ces icônes dans mon application angulaire.
Pour aller de l'avant, installons la police géniale dans notre application angulaire.
Donc, pour ce faire, je vais utiliser NPM pour aller,
et chercher font-awesome pour moi,
donc NPM installer font-awesome 4.7.0, et enregistrer.
Ensuite, laissez font-awesome être installé.
Donc, une fois font-awesome entré dans notre application angulaire,
et devient alors partie des modules de noeud
qui sont inclus dans notre application angulaire,
l'étape suivante consiste à le rendre disponible pour notre application angulaire.
Nous devons intégrer font-awesome dans notre application angulaire.
Donc, pour ce faire,
allez dans le dossier source,
, puis créez un fichier nommé _Variables.scss dans le dossier source.
Dans le fichier Variables.scss,
ajoutez $fa-font-path : et
puis entre guillemets, mettez../node_modules/font-awesome/fonts.
Donc, nous spécifions le chemin de police pour nos fichiers de police impressionnants ici.
Ensuite, ouvrez le fichier Styles.scss,
, puis dans le fichier Styles.scss,
nous allons ajouter quelques lignes là.
Tout d'abord, nous allons importer les variables que nous venons de déclarer en disant @import,
et entre guillemets variables,
puis nous allons importer les fichiers font-génial là-bas,
alors nous dirons
@import../node_modules/font-awesome/scss/font-awesome. Nous importons la version SCSS
parce que nous utilisons SCSS dans notre application angulaire.
Une fois que nous avons modifié les styles pour le fichier CSS,
enregistrons les modifications.
À ce stade, nous pourrions avoir besoin de redémarrer
notre serveur qui servait notre application angulaire.
Donc, lorsque vous avez tapé le service NG,
vous pouvez arrêter le serveur qui sert votre application angulaire et
le redémarrer afin qu'il inclue ces nouvelles modifications qui ont été apportées.
Alors, en allant sur mon terminal,
Je vais arrêter mon serveur,
puis redémarrer le serveur afin qu'il tienne compte du changement que j'ai fait.
Vous verrez l'état actuel de
notre application angulaire en la regardant dans le navigateur.
Donc, c'est ce que nous avons dans notre application angulaire.
Je veux pouvoir ajouter un en-tête et un pied de page à
cette vue afin que je puisse utiliser à la fois l'en-tête et le pied de page,
et ensuite le contenu réel entre l'en-tête
et le pied de page de la façon dont je construis mon application angulaire.
Donc, pour ce faire,
Je vais créer deux nouveaux composants appelés en-tête et pied de page,
et les laisser gérer leur partie de l'écran qui leur est allouée.
En allant à l'invite, permettez-moi de générer un nouveau composant d'en-tête.
Je peux même dire ng g,
qui est suffisant pour que la CLI angulaire reconnaisse qu'elle veut générer un composant.
Donc, je dis ng g en-tête de composant,
et aussi ng g pied de page de composant.
Donc, maintenant, j'ai deux composants qui sont disponibles pour moi
pour utiliser dans mon application angulaire.
Comment vais-je utiliser ces deux composants ?
Passons au fichier App component.html,
, puis utilisons ces deux composants dans la façon dont nous
composons l'écran entier pour notre application angulaire.
En revenant à notre application,
nous voyons que le fichier app module.ts
inclut déjà l'en-tête et le composant de pied de page
et ils ont déjà été inclus dans les déclarations ici.
C'est donc l'avantage d'utiliser la CLI angulaire,
il prend soin de tout ce travail de base pour
vous afin que vous puissiez vous concentrer sur la construction de votre application angulaire.
Donc, c'est la raison pour laquelle j'aime la CLI angulaire
comme une approche pour construire mon application angulaire.
Alors maintenant, allons au fichier HTML des composants de l'application.
Donc, ici, vous voyez que nous avons inclus le menu de l'application là-bas.
Je vais supprimer cette barre d'outils de mon fichier HTML de composants d'application.
Cette barre d'outils fera partie du modèle d'en-tête de mon composant d'en-tête.
Donc, à la place mon fichier
de composants d'application ne contiendra que l'en-tête et le pied de page en bas.
Donc, vous voyez que maintenant,
nous avons les vues des trois composantes.
L'en-tête, le menu,
et le pied de page occupant tout l'écran.
Donc, ces trois composants obtiennent ces parties de l'écran pour eux-mêmes.
Sauvegardons les modifications et jetez un coup d'œil à notre application dans le navigateur.
Aller à l'application dans le navigateur,
vous voyez maintenant que l'en-tête a déjà occupé il est
partie de l'écran là-haut, et évidemment,
depuis que nous venons de préparer le composant,
il dit juste en-tête fonctionne,
et puis en bas ici,
le pied de page a également pris sa place dans la page de l'écran.
Maintenant, nous allons maintenant aller de l'avant et mettre à jour les modèles pour l'en-tête et le pied de page
afin que nous puissions bien définir notre interface utilisateur pour notre application angulaire.
Commençons le travail sur notre pied de page.
Donc, pour commencer sur le pied de page,
allons dans le fichier de modèle du pied de page,
et ensuite nous allons le remplacer par le nouveau modèle du pied de page.
Maintenant, pour votre commodité,
J'ai fourni le code pour vous dans les instructions.
Il sera sage de copier le code entier à partir de là,
et ensuite de le coller ici.
Ensuite, examinez ce que fait ce pied de page.
Donc ici, vous voyez que j'ai collé dans le code pour mon modèle de pied de page.
Maintenant, je vais revenir à ce code un peu plus tard.
Si vous avez fait le cours précédent sur Bootstrap,
vous verrez que c'est la manière matérielle angulaire d'implémenter
le même type de structure pour le pied de page que nous avons fait dans le cours Bootstrap.
Certaines de ces choses seront déjà reconnaissables pour vous,
mais laissez-moi terminer la mise à jour du modèle de pied de page,
et ensuite nous ajouterons quelques codes SCSS dans mon fichier de pied de page Component.SCSS,
et ensuite jeter un oeil à la façon dont le pied de page se forme maintenant.
Donc ici, j'ai de nouveau collé dans le code
des instructions d'exercice qui suivent cette vidéo,
pour montrer les différentes classes SCSS que j'ai ajoutées dans mon pied de page.
Donc, j'ai quelques classes que j'ai définies ici,
Je vais les utiliser pour définir une partie de mon pied de page,
et puis de même classe de pied de page ici,
et j'ai un mélange SCSS ici,
et quelques variables ici qui
définissent différentes couleurs que je vais utiliser dans mon angulaire application.
Alors, sauvegardons les modifications que nous avons apportées.
Jetons un coup d'oeil au pied de page dans son incarnation actuelle,
et puis nous reviendrons visiter rapidement le code que j'ai inclus à la fois
dans le fichier de modèle de composants de pied de page et le code SCSS ici.
En allant à notre application angulaire dans le navigateur, wallah,
là vous avez le nouveau pied de page pour notre application angulaire.
Donc, vous pouvez voir que j'ai quelques choses ici.
Ceux-ci sur le bord gauche sont les différents liens
vers diverses pages qui vont faire partie de mon application Angular.
Nous allons voir comment nous le faisons dans le cadre des prochains exercices.
Maintenant, ici, je fais usage du composant bouton que
fait partie du matériel angulaire pour définir ces liens ici,
puis j'ai l'adresse ici,
et puis j'utilise aussi à nouveau des boutons pour définir cette séquence
de boutons pour les différents liens de médias sociaux pour mon restaurant ici.
Donc, vous pouvez voir que j'ai tout ça.
Pour les créer, j'utilise
le support matériel angulaire pour les petits boutons d'action flottants ici,
et cela donne une belle structure pour cela.
Si vous avez vu la version Bootstrap de ceci,
Je l'aime beaucoup mieux que la version Bootstrap que j'ai créée dans le cours précédent.
Donc, notre pied de page est maintenant bien en place.
Regardons rapidement une partie du code dans le pied de page.
Maintenant, je ne vais pas expliquer cela dans beaucoup de détails parce que c'est à
traiter plus avec le matériau angulaire que Angular lui-même,
mais en chemin en regardant simplement la structure du code,
vous commencerez à voir comment
ces composants angulaires peuvent être utilisés pour définir quelque chose comme ça.
En allant au composant de pied de page,
vous voyez que j'ai un div externe ici pour lequel j'ai spécifié une disposition angulaire,
attributs de disposition flex ici,
donc je dis que la ligne FxLayout,
, puis FxLayout sm et xs à être colonne.
Donc, pour les petites et extra petites tailles d'écran,
va positionner tout le contenu comme des colonnes,
mais pour les tailles d'écran plus grandes,
il va les positionner comme ligne.
Donc, c'est ce qui me donne la belle structure pour mon pied de page.
Comme vous le voyez dans la div de l'interface utilisateur,
Je positionne tout le centre de contenu ici,
et ci-dessous ici,
Je définit le premier.
Donc, cette torsion mathématique ici que j'utilise définit mes liens ici.
Donc, dans ce, j'utilise mat comme composant de matériau angulaire,
et à l'intérieur, j'utilise le a avec
l'attribut de composant de bouton mat attribué à a pour créer ces boutons ici.
Plus tard, je vais revenir et ajouter
le code réel pour ces liens dans les exercices suivants ici.
C'est ce qui m'aide à créer la liste des liens sur le côté gauche.
C'est l'adresse que vous voyez,
c'est assez simple à regarder.
Donc, c'est un div pour lequel j'utilise FxFlex avec 50,
et l'autre avec FxFlex avec 40.
Donc, 40 signifie 40 pour cent et 50 pour cent,
et ici j'utilise FxFlex offset 20 pixels.
Donc, il déplace ce contenu à droite de 20 pixels.
Donc, il me reste un espace de 20 pixels sur le côté gauche pour
cette div particulière contenant ces liens ici.
Puis enfin ci-dessous,
J'ai cet ensemble de liens que je fais pour
créer la barre avec tous les liens de médias sociaux là-bas.
Donc, j'utilise un avec le bouton icône mat ici.
Donc, c'est ce qui crée les boutons arrondis que vous voyez dans le pied de page là-bas.
Maintenant, pour chacun de ces éléments,
J'applique la classe correspondante ici.
Donc, vous pouvez remarquer que le bouton Google Plus, bouton Facebook,
toutes ces classes sont définies dans mon fichier SCSS là-bas,
où j'ai spécifié les couleurs pour l'arrière-plan et ainsi de suite pour cela,
de sorte qu'il corresponde au schéma de couleurs typique que ces sites de médias sociaux utilisent.
Alors, passez un peu de temps à regarder ce code ici,
et puis vous aurez rapidement une idée de la façon dont le pied de page a été conçu.
De même, aller aux composants du pied de page code Sass ici,
afin que vous puissiez voir que j'ai défini différentes couleurs ici.
J'utilise un mélange avec la marge mise en place ici,
et puis pour mon pied de page,
je définit la couleur de fond de manière appropriée,
et remarque les différentes classes que je définit ici
un bouton Facebook pour lequel la couleur et
la couleur de fond que j'ai définie pour chacun d'eux.
Donc, que la couleur correspondante de
ce site de médias sociaux est utilisée comme couleur d'arrière-plan pour chacun de ces sites.
Maintenant, dans le cours Bootstrap plus tôt,
J'avais utilisé le Bootstrap Social pour réaliser la même chose.
Cela ne fonctionne pas très bien avec le matériau Angular,
donc c'est pourquoi je viens de créer mon propre ensemble de lunettes Sass ici,
et puis ajouter le code que j'ai besoin pour créer ces boutons là.
Si vous avez besoin d'ajouter plus de boutons,
alors créez simplement plus de classes comme celles-ci correspond à
les boutons que vous voulez ajouter dans votre application.
Donc, cela construit notre pied de page.
Maintenant, l'en-tête est la prochaine partie que nous allons cibler.
Aller à l'en-tête, va ouvrir le fichier de modèle de composants d'en-tête
et vous voyez ce qu'il contient.
Nous allons remplacer ceci par
le modèle que j'ai donné pour vous dans les instructions qui suivent ici.
Alors, allez-y et coupez et collez ce code ici,
parce que cela n'a rien à voir avec angulaire.
Donc, c'est pourquoi je vous permet juste de couper et coller le code directement à partir de là,
nous fait gagner du temps.
Vous pouvez voir que j'ai maintenant remplacé le modèle d'en-têtes par du code ici.
De même, pendant que nous y sommes,
, nous allons également ajouter du code SCSS pour mon fichier Header.components.scss ici,
juste aller et copier le code des instructions.
De même, pendant que nous y sommes,
nous ajouterons quelques classes SCSS à mon fichier principal Styles.scss.
Donc, dans ce fichier principal Styles.scss,
, je vais ajouter des sous-couleurs et quelques classes supplémentaires dans ce fichier.
Alors, collons le code des instructions que je vous ai données.
Donc, la mise à jour du fichier Styles.scss est maintenant terminée,
donc j'ai ajouté quelques couleurs ici et mélangé là,
et puis en bas j'ai ajouté quelques classes supplémentaires ici qui
m'aide quand je conçois mes modèles pour mon application angulaire.
Donc, tous ces changements,
sauvegardons les changements,
jetez un coup d'œil à mon en-tête maintenant dans l'application,
et ensuite nous reviendrons et revisiterons rapidement le code que nous venons d'inclure ici.
En revenant à mon application Angular dans le navigateur,
vous voyez maintenant la barre d'outils réapparaît dans l'en-tête ici,
avec quelques liens dans
là, puis une image représentant le logo de mon restaurant,
et puis ici, vous avez quelque chose que nous utilisons le fichier jumbotron dans le précédent Bien sûr.
Je vais juste utiliser une classe appelée jumbotron pour créer ce
dans l'application Angular aussi,
donc ici sur le côté gauche j'ai les informations de mon restaurant et
le logo du restaurant et m'ai laissé un peu d'espace ici pour ajouter quelque chose à l'avenir.
Donc, ici, vous voyez mon application prendre forme avec un en-tête,
avec quelques liens là-dedans.
Maintenant, nous allons utiliser ces liens dans
les prochains exercices pour configurer mon application Angular,
puis le menu assis entre et puis en bas ici mon pied de page.
En allant à mon fichier de modèle de composants d'en-tête,
vous pouvez maintenant voir comment j'ai créé la barre d'outils avec les boutons supplémentaires ici.
Donc, vous vous souvenez que nous avions la barre d'outils
déjà utilisée dans le fichier de modèle de composants d'application,
Je l'ai coupé à partir de là et utilisez plutôt la barre d'outils dans le modèle d'en-têtes ici.
Maintenant, à l'intérieur de cette barre d'outils,
J'ai inclus quelques liens avec la classe de boutons qui lui est appliquée et c'est ce que
me permet de créer ces liens dans la barre d'outils comme un menu pour mon application web.
Ci-dessous, j'ai créé un div avec le conteneur de classe et jumbotron.
C'est la raison pour laquelle j'ai ajouté le conteneur et les classes jumbotron dans mon fichier SCSS,
afin que je puisse les utiliser dans mes modèles ici.
Donc, pour lequel encore une fois,
j'applique et quelques attributs de mise en page flex ici pour m'aider à concevoir l'écran là.
Ensuite, vous pouvez voir comment j'ai utilisé quelques divs ici avec
l'attribut FxFlex appliqué en conséquence pour créer l'interface utilisateur,
pour mon application ici.
Alors, passez un peu de temps ici pour jeter un coup d'oeil à ce code ici pour
comprendre rapidement comment ma mise en page pour mon modèle d'en-tête a été créée.
Ce n'est pas si compliqué,
une fois que vous avez terminé le cours Bootstrap,
ce n'est pas si difficile à comprendre.
En chemin, vous apprenez également la disposition du flex angulaire, puis
aussi les composants du matériau angulaire ici.
En allant au fichier SCSS pour le composant d'en-tête,
vous pouvez voir que j'ai ajouté quelques couleurs ici, puis un mix
dans et ensuite ajouté dans une classe jumbotron ici.
Maintenant, la classe de conteneur n'est pas ici,
la classe de conteneur est dans le fichier de styles principaux.
Parce que la classe de conteneur est quelque chose que je vais utiliser
pour beaucoup de modèles là-bas.
Donc, c'est pourquoi, j'ai ajouté dans la classe conteneur au fichier Styles.scss
qui est le fichier commun pour toute mon application angulaire.
Donc, là, j'ai ajouté quelques couleurs supplémentaires ici,
et aussi j'ai créé un mélange ici,
puis ajouté dans le conteneur,
le fond primaire, et les couleurs d'accent de fond,
et puis j'utilise également une autre classe appelée flexes spacer,
que je vais utiliser dans l'un des exercices ultérieurs.
Toutes ces étapes sont en préparation pour ce qui va à
venir dans les prochains exercices.
Mon application Angular a maintenant pris une bonne forme en termes de la façon dont l'interface utilisateur est disposée,
afin que je puisse maintenant commencer à introduire beaucoup plus de nouvelles fonctionnalités pour angulaire.
En payant une visite de plus à mon application Angular dans le navigateur,
me laisse voir à quoi ressemble cette application dans différentes tailles d'écran.
Donc, c'est la taille standard de l'écran de bureau,
donc passons à une taille d'écran plus petite et voyons à quoi ressemble l'application.
Donc, il s'agit d'une taille d'écran iPhone 6 Plus,
afin que vous puissiez voir comment la disposition est différente pour la taille d'écran plus petite.
Donc, mon en-tête est juste en haut et mon menu en bas et le pied de page ici,
remarque comment les différentes parties du pied de page ont été
disposées différemment pour la taille de l'écran extra petite.
C'est la même application en mode paysage ou un iPhone 6 Plus,
afin que vous puissiez voir que mon en-tête est aménagé comme ça et le menu là-bas et le pied de page.
Donc, cela vous montre que j'ai tiré parti de la disposition de flex angulaire
pour pouvoir créer différentes mises en page pour différentes tailles d'écran.
Donc, encore une fois, si vous avez suivi le cours Bootstrap plus tôt,
vous commencerez à voir comment le design réactif avec
la disposition de flex angulaire peut également être utilisé pour obtenir des résultats similaires.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons préparé notre application Angular et l'avons préparé pour le reste des exercices de ce cours.
C'est aussi le bon moment pour vous de faire un commit git avec l'en-tête et les pieds de page du message.