Dans l'exercice précédent,
nous avons échafaudé notre première application Angular de base.
Comme je l'ai mentionné, nous allons travailler sur cette application Angular et la développer encore
tout au long du reste de ce cours.
Maintenant, avant de commencer à travailler sur notre application Angular,
configurons notre application Angular pour utiliser quelques modules supplémentaires,
qui nous permettent de concevoir les modèles pour notre application Angular.
Nous allons utiliser le module de matériau angulaire pour concevoir les mises en page de l'interface utilisateur.
Le module Angular Material nous fournit un certain nombre de composants de mise en page intéressants
que nous pouvons utiliser dans la conception de nos modèles de composants Angular.
De plus, nous utiliserons la disposition flex qui est basée sur la disposition flex CSS,
qui nous permet de faire un design réactif dans notre application Angular.
Donc, dans cet exercice,
, nous allons faire ces configurations.
En cours de route, nous apprendrons notre première brève connaissance des composants,
avant même d'examiner les composants plus en détail dans la prochaine leçon.
Pour commencer, commençons notre voyage par une visite rapide au fichier app.component.ts.
C'est le fichier desservant
le composant racine qui fait partie de notre application Angular.
Maintenant, en regardant ce composant racine,
il y a quelques choses qui deviendront très claires pour vous même sans beaucoup d'explications.
La première chose sur laquelle je voudrais attirer votre attention est cette déclaration d'importation.
Comme vous pouvez le voir, il s'agit d'importer la classe de composant à partir de la bibliothèque de noyau angulaire.
Ensuite, nous préparons notre classe AppComponent ici,
et exportons cette classe.
Donc, dans cette classe AppComponent que nous avons déclarée,
nous avons une variable que nous avons déclarée ici appelée title,
qui est actuellement assignée à être une chaîne.
Maintenant, en regardant rapidement cette variable,
vous commencez immédiatement à vous demander,
comment est-ce lié à ce que nous avons vu dans le navigateur,
quand vous avez vu notre application Angular affichée dans le navigateur,
l'application Angular affichait exactement ces mots dans le navigateur.
En effet, cette variable joue un rôle important dans
à venir avec la vue que vous avez vue dans notre navigateur.
Maintenant, en plus, vous voyez aussi que
cette classe de composant est ajoutée avec un décorateur ici.
Encore une fois, c'est un autre décorateur que vous rencontrerez dans Angular.
Donc, ceci comme nous le voyons est un décorateur de composants.
Le décorateur de composant prend en interne un objet JavaScript comme paramètre ici,
et la première propriété que vous voyez ici appelée selector : app-root.
Maintenant, si vous vous souvenez quand nous avons regardé le fichier Index.html,
nous avons vu que nous y avons inclus un élément appelé app-root.
Maintenant, vous commencez à voir d'où provient cette racine d'application.
Donc, c'est le sélecteur pour le composant que nous déclarons ici,
qui est utilisé dans notre classe de modèle pour spécifier où
la vue correspondant à ce composant doit être affichée dans le navigateur.
La deuxième propriété que vous définissez ici est TemplateURL.
Cela pointe vers un fichier,
un fichier HTML comme vous pouvez le voir,
qui contient le modèle correspondant à ce composant particulier.
Modèle qui définit la vue de ce composant.
La troisième propriété que vous définissez ici comme vous pouvez le voir, dit, StyleURL,
qui, comme vous le remarquez ici, est affectée au fichier app.component.scss.
Donc, ce fichier devrait contenir tout le code scss qui peut être
utilisé pour le style CSS pour notre modèle de composants.
Donc, il s'agit d'une visite rapide au fichier app.component.ts.
Maintenant, allons au fichier app.component.html,
et jetez un coup d'œil au modèle.
Allez dans le fichier App.component.html,
vous voyez que ce fichier app.component,
le code HTML contient ici juste une balise h1 avec quelque chose ici avec une double accolades.
Maintenant, évidemment, ce n'est pas quelque chose auquel vous êtes habitué à partir de vos connaissances du HTML,
, CSS ou JavaScript que vous avez vu auparavant.
Ceci est la syntaxe angulaire.
C'est ce que nous appelons l'interpolation.
Ceci utilise la liaison de données unidirectionnelle de l'Angular.
Je vous jette quelques termes en ce moment.
Tenez ces termes, nous reviendrons à les examiner en
plus en détail dans les leçons restantes de ce cours.
La première chose comme je l'ai mentionné est l'interpolation,
la seconde que j'ai mentionnée est la liaison de données unidirectionnelle.
Aussi, vous voyez immédiatement qu'il s'agit de la variable que vous avez vue dans le compagnon, le fichier
TypeScript, qui définit le code TypeScript correspondant au composant App.
Donc, une fois que vous spécifiez quelque chose comme ceci ici,
l'implication est que quelle que soit la valeur de ce titre sera substituée en place
ici et sera utilisée comme code HTML interne pour cette balise h1 ici.
C'est le but de l'inclure ici.
Nous allons maintenant installer quelques uns des
autres modules de relation angulaire qui nous permettront de concevoir des modèles.
Ensuite, nous reviendrons à ce fichier App.component.html.
Puis redessinez ce modèle un peu plus tard dans cet exercice.
Afin de nous aider à concevoir des vues réactives dans notre application Angular,
, nous allons prendre l'aide de quelques modules associés
pour Angular appelés module de matériau angulaire.
Le module Matériaux angulaires nous fournit un certain nombre de composants.
Composants Layout que nous pouvons utiliser dans la conception
de nos nouveaux modèles pour nos composants Angular.
Le module Matériel angulaire si vous voulez comparer cela est un peu comme ce que Bootstrap
nous a fourni pour la conception de nos pages Web que nous avons examinées dans le cours précédent.
Aussi, j'utiliserai un autre module appelé comme module de disposition flexible angulaire.
Le module Flex Layout fournit un support pour l'utilisation de CSS
Flex layout dans nos modèles Angular pour nos composants Angular.
Maintenant, ces deux modules doivent être explicitement installés
puis importés dans notre application Angular,
c'est ce que nous allons faire à l'étape suivante.
Mais avant d'aller de l'avant,
une question que vous pourriez vous demander est,
pourquoi ne pas utiliser Bootstrap pour faire la conception des modèles pour notre application Angular ?
En effet, vous pouvez également utiliser Bootstrap pour concevoir les modèles de notre application Angular.
Mais vous ne pouvez utiliser
que la partie des composants CSS de Bootstrap dans votre application Angular.
Les composants basés sur jQuery.
Les composants JavaScript ne peuvent pas être explicitement utilisés, il peut y avoir des conflits
entre les composants basés sur jQuery de Bootstrap et le code Angular lui-même.
Donc, il est préférable d'éviter d'utiliser les composants JavaScript de Bootstrap
au cas où vous choisiriez d'utiliser Bootstrap comme moyen de concevoir vos modèles Angular.
Mais d'un autre côté,
J'ai aussi pensé que cela nous fournirait une bonne occasion d'apprendre à obtenir
un autre cadre de mise en page de l'interface utilisateur qui est le cadre matériel angulaire.
Donc, c'est la raison pour laquelle j'ai choisi d'utiliser le framework de matériau Angular
et la mise en page Angular flex dans ce cours particulier.
Maintenant, en passant par le reste de ce cours,
, je n'expliquerai pas explicitement comment utiliser
les composants de matériau angulaire ou comment utiliser le Flex-Layout angulaire.
Au lieu de cela, nous allons les apprendre en regardant des exemples.
Nous allons utiliser ces deux,
à la fois les meilleurs composants de matériau angulaire et le support angulaire Flex-Layout,
lorsque nous concevons nos modèles pour nos composants angulaires dans ce cours particulier.
Donc, par le processus d'utilisation de ces composants,
vous apprendrez également en cours de route,
à utiliser à la fois le matériau angulaire et
Flex-Layout angulaire dans votre application angulaire.
Je pensais qu'en faisant les exercices,
vous apprendriez beaucoup plus sur le Matériel Angulaire.
Maintenant, pour expliquer les aspects conceptuels de la raison pour laquelle les composants de matériau angulaire
fonctionnent comme ils le font ou comment Grid fonctionne par exemple,
ou comment une conception réactive fonctionne,
nous avons déjà examiné certains de ceux dans le cours précédent sur Bootstrap.
Ainsi, les mêmes concepts viendront aussi à notre secours.
Au lieu de cela, nous examinerons la mécanique de l'utilisation à la fois du matériau angulaire et
de la flex-mise en page angulaire dans notre application angulaire dans ce cours particulier.
Pour commencer à utiliser un matériau angulaire,
bien sûr, la première chose que vous devez faire est d'installer le module matériau angulaire.
Donc, à l'invite tapez npm install —save @angular /material.
Donc, comme vous pouvez le voir,
nous spécifions tous les modules de relation angulaire avec le @angular,
donc vous verrez aussi la même chose pour le Flex-Layout.
Nous installons la version 6.4.7 du module de matériau angulaire.
De plus, le module matériel nécessite l'installation de CDK.
Donc, nous allons également installer cela en faisant
npm installer @angular /cdk @6 .4.7 —enregistrer,
et installer cela avec Angular Material.
Donc, Angular Material utilise le cdk angulaire pour ses composants.
De plus, lorsque vous utilisez le matériau angulaire,
vous devez également importer le module d'animations angulaires dans votre application angulaire.
A partir de la version 4 Angular,
le support de l'animation Angular a été extrait
des modules de base dans son propre module séparé.
Donc, ce qui signifie que si vous devez
faire usage d'animations dans votre application Angular,
vous devez installer explicitement le module Angular animations.
Alors, allons de l'avant et installons ça aussi.
Donc, vous direz
npm install —save @angular /animations @6 .1.7.
Aussi, un autre module que j'installerai
ensemble s'appelle HammerJS.
Le module HammerJS est utilisé par Angular
pour supporter certains gestes dans votre application Angular.
Donc, c'est la raison pour laquelle nous installons HammerJS aussi dans notre application,
et la version actuelle de HammerJS que nous utilisons est 2.0.8.
Maintenant, nous avons installé tout ce dont nous avons besoin
pour le module de matériau angulaire à utiliser dans notre application Angular.
Ensuite, je vais passer à installer
l'Angular Flex-Layout dans mon application Angular.
Donc, pour ce faire, je pad l'invite
npm install —save @angular/flex-layout
et nous allons installer la dernière version de cela.
Donc, maintenant que nous avons toutes les pièces dont nous avons besoin pour notre application Angular installée,
allons de l'avant et ensuite configurer notre application Angular pour faire
usage de ces nouveaux modules que nous avons installés dans notre application Angular.
La première chose que nous allons faire est d'aller dans le fichier index.html,
et ensuite nous allons configurer le fichier index.html pour utiliser les icônes de matériau angulaire.
Donc, pour inclure les icônes de matériau angulaire afin qu'elles puissent être utilisées
dans les modèles de votre application angulaire, donc,
laissez-moi y aller dans la tête d'index.html,
, puis créer un nouveau lien avec
href= » https://fonts.googleapis.com/icon?family=Material+Icons "et ceci est un feuille de style.
Donc, avec cela, je peux maintenant utiliser les icônes de matériau angulaire dans
mon application angulaire partout où je choisis de le faire dans les modèles.
L'étape suivante consiste à passer à l'app module.ts et
puis à importer les trois modules que nous venons d'installer.
Donc, le premier que je vais importer est appelé
le BrowserAnimationsModule que je vais importer à partir de
@angular /platform-browser/animations. Donc, maintenant le prochain
que je vais importer est le MaterialToolBarModule.
Donc, cela importe le module @angular /material/toolbar
qui peut être utilisé dans nos modèles d'applications Angular.
Donc, Angular Material, et aussi importer
le FlexLayoutModule de @angular /flex-layout.
Donc, une fois que nous avons tous ces modules importés, un changement supplémentaire que je dois faire
est- oh laissez-moi aussi importer Hammer.js tant que je suis là.
Alors, laissez-moi importer
Hammer.js dans mon application.
Et une fois que j'y suis,
l'autre changement que je dois faire est d'inclure également
ces modules dans les entrées du décorateur de module NG ici.
Donc, je vais y aller et dire module navigateur,
module animations navigateur là et puis après le module HTTP,
Je vais importer le module de barre d'outils matériel et aussi le module de mise en page flex
dans le cadre des entrées à l'intérieur du décorateur de module NG pour mon module application.
Donc, avec cela toutes mes configurations pour utiliser le module de la barre d'outils matérielle et
le module de disposition flexible angulaire et avec
le module d'animations en angulaire est terminé.
Maintenant, nous allons entrer dans le modèle de composants et utiliser
notre premier composant de matériau angulaire dans la conception de la mise en page
pour notre composant d'application applications.
Aller au fichier de modèle de composants d'application,
Je vais le remplacer maintenant par
un composant matériel angulaire
appelé mat-toolbar.
Donc, le mat-toolbar me permet de concevoir
une barre d'outils que je peux utiliser dans mon application angulaire.
Barre d'outils généralement affichée en haut de votre page dans votre application.
Donc, pour cette barre d'outils, je vais spécifier la couleur comme primaire.
Nous verrons ce que cela signifie dans un court laps de temps.
Et nous fermerons aussi cette barre d'outils MD ici.
Maintenant à l'intérieur de ceci, je vais utiliser un span avec
le nom de mon restaurant pour lequel je conçois ce site web.
Donc, Ristorante Con Fusion.
Maintenant, vous voyez pourquoi j'ai nommé ce dossier comme Confusion.
Alors, quelle est la mise à jour que nous devons faire pour le fichier HTML du composant de l'application.
Pendant que nous y sommes, nous allons également inclure quelques mises à jour SCSS de mon fichier Styles.scss.
Donc, si vous allez dans votre code ici,
vous trouverez ce fichier Styles.scss ici.
Donc, c'est là que vous pouvez inclure tous les styles globaux dans
ce fichier et cela sera disponible pour tous les composants à utiliser.
Chaque composant a ses propres fichiers SCSS où vous pouvez inclure le composantPersonnalisation de niveau
ou code SCSS de niveau
du composant à utiliser dans ce composant spécifique.
Nous utiliserons les deux approches dans
cette application angulaire que nous développons dans ce cours.
Mais en ce moment, je vais mettre à jour le fichier principal Styles.scss
avec du code qui sera utile pour toute mon application angulaire.
La première chose que je vais faire,
est d'importer un thème préconstruit qui est disponible via le matériel angulaire.
Ce thème préconstruit en matériau angulaire nous fournit un moyen de spécifier
certaines couleurs et la façon dont certaines choses sont disposées
dans mes composants de matériau angulaire.
Les couleurs qui seront disponibles via le cadre préconstruit notre couleur principale,
la couleur d'accent, et la couleur d'avertissement.
Maintenant, le thème spécifique que je vais utiliser est appelé violet profond.
Donc, dans ce cas, la couleur primaire sera violet profond.
La couleur d'accentuation sera ambre et la couleur d'avertissement sera rouge dans ce cas.
Maintenant, vous pouvez construire vos propres thèmes matériels angulaires que
vous pouvez utiliser dans votre application, mais je vais
laisser cela comme un exercice pour vous d'explorer vous-même.
En ce moment, dans mon application angulaire, je vais utiliser un
des choses préconstruites appelées ambre violet profond.
Donc, pour le faire en allant dans le fichier Styles.scss,
, je vais importer
matériau angulaire
thèmes préconstruits violet profond amber.css.
Donc, ce thème préconstruit que je vais utiliser dans mon application angulaire.
Vous verrez bientôt comment ce thème préconstruit fonctionne dans
l'application angulaire dans les modèles que nous avons conçus pour notre application angulaire.
De plus, je vais configurer certaines propriétés pour
mon corps de la page index.html donc je vais spécifier le remplissage comme zéro,
marge comme zéro, puis la famille de polices que j'utiliserai est rubato ou sans empattement dans mon application.
Vous pouvez choisir d'utiliser ce que vous voulez dans vos applications angulaires.
J'ai choisi d'utiliser ces deux dans mon application angulaire.
Sauvegardons les changements,
et allons-y jeter un coup d'œil à notre application angulaire dans le navigateur.
Avant de faire cela,
assurez-vous que votre service NG fonctionne dans
une des fenêtres de terminal de votre ordinateur.
Le serveur de développement doit fonctionner en continu afin qu'il fasse automatiquement la décompilation
et charge
la version mise à jour de l'application angulaire dans la fenêtre du navigateur.
En allant dans le navigateur,
vous voyez maintenant les changements que nous avons apportés à
l'application angulaire reflétée dans la vue dans
mon navigateur afin que vous puissiez voir que nous avons maintenant une barre d'outils en haut avec
les libellés que nous avons inclus dans le fichier de modèle de composants d'application là-bas.
Et vous pouvez voir la couleur qui a été appliquée à la barre d'outils.
Donc la couleur, couleur primaire,
donc c'est la couleur pourpre profonde qui est appliquée à la barre d'outils.
Maintenant, le thème que nous avons défini ajoutera soit une couleur pourpre profond ou ambre,
selon ce qui est utilisé par les composants de matériau angulaire spécifiques
que nous utilisons dans nos modèles d'applications angulaires.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons configuré notre application angulaire pour utiliser
le matériau angulaire et la disposition angulaire flex.
Nous avons également utilisé
notre premier composant matériel angulaire dans le fichier modèle de composants d'application.
Et nous avons utilisé le thème intégré du matériau angulaire pour notre application angulaire.
Sauvegardez toutes les modifications et alors c'est le bon moment pour vous
de faire un commit git avec le message configurant angulaire.