Créez des applications Web impressionnantes en utilisant Angular 7

1. Bienvenue dans ce cours: angular est un cadre d'application Web open source ont vécu par Google et une communauté hors des individus et des entreprises. Si vous êtes familier avec notre cœur de la refonte angulaire de Jay, le nouveau Anglo DreamWorks est un lien complet de la même équipe qui construit des impulsions d'angle. À l'origine, cela a vraiment été appelé angulaire, aussi. Mais cela a conduit à la confusion parmi les développeurs pour gratifier l'équipe a annoncé que séparé fait devrait être utilisé pour chaque travail de cadre avec des prisons angulaires, référant orteil, les explosions étonnantes et angulaire souffrance orteil aggraver magasin nable. À partir de cet enregistrement, russe angulaire sept est le dernier. Une application angulaire est en bas abusant dactylographié, qui, vous pouvez dire est la vidéo la plus sophistiquée de Charles Strict. C' est bon pour nous. Certaines des régions de langue qui ne sont pas actuellement dans la spécification JavaScript doivent glisser. Mais puisque les protestations ne comprennent que la jupe Java, le Famer angulaire est livré avec un compilateur qui transforme vos types pourraient être appelés en un noyau JavaScript égal. Pour ces utilisateurs angulaires, les applications angulaires à droite sont étonnamment farce. Major vous conduit au concept d'applications payantes uniques sur SPE. Ceci est réalisé en utilisant un modèle de routeur alimenté par angulaire qui annulent ou composants paresseusement. Il s'agit avant tout d'une main sur, bien sûr, ce qui signifie que je vais vous montrer le processus de développement d'applications étape par étape à partir de zéro. Alors que j'utilise quelques exemples de base pour vous faire sentir à l'aise avec le concept, je vais également développer une liste complète pour une bonne application de tuyau orteil. Démontrer les principaux concepts hors angulaire. Sept. Tout le bien que j'ai développé dans ce cours est disponible pour vous de ne pas écrire, Installer et exécuter cette étape pour le faire sont montrés dans les conférences suivantes. Cependant, si vous voulez vous appeler ce que je recommande fortement, vous pouvez le faire en tapant avec moi et en mettant la vidéo en pause si nécessaire. Mon nom est vous savez, je suis un formateur plus doux, consultant développeur avec une expérience de plus de 20 ans dans l'industrie. Je vous souhaite la bienvenue à ce cours passionnant. Il y a beaucoup de choses à apprendre, alors commençons 2. Ce que vous êtes attendu de savoir ?: Comme angular est utilisé pour créer des applications Web, HTML devient la condition préalable numéro un pour suivre ce cours. Vous n'avez pas besoin d'être un maître dans le sujet, mais vous devez être conscient de certaines des attaques d'équipe de base pour créer des en-têtes. Dusan Spans a commandé d'autres listes, en insérant des images et des liens hypertexte. Je n'ai pas utilisé beaucoup de CSS dans ce cours, mais avoir une bonne idée de CSS vous aide à développer de belles applications Web pour le style. Nos applications Web réutilisent généralement quelques bons frameworks CSS, et dans ce cours, j'ai utilisé Twitter bootstrap CIA travail système. Si vous avez une idée à propos de la même chose, c'est fantastique. Mais je ne m'attends pas à ce que tu le saches. Où que j'utilise bootstrap, je vais expliquer à quoi ces classes CSS servent. Alors que HTML et CSS constituent la couche de présentation de l'ensemble des applications Web, la partie moteur de l'application est renvoyée en utilisant typescript. Pour toutes les raisons pratiques, nous pouvons considérer le manuscrit comme une extension de Charles Bridge, donc si vous avez une connaissance de base du javascript, vous êtes prêt à partir. Les principales caractéristiques, comme les fonctions Adam et les décorateurs seront expliquées au fur et à mesure que nous allons 3. Configuration du logiciel nécessaire: dans cette vidéo, je vais vous montrer l'ensemble de base de requis pour commencer avec une application angulaire . abord, nous avons besoin de Norges qui se dirige vers North Chester org et nous voyons quelques options ici . Il y a des idées. Le soutien à long terme se termine pour le dîner ou deux sur le combat Levin Dirt actuel ou zéro Onda. Pendant l'installation, vous pouvez trouver quelque chose sur votre lavage ici, alors cliquez dessus pour télécharger. Laisse-moi voir. Nous ne nous dérangons pas ce stock et ouvrons ce qui commence le processus d'installation. Cette installation est produite directement. C' est bon pour les options par défaut, ok ? Et c'est fait. Pas très loin, je peux aller aux pieds terminal sont Windows Command Brunt, Andi, chercher Northern Test Affliction et c'est son 11.5 point zéro. En insultant Norges, nous aurions également eu NPM à l'aide de laquelle nous pouvons installer le cadre angulaire nécessaire et ses dépendances sur le lavage destiné NPM et aussi vous assurer que quelque chose comme ça. 6.4 point un. Vous pouvez mettre à jour le NPM toe nouveau russe en tapant NPM mise à jour que g n, p m et sur les ordinateurs Mac. Vous pouvez vouloir utiliser Toe Sudo qui pourrait demander le mot de passe administrateur sur Windows dans B m du bureau. G indium est assez bon. Cela ne laissera pas la dernière russe hors npm d'Internet Onda fait que votre installation mondiale de cuisinier. Cela peut prendre quelques secondes, et une fois que c'est fait, une fois de plus, nous pouvons vérifier El Bien de stash russe. Andi devrait voir 6.550 maintenant. India Minutes North Package Manager utilisé pour l'installation de paquets globaux, frameworks et dépendances de projet au deuxième aspect hors pour les projets qui seraient d' installer angulaire. Maintenant, quand est l'angulaire angulaire est en fait un tas de libération de vol, Mais pour commencer avec un projet angulaire, nous avons peu d'options. Numéro un, si une bonne ressource ici, j'ai peu d'ID qui peuvent être utilisés pour créer un projet angulaire sur, et les idées prendront soin de toutes ces choses. Nous allons utiliser Visual studio court, mais ce qui est plus comme une litière supplémentaire, Mais c'est un très bon outil pour travailler avec angulaire. Mais il y a un fait à mettre pour plafond angulaire est l'interface de ligne de commande, ce qui nous permet de créer des produits angulaires rapidement. Andi a également beaucoup et beaucoup d'options de off pour US toe générer peu JavaScript ou texted core plus construire et déployer des applications ainsi. Donc on va utiliser ça. Et à cet effet, nous devons revenir à l'avant de la commande et installer la lumière de voir angulaire. Et pour ce faire, je mourrai tous sourds. G vous pouvez dire installé. Jack. Tachy sont Papa G. Instant n'a pas d'importance. Et puis je l'ai fait à Angulo. C' est l'année dernière. La vie. Andi. Si vous voulez spécifier un Washington particulier, vous pouvez dire à par défaut, il pointe au plus tard et encore, je suis un nécessaire à utiliser. Donc, en raison de l'installation de Dash G pour une installation régulière, vous n'avez pas besoin de l'option pseudo. Et cette fois, ce n'est pas le buster, parce qu'il suffit de demander précédemment. Et ce Seelye angulaire yeux un outil très utile, comme une mention qu'il pervertit beaucoup et beaucoup d'options. Pour commencer, il a une option pour créer un nouveau projet. Il a une option pour démarrer un serveur Web de développement et ainsi de suite. Donc très bien. Si les choses sont faites, nous pouvons taper n g death stash Washington dans GE est la commande qui a été installée lorsque nous avons fait l'installation angulaire CLI. Et ici, c'est la CIA angulaire, comme Washington, 7.1 point 4, ni la question de Jay, 11 points par 11.0.0 et peu d'autres lavages basiques sont listés ici, qui est ce que nous utiliserions. Bien qu'il y ait beaucoup d'idées disponibles, parmi les plus populaires, les idées probablement puissantes sont la pierre du Web, qui est une pierre commerciale. Il y a s'il y a aussi une idée intelligente, qui est principalement les hommes pour le travail, mais il est également utilisé pour le développement d'applications JavaScript. Il y a un infini angulaire par. Babic vit, donc les gens étaient familiers avec l'éclipse que c'est sur i d construire sur un clip. Donc, ce qui est aussi très agréable. Mais le plus couramment utilisé est le studio visuel Core, qui différent éditeur XT tastic pour plaisanter pour travailler avec le script de travail applications industrielles sur ce que c'est celui que nous utiliserions. Il est basé sur Microsoft Off Atom, sorte que vous pouvez visiter court dot visuel studio dot com. Onda a décidé avant est vos avocats et liste des êtres de téléchargement, donc j'ai déjà ceci. C' est une installation simple. Il suffit de télécharger ceci. C' est un fichier ZIP, décompressé et commencez à l'utiliser. Donc aussi simple que ça. 4. Comment utiliser des exemples ?: dans cette vidéo. Je vais vous montrer comment utiliser ce zip trouver que vous avez fait à ce sujet. Donc je dois les quitter ici, contre les acteurs et l'annuaire le kidnappe. La première chose que vous devez faire est de remorquer dézip. Dans mon cas, je peux juste double-cliquer dessus et il est extrait ici lui-même. Donc, j'ouvre un front de commande sur ce dossier particulier. Alors je l'ouvre. Dites-moi rien. Voyez la meilleure conversation, puis remontez. Si vous voyez le contenu de ce, vous verrez qu'il y a un très noyau emballé ou Jason, qui a beaucoup dépendant, est répertorié, installé les différences dans le paquet ou Jason que vous devez prendre dans la commande et b m en arrêt. Une fois l'installation terminée, vous pouvez plier une commande. Ng a servi le tableau de bord plein. Cela entraînera les développements. Il y avait et ouvre l'application dans votre défaut gelé. L' application est en cours d'exécution. Je peux cliquer sur l'incrément sont des boutons déterminés pour tester l'application. Fermez peut-être le navigateur. C' est le contrôle. Voir sur la guerre civile pour arrêter ça pour lancer l'application de l'annuaire téléphonique Une fois de plus, je vais passer sous la même chose et ouvrir une nouvelle 10 minutes. Donc, la ville dans le dossier de l'application et sous commande NPM sentir arrêter d'installer toutes les différences. Je sais que l'installation est vraiment nous allons voir comment exécuter cela. Contrairement à l'application précédente, celui-ci dépend d'un point de terminaison de repos, qui, si vous vérifiez les torches de package, il y a une commande. Maïs Jason, Monsieur, ont été ajoutés, ce qui commence un Jason. Il y avait à 43 double zéro numéro de port, qui lit les données de la barre oblique DB plus tard Jason. Donc, la façon dont vous pouvez le faire est par n'importe quel PM exécuter Jason Server, et cela va exécuter le point de restaurant à ce Yuanan particulier. Et maintenant je peux ouvrir un autre front de commandement ou je peux ouvrir dans votre ville par communauté de prison. Et puis je peux dire dans geezer Dash plein, Non, Non, l'application est en cours d'exécution. Je peux être la liste des contacts. Je peux cliquer sur n'importe quelle personne de contact en particulier, et il le sont. Je peux aller à notre nouveau contact et essayer d'ajouter à votre interlocuteur aussi 5. Qu'est-ce que l'angulaire ?: angular est l'un des cadres les plus populaires pour la construction d'applications clientes. Contrairement aux jours angulaires d'origine, le nouvel angulaire utilise typescript pour développer des applications avec HTML et CSS. Les blocs de construction de base d'une application angulaire se composent de directives de composants, tuyaux sur injectables, qui sont également connus sous le nom de compétence de services. Vues définies, qui sont définit les éléments d'écran avec votre programme. Les directives de logique et de données sont des amateurs de contrôle de l'apparence et du comportement des éléments HTML . tuyaux, Lestuyaux, d'autre part, sont utilisés pour transformer les données de composants en différents formats, par exemple, et où la valeur de chaîne en majuscules injectables sont des classes typées réutilisables qui défini la logique métier de vos applications Les services sont triangulaires de Singleton et généralement injecté tau composant triangulaire. Pour que nous puissions utiliser l'un de ces éléments dans notre application, nous devons les regrouper dans un modèle N G. Chaque pêcheur a un module grossier, classiquement nommé comme chez Marty. Cela fournit le mécanisme d'amorçage qui lance l'application. Typiquement, ce modèle importe d'autres modèles fonctionnels, organisant votre noyau en modèles distincts des modèles fixes, aidant à gérer le développement d'applications complexes et à concevoir pour la facilité d'utilisation. En outre, cette technique vous permet de prendre un chargement paresseux numérique qui charge les modèles à la demande pour minimiser la quantité de terrain qui doit être chargé au démarrage. 6. Créer notre première application avec Angular CLI: Maintenant que nous avons toutes ces mises en place de base requises, commençons par créer une nouvelle application angulaire. Maintenant, c'est là que vous devez décider. Nous voulons créer nos applications. Je voudrais créer mon application sur mon bureau et disons que je veux créer un nouveau projet. Les projets angulaires sont créés est en N. G. Donc, nous allons jeter un coup d'oeil il énergie bureau poubelle, santé orteil. Identifiez l'une des différentes options que nous avons. Et c'est cette liste des commandes disponibles sur leurs descriptions nettes, et vous pouvez prendre N G aide, suivie par des options Maintenant dans G nu est option donc je peux dire moteur vous aider et puis cela va me donner de l'aide sur la nouvelle option. Comme vous pouvez le voir, y a-t-il beaucoup d'options que nous avons. Mais la seule chose que nous avons à faire est le 1er 1 est le nom que nous devions donner, qui est le nom du nouvel espace de travail. Fondamentalement, ça va créer un dossier, qui est votre produit. Folder fait également cela comme votre projet par nom ainsi, et il y a peu d'autres options. Je ne pense pas. Toutes ces options sont enregistrées. Temps découragement. Allons-y et explorons ça. Alors prenez votre nouveau Benji sur Disons pour un cavalier d'abord nous pouvons changer le nom que vous voulez à l'avenir. Donc ça va te poser quelques questions. Juste deux d'entre eux. Numéro un, il a demandé. Qu' est-ce que tu veux ? Un eso arrondi ? Non. Maintenant, le routage est celui qui a écrit essentiellement dans le modèle de routage qui permet aux applications angulaires d'être des applications de tresse unique et le but entier hors. Les applications Web angulaires sont de créer des applications à un seul endroit. Les applications Single bit signifie essentiellement que vous avez un seul HTML trouve sur les lots et lots de fichiers partiels qui seront là sur les seigneurs du navigateur. Un seul fichier html sur tout le reste est chargé. Une application qui rend synchrone semble très riche en expérience. L' expérience utilisateur sera très agréable sur. Il y a beaucoup et beaucoup d'exemples aujourd'hui dans le monde que vous pouvez avoir un regard Il, y compris Gmail, Facebook et quelques autres. Nous ferions cela dans notre projet, donc malgré le temps, nous ne voulons pas interférer avec les orteils angulaires, mais nous serions en train de configurer manuellement ces informations de routage. Donc je vais simplement dire non, je ne veux pas que ce flottant soit ajouté. La deuxième question porte sur la feuille de temps. Je vais utiliser bootstrap pour ce projet particulier, qui est l'un des plus populaires que vous pouvez dire le framework CSS. Il est créé par Twitter. Andi sur C'est vraiment cool. Donc on va l'utiliser pour le laisser au CSS Chris Ender, et ensuite ça va créer le projet. Echafaudage aussi toutes sortes de trouve sa création. Parfois, ça peut sembler un peu intimidant, mais on va regarder en remorque. La plupart de ce qu'ils sont dans notre projet sur. Il exécute également ce que le NPM installe. Ce qu'il fait, c'est qu'il aurait créé un fichier appelé Package Dodgers. Et comme vous pouvez le voir, les médecins de paquet et est ici, le paquet commence. Jason est l'endroit où vous avez toute cette dépendance est répertorié, et c'est insultant. Tout le dépendant est actuellement cette dépendance est inclure quelque chose comme une élection de transfert de travail typé au JavaScript sont en train de construire. CS est-il qu'il y a un Jays Rx qui est utilisé pour les appels Http asynchrones, et il y en a beaucoup qui sont en stock maintenant. Une dépendance supplémentaire est comme bootstrap. Par exemple, nous pourrions devoir nous installer si vous voulez inclure notre requête J combinée avec l'angulaire. Vous pouvez le faire aussi bien ici et maintenant que ça l'a fait, nous pouvons ouvrir une guerre civile que je suis toujours sur mon bureau. Je dois entrer dans le dossier appelé comme premier sur la Théorie. D' abord, j'ai l'impression d'utiliser des visuels pour l'accord. Vous devriez être capable de dire pauvre orteil enseigné ouvrir ce dossier particulier dans votre éditeur. Sinon, vous pouvez toujours ouvrir visuel Studio Court et puis vous pouvez dire que je veux ouvrir ce fichier particulier. J' ai donc eu l'option de dossier ouvert ici. Cliquez dessus. Je vais sur mon bureau sur le bureau. J' ai eu cette première fois dire Ouvrir maintenant. Ici, nous pouvons jeter un oeil à toutes les autres découvertes qui sont générées. Puisque notre application angulaire est créée en utilisant typescript, qui est un super set off JavaScript, il a peu d'options ici. Ecrire les touches de peluches, et il s'agit essentiellement des règles et règlements à suivre. Lorsque vous travaillez avec le dactylographié sur, vous pouvez activer quelques options visibles de ce Jason particulier. Trouvez quelques-unes des règles de base, le conflit évident. Jason a essentiellement des informations telles que Où pensez-vous que le fichier de sortie devrait être créé ? Mais c'est si intelligent devrait être utilisé. Quelle est la cible à utiliser ? Cela signifie que si vous compilez vos trouvailles dactylographiées en JavaScript. Qu' est-ce que le lavage ? Un standard de transcription que vous voulez suivre afin que les roses plus anciennes obtiennent le soutien d'ici et ainsi de suite. A moins de calme, nous n'avons pas besoin de revenir ici du tout pour que nous puissions fermer tout ça. Ils me lisent Dot MD qui obtiennent en fait si vous publiez ça en remorque, obtenez baignoire. Vous seriez en mesure de lire tous les Nord sur ce projet particulier. Vous pouvez totalement ignorer ça. C' est le début du paquet, Jason, qui est l'une des trouvailles les plus importantes que vous pourriez vouloir Jason, qui est l'une des trouvailles les plus importantes que vous pourriez vouloir regarder en remorque. Et cela a quelques dépendances sur le développement. Dépendances et dépendances de développement en personne. Quelque chose comme le cadre de Jasmine sont carmin et dactylographié. et des trucs comme ça. Donc, ce qui n'est nécessaire que pendant le développement. Mais ça va être empaqueté dans vos feux de construction aussi. Ceux-ci sont requis sur leurs quelques raccourcis clavier ici. Donc quand je n g, c'est la commande qui va être utilisée. La commande N G fait partie des Modules Nord. Andi il y a peu sombre répertoire bin. Et comme vous pouvez le voir à l'intérieur que vous aurez un N g sur Windows, vous aurez une blessure. Des doutes. CMD Donc c'est ce qu'il va exécuter. Même si nous avons installé globalement, il choisira celui qui est disponible localement chaque fois que nous sommes sous commande. Et c'est ce que NG est là. C' est donc là que vous pouvez revenir et renommer votre projet. Si vous souhaitez publier ce projet dans certains référentiels publics, c'est là que vous voudrez peut-être changer le nom des avortements si vous le souhaitez. Donc c'est le truc est le Jason angulaire. C' est un fichier important. Nous venions ici dans un orteil, comprenons ce qui se passe, ce sont les bases que nous pourrions vouloir changer. Donc, ici, par exemple, il dit que quelles autres options de construction, vous savez. Donc quelque chose comme qui est votre HTML initial qui est cela ? SRC slash index HTM unzip goto SRC Vous verrez qu'il y a un index html que j'insère hors de ce HTML si vous voulez dire, par exemple Holmdel html vous pouvez revenir et changer que vous étiez ici Puis il y a aussi le principal qui dit que ce qui est le fichier principal que votre sceau angulaire je devrais commencer à regarder maintenant. Ce qui se passe est que derrière le dos mince, angulaire CLI USA qui est un bundler de modèle Donc, ce qui signifie que la seule découverte qu'il va examiner est ce médecin principal Oui, qui est juste ici sous SRC, nous avons un principal s sale et puis il commence à rechercher ce fichier sur. Ensuite, il va dans ce noyau particulier de pêcheurs à la ligne. Je pense que je peux faire un clic de contrôle. Non. Donc, si vous regardez ceci, si vous regardez ces modules de note à angulaire, il y a un noyau sur qui a un RT indexé ou fait essentiellement qui va être indexé R J s. Maintenant ça va aller dans ce dossier et il va ouvrir celui-ci. Donc, comme ça. Il commence à partir des 30 années principales, puis va dans toute la structure de l'arborescence et charge tous les amis qui sont qui sont dans votre application, puis se demande cela dans un seul fichier ou un tas de fichiers. En fait, il l'a fait. Donc, il y a une découverte principale que le pollen se sent cinq fois. Si ce sont essentiellement nos fichiers qui sont nécessaires pour soutenir le frère aîné, en particulier l'Internet Explorer vous avez gagné cinq ici appelé Hollifield commencer deux ans. Vous pouvez voir que c'est là, et beaucoup de choses ont été commises ici, et vous pouvez le voir très clairement. Je 9 10 11 et Crume moins de 55 demandent toutes ces politiques. Tout ce qu'on a à faire pour abuser des orteils Sélectionnez ceci, puis contrôle du pistolet du sein. Slash sur Windows et la commande Slash sur Mac et que l'esquisse un loué. Et maintenant, si vous l'enregistrez et lorsque vous êtes sur votre application, vous verrez que même votre application fonctionne dans notre Internet Explorer ou 1911 ainsi que le lavage plus ancien en moins de 55. Et puis il y a quelques instructions là toutes explicatives, donc nous n'avons pas à nous inquiéter à ce sujet. Je vais juste dire, défaire et sortir de ce combat particulier. Donc, fondamentalement, vous avez tous ces fichiers qui sont qui peuvent être gérés dans votre application. Quelques autres choses. Par exemple, des actifs qui signifient n'importe quoi dans votre sexe. Généralement, le dossier Assets. Convaincre les imageurs sur les images généralement. Les icônes sont Vous pouvez avoir des vidéos et ainsi de suite afin qu'ils soient gardés ici. Donc en ce moment, dans un sexe, vous pouvez voir qu'il n'y a rien à ce stade. Mais en Calif, vos dossiers. Si votre projet demande et ne peut pas supporter d'images statiques, c'est une bonne idée de garder cela dans ce sens plus complet. Et référez-vous à ce que vos e-mails HD partout où cela est nécessaire. Il a également une référence sur les grèves. C' est là que nous reviendrons et ajouterons une autre entrée pour ou bootstrap. Et dans le cas où vous avez 1/3 scripts de partie, vous pouvez spécifier que vous êtes aussi bien. C' est une zone de tous les scripts dont vous avez besoin, et ils seront regroupés dans votre salle à manger d'application. Il a également d'autres options pour, par exemple, l'internationalisation des orteils, qui est un autre sujet que nous aborderons dans le département. Plus tard. Fermons ceci et si vous allez au point principal SRC Il dit ici quelques choses de base, mais ne vous inquiétez pas à ce sujet. Va revenir et regarder dans ce médecin principal. Oui, en effet. R. Mais en ce qui concerne notre extension d'application, les fichiers qui comptent est le stockage d'index TML à nouveau régional. Ne venez pas que vous êtes, mais vous pouvez revenir et ajouter des CSS qui ne sont pas accessibles. Pourquoi le Nord sont NPM ? Vous pouvez l'ajouter directement ici, ce qui n'est généralement pas une bonne idée. Mais nous le ferons au cas où des chardons sont nécessaires. La seule partie de l'est le seul contenu en HTML. Vous n'avez pas à ajouter autre chose maintenant, étonnamment sont étrangement. Vous pouvez voir qu'il y a quelque chose appelé un fruit slash fruit, qui est qui n'est pas un HTM de cela, mais il ressemble à HTML maintenant, fondamentalement, c'est, euh idéalement, c'est censé être quelque chose comme une porte dash route. Mais alors les navigateurs ne se plaignent pas des temps qui ne sont pas connus. Maintenant, ce qui se passe réellement, c'est que quand on court. Pourquoi, quand Iran, votre projet angulaire, il y aura des fichiers de script supplémentaires injectés ici. Vous verrez ça dans une minute. Ceux-ci incluent le cadre angulaire. Ensuite, lorsque le cadre angulaire est chargé dans l'opium Charleston, il va scanner une fois de plus toutes ces balises et chercher ce type particulier sur, puis commence à injecter des composants ici maintenant où les composants que sont généralement conservés dans l'arbre d'Abdullah. C' est une convention. On peut toujours dire, non, ce ne sera pas une sieste. Il va être ailleurs, mais c'est considéré comme nous votre dossier de projet. Donc tout ce qu'on va faire est dans cette application. Et, comme vous pouvez le voir qu'il y a peu de combats déjà créés pour nous. Le 1er 1 est le modèle TS. Maintenant, angulaire est tout au sujet de l'ization modulaire. Il dit que vous appelez beaucoup de choses ainsi, mais vous les regroupez en modules. Il y a un modèle qui est créé sur, mais ce modèle est le modèle de moteur de voiture il Il est certain que le module de moteur sur son appelé à ce modèle. À ce stade, nous pouvons toujours renommer ceci si vous voulez, mais cela a un tas de références ici. Par exemple, ce bloc de déclaration se compose des composants que nous créons ici sur Google. Passez beaucoup de temps sur celui-ci, puis il y a un autre modèle dont mes modèles peuvent dépendre, qui est, comme, comme, dans ce cas, c'est le marché du navigateur. Donc, le modèle actuel consiste essentiellement à fournir le navigateur sont la manipulation vers le bas, Vous pouvez dire, parce que nous ne faisons aucune manipulation faite à moins que vous ne voulez indiquer une requête g et des choses comme ça. Mais sinon nous n'en utiliserons pas dans la manipulation de Don. Donc c'est à peu près ici. Les importations allaient donc faire référence à des modèles externes. Ce pourrait être nos propres modèles supplémentaires, aussi pour nous blanc. C' est un endroit où tu vas commencer tous les services qu'on va avoir. Nous reviendrons et examinerons cela en effet. A sur bootstrap. Il dit que Hey, c'est un composant qui sera examiné dans la stratégie d'index TML. Maintenant, si vous venez de regarder le point d'index html pendant une minute, c'est votre application. Barre grossière déracinement. Donc, c'est là que ça va dire quand angulaire commence à bootstrapping il dit, Hey, je dois chercher ce composant d'application dans l'index. Html sur le composant AB est identifié à l'aide de cette pile. La question est, comment si je vais au composant d'application Donc c'est un Ceci est fondamentalement un quelque chose qui est importé à partir de ce composant d'enlèvement, qui est ce composant Abdur RTs pour ouvrir ensuite les tortillas de composant. Vous pouvez voir qu'il exporte un composant classique à, mais il est décoré avec ce composant. Et une autre chose que vous verrez ici est que c'est ab Dash route et ceci est un sélecteur. Donc, puisqu'il n'y a pas de symbole spécial associé à cela comme point notre hachage, il suppose qu'il va être utilisé comme attaque sur les routes slash déracinement. Et c'est ce que nous voyons ici à serait planquer déracinement. Donc, si je l'avais dit ici, ne , par exemple, alors il cherche une balise à tout moment avec une classe CSS hors déracinement. Donc, cela ne fonctionnera pas dans cet incident. Ce que je pourrais avoir à dire traiter dernier égal orteil après la racine de cendres slash faire. C' est ainsi qu'il devrait être donné dans get. Si j'avais utilisé le hachage à la place, point d'affaire, alors je dois donner à votre I V égal à deux égals déracinement de l'orteil. Donc fondamentalement, ces sélecteurs d'un composant détermine comment ce composant est identifié dans votre HTML, donc je vais le laisser tel quel. Nous reviendrons et examinerons cela plus tard. Changez ces choses en explorant, expérimentez ces choses. Mais pour l'instant, je vais le laisser tel quel. Je vais enregistrer ce fichier en enregistrant ce fichier à Andi. Vous pouvez voir qu'il s'agit d'un plan simple avec une variable membre appelée Title. Le titre de ce premier ici le jour. Ce titre est une variable qui peut être utilisée dans le code HTML correspondant à ce composant. Ainsi, chaque composant aura un ID d'association HTML. ce moment, vous pouvez le voir dit modèle. Vous êtes sur ce modèle. Ural correspond au même dossier constitué par Abdullah Component connaissance démon, qui est juste ici. Si j'ouvre cela, vous pouvez voir que c'est un fichier HTML composé de certains faire avec une image, puis l'bienvenue à et vous voyez cette variable. variable vient de cette partie particulière de ce symbole spécial ici, crochets bouclés, doubles crochets bouclés appelés interpolation O R. Guidons. Guidon est le A B I qui fournit un support pour ce modèle, Parsi. Mais de toute façon, la valeur du titre sera injectée ici. Nous avons un peu d'avantage que nous avons quelques liens ici. Donc, nous ne toucherons pas à tout ça. Et nous allons exécuter notre application et examiner comment ça va se passer. J' ai ouvert un nouveau terminal. D' accord ? Je vais ouvrir un nouveau terminal. Je suis déjà dans cette ville. D' abord. J' ai déjà fait pour Stan. Je vais dire n g résoudre cela va réellement démarrer un serveur Web de développement. Quand ça commencera, ça va l'utiliser à nouveau. Dwight retour va grouper tout le combat que nous avons. Le html que DS fichiers tout. CS dit tout en un seul chômeur. Bien. Très bien. Andi est entré. Il démarrera également nos applications. Si tu veux. Vous pouvez également dire tiret pour orteil ouvrir le navigateur par défaut sur DSO les extremophiles, l'index, c'est l'équipe. Donc si je fais ça, ça pourrait prendre un certain temps parce que c'est la première fois qu'il s'ouvre. Mais il va regarder dans tous les amis que nous avons combine à partir de la porte principale 30 ans, puis entre dans l'ensemble de la restructuration et construire le combat résident. Une chose qu'il fait aussi, c'est qu'il va garder ce serveur opérationnel ici. Comme vous pouvez le voir, il est toujours en cours d'exécution. Mais comme chaque fois que je fais quelques changements, vous verrez que les changements seront immédiatement affectés ici. Par exemple, si je retourne aux visuels à la cour, permettez-moi de réduire la hauteur de cette. Donc, au lieu de cet orteil de bienvenue Titan, je peux dire bonjour. Ça va mentir. Et puis j'ai juste utilisé le titre, et dès qu'ils l'enregistrent, vous verrez qu'il y a une compilation en cours, et cette compilation le fera. Une fois la compilation terminée, cela va déclencher très frais dans le navigateur. Tout ce que je dois faire est d'appuyer sur commande comme nos contrôleurs et fenêtres, et vous verrez que c'est une compilation à nouveau, et dans un certain temps, vous pouvez voir qu'il démarre sur les redémarrages par navigateur, et c'est Bonjour, c'est mon d'abord, et au lieu de ce premier, je peux rentrer à la maison. Je reviens à ma source a marqué cette année, et je peux dire que c'est mon sept angulaire forcé sur A et l'enregistrer. La même chose se produit sur vous pouvez voir que la variable est maintenant imprimée ici. Ma première application Angula sept. Et si vous voulez supprimer ces liens et des trucs comme ça, ce que nous voyons ici pour que je puisse l'amener entièrement là-haut. Tu m'as coupé Julia, l'as gardé. Tu peux voir qu'il a disparu, non ? Bien sûr, c'est sur. Donc je n'ai pas besoin de la retirer de la Syrie. C' est fait. Comme vous pouvez le voir, c'est de la crème rapide. Andi, c'est là que tu peux continuer à changer beaucoup de choses. Ainsi, par exemple, je peux revenir en arrière et ajouter un nouveau composant et les composants à nouveau. Un tas de fichiers CSS html ds. C' est tout ce que nous voulons faire ici dans la demande suivante. Dans le cas où si vous voulez notre bootstrap, par exemple, disons pour taper votre aéroport sur, je peux dire partenaire. Maintenant, cela a une abréviation d'image de sorte que Visual Studio court supporte Emmett Abréviation , ce qui signifie que je peux effacer quelque chose comme PT et bouton point bt et sombre 50 et primaire. Et puis je peux entendre les crochets bouclés dire C'est du beurre et je peux d'abord ender et vous verrez que la Cour HTML complète est générée à partir de cela sur Ceci est une option vraiment, vraiment super cool, nous allons utiliser cette tournée sont application angulaire sur Do vous ? À la fin de cela, vous devriez être très à l'aise avec cela et enregistrer cela. Retournez à un navigateur. Je vois un bouton qui est assez ordinaire, mais si je vais obtenir un bon point d'arrêt com sur, vous verrez qu'il y a un Ceci est de Tudor, qui, qui est un nageur CSS très populaire sur Si je vais à la documentation ici est un bouton. Comme vous pouvez le voir sous les composants, je devrais voir les boutons sur. Il y a ces boutons Succès primaire secondaire, Danger. Donc, je vais devoir utiliser les noms de classe CSS appropriés. Oui, obéissance est requise sur Bt et secondaire succès primaire, Danger, avertissement et ainsi de suite. Andi, c'est très bien documenté, donc vous pouvez toujours revenir et regarder comment travailler avec un bouton ou quoi que ce soit d' ailleurs. mais afin de travailler avec cela pour donc j'ai besoin d'installer. Alors quoi ? Je vais les faire, vous savez, contrôler, voir ici d'abord. Donc, les développements sont déjà arrêtés alors je fais vraiment nt m i pour l'installation sur cette fois . Pas de tiret G parce que ce n'est pas un cadre. Carottes racontant. C' est juste un ensemble de combats de bibliothèque, votre installateur, et c'est ainsi que vous tirez frappé, et cela s'installe localement. Par exemple, une fois que j'ai appuyé sur Entrée, vous verrez qu'il va aller sur le Net et télécharger les combats probables nécessaires sur Aussi Objects Packaged ou Jason. Donc ça va jeter un oeil à ça dans notre éditeur. Donc j'ai ton paquet. Commencez à certains et vous verrez que Packaged ou Jason a maintenant été mis à jour avec bootstrap pour médecin, a écrit un. J' ai un modèle de note. Vous verrez qu'il y a bootstrap quelque part. Il sera séquentiellement listé par ordre alphabétique. Je vais à ok, Parfois, il ne rafraîchit pas votre là l'option de rafraîchissement. Cliquez sur cela sur Maintenant, je devrais être en mesure de voir sous les modèles du Nord. Je vois que vous voyez des bottes s'arrêter ici L'essentiel et il y a un CSS et Js. Je vais sélectionner voir assis vous contre comme ce bootstrap signifie doxy. Sso est le fichier que nous devons mettre à jour en point angulaire Jason, je vais aller dans le remorquage de l'angulaire que vous pouvez commander être notre contrôle, être sur Windows et vous prenez votre angulaire. Vous pouvez voir que je deviens angulaire que Jason. Je vois qu'ici, c'est l'endroit. Très peut ajouter un peu de CSS, par exemple. Je peux aller ici et dire que Lord a souligné les mannequins. C' est l'endroit où nous avons sous ça que nous avons ce qu'on appelle Boonstra. Donc, nous avons booster dissed CSS et puis bon strap dar lin dot CSS Et avec une virgule sur la Syrie , il sur tous les changements sur le site angulaire Georgeson que vous avez fait Pour que prenne effet, vous devez arrêter le développement de ce serveur que je vais être fait, puis redémarré. Vous pouvez faire soit Engy afin que tout ce que vous pouvez dire npm commencer un dans la même fois cette fois je n'ai pas besoin la fortune pash navigateur parce qu'il est déjà ouvert sur. Et quand ils le font, si je retourne au navigateur Andi, vérifiez mon application. Je devrais voir un bouton changer avec CSS appliqué sur ce qu'il est. Dit combiné avec succès. Je n'ai pas rafraîchi ici. Alors faisons-le manuellement. Donc, quand je fais un rafraîchissement, vous pouvez voir que maintenant le bouton est un bouton de col bleu sur. Bien sûr, si je retourne à mon score arrière, changer ceci de primaire orteil sauver le danger, par exemple. Sauvez-la. Vous pouvez voir que ça va être en dessous, mais d'une certaine façon, non. Donc 20 d'options dans bootstrap. Explorons ça au fur et à mesure que nous avançons. 7. Créer une application angulaire à partir de zéro: Dans la vidéo précédente, nous avons vu le centre logiciel nécessaire pour travailler avec un projet angulaire être construit, un projet angulaire utilisant le N. G ou angulaire CLN. Nous avons apporté quelques modifications à nos applications. Donc, comment tout fonctionne sur ce modèle particulier, je veux vous montrer ce qui est un composant angulaire. Qu' est-ce qu'un module ? Et comment démarrer arrêter ce composant ? Tout à partir de zéro. Donc, pour cela et vous utilisez le même projet que nous avons utilisé dans la vidéo précédente. Mais je vais supprimer toutes les choses qui sont 100, surtout la partie supérieure de celui-ci. Donc je vais choisir beaucoup de ces amendes ici. Et si je sélectionne sur supprimer, vous devriez voir qu'il y aura des éditeurs projet. Donc, si je dis développeur vue sur les outils de développement sont Charles gardé préoccupation, qui est, Ah, vaisseau de commandement J Control Shivji. Donc c'est là que vous allez voir les autres comparer parler ceci sur le côté droit afin que nous puissions voir la page ainsi que ceci. Donc si je vais ici et supprimer ces fichiers, tu verrais que ça va causer un tas d'adultes dans une minute parce que la dernière histoire existe, c'est la compilation de rue, et ça revient avec une chose qui a échoué le Seigneur. On n'a même pas de module sur. Et c'est une autre venue parce que notre principal Doherty s qui est le point d' entrée maintenant, où est-ce mentionné comme un point d'entrée dans Jason angulaire ? Nous avons vu que les cinq principaux n'est rien d'autre que SRC point principal médecin. Oui. Si il ya le domaine dot ds, vous verrez qu'il fait référence au module app toe qui savent juste être supprimé. Donc ce que je vais faire, c'est que je vais l'enlever à une importation. Donc, disons d'importer notre chien slash ab slash Nous allons entendre, par exemple, mon exemple, euh, en tant que samadi, comme vous le savez, qu'il n'existe pas. C' est créé un ici, donc je vais aller à l'application et je dirai nouveau bon exemple de voiture esprit APD RT Et si je vends ? Si ça a tout simplement pris si longtemps, Andi alors je prends votre mot à dire de mon exemple Savage. Allons voir ce qui se passe quand c'est vraiment frais. Laissez-moi redémarrer les plusieurs Angie So ? Donc, il n'y a pas d'adresse que nous pourrions retourner au navigateur. Vous verrez ce bonjour de mon exemple d'application. La sortie vient, mais à ce stade, n'est plus une application angulaire car il n'y a pas d'angulaire vers l'intérieur. Donc, la seule chose qui est dans l'ordre est que votre sac à dos regarde la porte principale, larmes sur les importations ce fichier, et dans ce fichier, tout ce que j'ai à la console dot log. n'y a pas d'angulaire vers l'intérieur ici. Donc, c'est là que nous voulions obtenir une application angulaire. Donc je vais aller nettoyer ce cours. Donc c'est un cours. Disons que ça s'appelle Bonjour, composant mondial. Andi, rien là-bas. Je vais vous donner un message pour plus de timing. N' importe quoi. Je vais juste avoir un cours. Mais cette classe devient un composant en ajoutant au composant à votre plus. Je le sais parce que c'est un projet angulaire. Beaucoup hors support angulaire est fourni par via score, et il me donne également automatiquement l'importation automatique à partir du noyau angulaire sur. Quand je fais cela, il arrive au décorateur dans dactylographié est toujours donné avec le support bouclé et un tas d' options sur. La seule option que je regarde en ce moment va être un sélecteur. Et puisque notre sélecteur waas déjà et déracinement dans l'index tranchant humain probablement peut voir que dans l'index HTM et nous avons cette approche slash déracinement. Je vais utiliser le même sélecteur hors cours. Si je fais quelques changements ici, je devrais peut-être faire la même chose dans le début de l'index. C' est humain aussi. Et une autre chose que je veux donner ici est un modèle. Je peux soit donner un modèle, qui est un contenu html à bordure dure ici, soit je ne peux pas me référer à un fichier et vapeur externes. Donc, pour le moment, je vais donner un modèle et je vais utiliser cette chaîne de modèle, qui s'appelle Ptolemy Type plusieurs lignes. Donc je vais rester pur. Il en est un et puis ils coupaient bord un sur l'endeur opprimé. Ce paragraphe agrafé sur un PR un message de vous savez, barre oblique B sur. C' est ma sortie pour les composants. Partout où ce composant déracinement planqué approche là, je veux que ce message particulier apparaisse donc à ce moment, nous avons créé une classe sur la classe est un composant, mais nous devons donner cet orteil angulaire sur Say the Hey, injecter cela dans cet emplacement particulier. Et pour ce faire, vous devez créer une pièce de composant à partir d'un modèle. Et un modèle n'est rien d'autre que des plantes. Appelez-nous après ce que vous êtes. N' importe quel nom de notre choix. Mon modèle, par exemple. Mais c'est juste que les plantes comme c'est une classe régulière convertie en confiant. En utilisant ce décorateur, nous devons utiliser à nouveau ce module moteur. Importation automatique à partir de cette cour oblique angulaire. Andi, c'est là que tu dis ça. Hey, nous devons amorcer ce composant particulier, parfois un booster sur Ne pas dire que Hello était un composant. Mais à l'heure actuelle, l'ensemble de la composante orale ne fait pas partie de ce modèle. Et pour dire que cela va faire partie du modèle, nous disons ici des déclarations. Andi, dans les déclarations allaient dire une liste de tous les composants que vous allez avoir ici . Une partie de ce modèle sera répertoriée ici, mais bootstrap est seulement celui qui va être utilisé dans l'index. C' est humain. C' est là que je dis bonjour. Le composant du monde est l'un de mes composants maintenant, une exigence minimale ici est que le support du navigateur parce que finalement nous voulons orteil angulaire modifier ce dôme afin qu'ils ne le fassent pas. manipulations sont effectuées à l'aide d'un module appelé comme module de navigateur. Ok, donc il ne semble pas capable de s'asseoir automatiquement venir. Pas de problème. Nous pouvons toujours importer hors de vous pouvez dire à barre oblique angulaire navigateur hors de plus près le jour où vous pouvez voir qu'il ya un appelé un module gelé. C' est ce que nous voulons vous savoir, y compris notre application qui est venue maintenant que nous avons un composant, un composant cette partie du module angulaire appelé à Marty. Vous voyez, ils sont toujours il n'y a pas tout mis son rafraîchi, mais il n'y a pas gênant. C' est principalement parce que nous n'avons jamais dit des modèles angulaires si libérés. Nous pouvons effacer un certain nombre de modèles angulaires, mais nous n'avons jamais dit cela. Utilisez ce modèle et bootstrap que, et c'est là que nous avons besoin d'une fonction. Appelez. C' est la dernière partie du puzzle. Donc, je dis, importer à partir du navigateur de plate-forme barre oblique angulaire dynamique. Cela fournit une fonction. C' est utiliser que de grandit une dynamique qui est une fonction. Donc on va utiliser cette fonction. Andi appelle ceci, puis retourne sur l'objet. Et nous avons dit que Hey, booster le modèle pour au marché. Donc si je vais ici et puis dire, quels sont les mannequins ? Ça s'appelle au module. Et maintenant, si je garde ça, vous devriez voir que nous avons notre composant. Ils peuvent voir ce grand message que nous savons que la forme noire Brother Dynamic est celui qui fait le travail. Donc celui-ci scanne dynamiquement vos démons tranchants d'index. Pourquoi cet index html est-il regardé dans ? Si vous regardez la porte angulaire Jason, on a dit que, Hey, c'est un fichier qui est censé être amorcé. Donc, quand vous dites modèle de bootstrap dynamique de navigateur de plate-forme, il va prendre ce modèle et découvre le composant bootstrap. Et c'est une entreprise mondiale bonjour. Le composant de terre creuse est identifié comme une balise appelée Uproot, et il va regarder dans l'index html pour ce aboot particulier. S' il est trouvé, alors c'est là que ça va. Inject orteil à ce contenu particulier va être placé à l'endroit où Absolute Slash approuvé à la place. Et c'est ce qui se passe en ce moment c'est même le composant enregistré d'abord, puis il est allumé, puis peut-être fait une partie d'un module. Mais Angulo commence le travail une fois que cela est donné, donc il va chercher un modèle. Et ce modèle a un composant bootstrap, et ce composant est l'état. La question est donc, Puis-je avoir plusieurs composants ? Dans un HTML ? Par exemple, puis-je enregistrer votre index Let's go toe html ? Permettez-moi d'entendre une barre oblique de bienvenue à la bienvenue flétrie pour produire tout mis en tant que tel. n'y a pas d'erreurs, et il n'y a rien qui se passe à ce stade. Mais puis-je effacer un autre composant ici et le faire partie du même modèle sur c'est possible . Par exemple, je peux dire votre composant de bienvenue de classe, Andi. Je dis juste ici, plaignant un composant et je dois donner un sélecteur minimum dans un modèle. Je vais vous donner un sélecteur est le bienvenu. C' est ce que nous avons utilisé tout à l'heure dans l'index html ici et puis je dirais que le modèle pour cela est un simple H un ou H trois. Bienvenue à angulaire. Donc, dans l'entraînement slash extrême, je le sauve. J' ai créé un composant. Ça ne va pas apparaître principalement parce que ça ne fait pas partie de ce modèle particulier. Donc, afin de le faire partie du modèle, je dois dire que c'est un composant de bienvenue. Maintenant, vous voyez que je l'ai fait dans le cadre de cela, mais dans l'index html, c'est là. Il n'apparaît pas ici principalement parce que nous avons dit qu'il doit être l'une des sociétés bootstrap sur. Maintenant, Si j'étais le bienvenu, composante a déclaré, j' espère que je devrais voir un message de bienvenue. Aussi donc le composant bootstrap est celui qui va être à la recherche d'index. C' est allemand. Donc si je ne fais pas ça ici, laisse-moi le retirer de l'index, c'est un démon. Donc maintenant, je peux toujours faire ce composant présenté à l'utilisateur en faisant ce composant partie des composants hello world comme n'ont pas, vous pouvez voir qu'il n'est pas inclus dans mon pied. Mais je peux aller à mon composant hello sur dans le composant helo. Je peux toujours fournir. Nous y voilà. Je ne sais pas. Peut-être aussi parce que de toute façon, ça va imprimer extrême. Donc je vais dire ici, ak tash, barre oblique de bienvenue. Donc, comme vous pouvez le voir maintenant. Je n'ai pas besoin que cela fasse partie de la liste d'amorçage ici parce qu'il ne va pas être regardé dans l'index HTM. Mais au lieu de cela, il va faire partie d'un autre composant. Bonjour, euh, les composants. Donc, comme une question sauvée en ce moment, elle n'est pas là. Si je le garde et si je reviens ici, tu devrais le voir. Bienvenue. entraînement triangulaire sept arrive. Donc, c'est ainsi que vous pouvez créer un composant, le faire partie d'un module N G. Dans notre cas, c'est le modèle APP puis bootstrap, qui s o qu'Apple va réellement être injecté. Les composants vont être injectés. Tau notre index html. Bien sûr, beaucoup de choses peuvent se refléter ici. Par exemple, ce n'est pas une bonne idée de garder toutes ces classes en un seul endroit. C' est une bonne idée de garder cela dans un aspect de travail ou dactylographié. Module exporté. Exportez celui-ci ici. D' accord. Un autre modèle où vous importez tout, puis commencez à l'utiliser. Donc c'est ce que nous ferions essentiellement. Mais juste orteil vous faire comprendre dans un réel le fondamentalement sur le module moteur est celui qui est amorcé par le modèle de moteur angulaire a sur le tas de composants qu'il se réfère à Andi. Ensuite, il prend l'un des composants à être en boucle dans l'index. C' est l'équipe, c'est ce qu'elle fait. 8. Aperçu d'un compnent angulaire: congruent est le bloc de construction fondamental, souvent application angulaire. Il prouve l'interface utilisateur, données correspondantes et même les fonctions de manipulation. En outre, une application angulaire peut être considérée comme une arborescence de composant, avec le composant racine ayant un autre composant enfant et chacun de ces composants ayant des composants enfants hors de ses propres sur ainsi de suite. Un compétent se compose généralement. Trois aspects numéro un, un dactylographié sont la classe de six ans avec des variables membres représentant les données du modèle et méthodes représentant le comportement hors du composant. Numéro deux, un modèle HTML représentant l'interface utilisateur capable de capturer les entrées utilisateur dans le modèle. Plus tard, notre présent, les données de modèle à l'utilisateur et enfin numéro trois, un état de feuille orteil en option améliorer l'apparence de l'interface utilisateur. Essayons de comprendre la même chose avec un exemple. Considérez la classe à la composante de comptoir est juste une année ordinaire. Six classes ayant un membre, nombre de voitures variable et deux fonctions incrément et équipement. Comme son nom l'indique. Lorsque vous appelez ces fonctions, les incréments sont préjudiciables. La valeur du membre gator Ensemble, cette classe comprend l'état et le comportement de la société afin de présenter la même chose à l'utilisateur. Nous avons besoin d'un noyau HTML. Jetez un oeil à cet extrait HTML. Comme vous pouvez le voir, nous incluons le nombre précieux et la méthode appelle accord et incrément de pied. Ce démon de couverture a accès à l'état compétent et le comportement. Les crochets du diable Curly, également connus sous le nom de guidon, lie les données du modèle sur l'U. N. N. Les modifications apportées aux données modernes sont immédiatement reflétées. Les fonctions de confiance sont osseuses à celles que vous utilisez les leurs. Chez Brackett. Par exemple. Le clic s'est éteint. Les boutons ici sont associés à des fonctions d'accord et d'incrément définies dans la classe de compétence, sorte que le fait de cliquer sur un bouton déclenche la méthode assignée. Appeler changer les données Morgan, qui sera reflétée instantanément sur le vous êtes afin de combiner le plus sur HTML pour faire un composant, nous utilisons des groupes de types, décorateur. Ceci est similaire aux annotations et attributs d'obscurité de Joe ici. Le plus au comptoir est décoré avec ce composant. Les décorateurs dans Desperate reçoivent un objet en tant que périmètre pour le décorateur de composant. Ici, nous spécifions deux propriétés importantes. Tout d'abord, le sélecteur définit la façon dont le composant est utilisé. Par exemple, au compteur sans préfixe au symbole implique que le composant doit être utilisé comme un élément HTML. Si vous utilisez dark at counter pour la propriété sélecteur , le composant est utilisé comme classe CSS. Si vous utilisez l'enregistrement carré autour au compteur pour la propriété sélecteur, alors le composant est utilisé comme un attribut, souvent élément html et un dernier. Si vous utilisez un compteur de hachage pour la propriété de sélecteur et que le compétent est utilisé comme une idée. Souvent, c'est l'élément Gmail. La pratique générale et la recommandation angulaire est que les composants sont utilisés comme des éléments HTML . Le deuxième modèle de propriété correspond à la partie html du composant. Comme vous pouvez le voir, nous avons utilisé des modèles de la sixième année. Chaîne pour intégrer le noyau html multilane. En fin de compte, la définition de classe sur HTML peut être conservée dans des fichiers séparés. Tout cela la modularité et la séparation des consentements. Pour cela, utilisez le modèle Ural au lieu de la propriété de modèle et affecté les pièces associées souvent externes. Html cinq 9. Utiliser Angular CLI pour générer de nouveaux composants: prenons des exemples de création de nouveaux composants en utilisant l'interface de ligne de commande angulaire ou la commande Engy sur le monstre. Le travail des composants que j'ai déjà créé un tout nouveau projet angulaire appelé Counter à un Zoo Conceit Salaire courir dans les années, donc bienvenue à contrat et a obtenu les liens de base ici déjà ouvert la même chose dans noyau de studio visuel. Il s'agit d'une toute nouvelle application. Rien n'a changé sauf que j'ai ajouté bootstrap CS est à celui-ci. Autre que cela, il n'y a rien que nous avons donc ici à l'application SERC et nous avons votre composant d'application de larmes qui a obtenu ce titre. Nous pouvons changer cela chaque fois que nous avons le html correspondant à la même chose qui est passée sur ce truc. Nous allons obtenir toutes ces choses et notre propre pied d'en-tête sur un autre composant pour l' application de compteur . Et là, dit la CIA, je vais vous montrer comment cette année peut affecter notre point de vue aussi. Non, bien sûr, nous ne voulons rien changer d'orteil en ce moment, mais nous voulons ajouter un nouveau composant à notre application maintenant, rappelez-vous, chaque fois que nous avons ajouté un nouveau composant, il a pour être enregistré avec nos modules de moteur, qui est là dans les idées modernes. En ce moment, il y a le seul composant, comme vous pouvez le voir. Maintenant, je vais créer un autre composant ici, et ça va s'appeler Laisser un en-tête d'application sur le pied de page sur le terrain de golf le composant de compteur . Maintenant, pour créer ces nouveaux composants, je dois aller à un front de commande, qui est terminal ici. Maintenant. Je peux arrêter ça. Je n'ai pas besoin d'arrêter, mais je peux. Mais sur Mac, je peux ouvrir un nouvel onglet sur par la commande actuelle t sur. Ensuite, j'ai une nouvelle invite de commande ici. Donc ma star est toujours en cours d'exécution ici. Mais j'ai un autre robinet qui est ouvert, qui est au même endroit. J' ai dit que vous pouvez voir que je suis dans l'application de compteur ici maintenant pour créer une nouvelle société, vous pouvez utiliser la commande n g générer sur, puis enregistrer le composant. Maintenant, bien sûr, nous avons un brillant plus court sur la même chose. Vous pouvez simplement dire n g g c g pour le sexe, t pour les composants, puis vous devez donner le nom du composant que vous voulez créer. Supposons que si je veux créer une tête un composant, alors vous commencez juste à taper. En-tête sont si son en-tête d'application donne capita Maintenant, je peux dire par exemple Rapido Mais ce qui se passe c' est qu'il va créer tout dans cet endroit, ce qui en fait un combat plus grand. Alors quoi ? Nous pouvons les organiser comme un quatre que je considère les composants slash. Donc, il va effacer le nouveau pour les composants liqueur et intact que je peux dire qu'il est censé me créer un composant d'en-tête de tiret. Maintenant, il va également ajouter un tiret d'application parfait pour chaque sélecteur de cette démonstration. Je crois que tel quel et j'ai appuyé sur Enter Onda plus tard. Je vais aussi dire que je ne veux pas de préfixe parce que de toute façon, j'ai donné votre application Dash autre va créer abduction ABX tiret comme le parfait. On verra ça dans une minute. Venez sur une presse Enter Italy sexered quatre fichiers différents Les fichiers comprend un CSS et HTML, un Esther Spectacor et ensuite votre cour de composant réel. Maintenant, si vous ne voulez pas de respect, par exemple, vous pouvez toujours dire que le respect de l'argent équivaut à deux fonds. Tu ne récupère pas ce dossier. Vous pouvez également vérifier que le fichier après le modèle tortillas a été mis à jour avec vous pouvez voir qu'il a ajouté après leur composant à nos applications. C' est vraiment besoin, parce que sinon je dois garder une trace de l'ajout de chacun là-bas. Maintenant, si je vais là-bas si je contrôle cliquez sur ce combat particulier sur DSI. Qu' y a-t-il là-dedans ? Vous pouvez voir qu'il a ajouté un tableau de bord AB parfait à notre application, ce qui n'a pas l'air agréable. Je vais enlever ça. Je vais nous le laisser à l'en-tête sur le terrain de golf. C' est juste un en-tête par ici. Donc il n'y a rien là-dedans, et c'est seulement une nouvelle entreprise annoncée à votre date de retour ici sur NGC à cette fois-ci, c'est un pied de page barre oblique composant. Angular a quelques recommandations sur la façon dont la convention de dénomination doit être suivie. Donc, ils disent utiliser un parfait afin qu'il ne va pas orteil entrer en collision avec l'un des bâtiments. Les balises HTML sont d'autres piles de frameworks, il est donc toujours préférable de spécifier votre humeur libre Perfect spécifique. Ici sur ce temps, alors disons que la spécification est juste égale à deux chutes qui est juste un préfixe égal à une chaîne vide. Si vous ne donnez pas de chaîne vide. Alors, bien sûr, ça va prendre de l'argent. Donc, cette fois, vous verrez qu'il n'y a que trois senti qui sont générés. Andi, il y a mise à jour, bien sûr, dans le modèle DS sur. Aussi, juste pour vous assurer que nous avons le générateur, vous pouvez voir le pied de page de l'application le composant. Si vous regardez le composant à ts, vous voyez qu'il est maintenant nécessaire. Ce n'est pas ab Dash et Dash aurait juste enlevé le tireur. Donc, nous allons avoir un composant de plus. Et cette fois, je vais juste vous qu'une pagaie sur. Alors je vais dire, euh, compteur. Et puis, bien sûr, nous avons aussi un contre-composant. Donc, dans les déjà utilisés. C' est le sélecteur qui doit être utilisé. J' ai donc votre en-tête de compteur au pied de page. Donc, je vais à l'at Don't component html, sortez-le de tout ici et puis je peux dire ici que je me suis dirigé Vous pouvez voir que ça va m'aider avec ça. Je l'ai entendu et puis je peux dire agir compteur de cendres barre oblique hors cours un pied de page barre oblique comme un autre service et revenir au navigateur. Je devrais voir que les trois composants placés là, mais tout ce qu'il fait, il est approprié. L' en-tête fonctionne au comptoir travaille jusqu'au pied ou travaille. Bien sûr, nous Ceci est un tribunal généré automatiquement pour chaque composant. Regardez cette barre oblique des composants vers le haut. Il y a la partie HTML de celui-ci, et il Simple est en place. mots bruyants. Tu sais, on peut l'enlever et le mettre dessus. Probablement à l'intérieur que je peux dire h un. Bienvenue dans la passoire, Andi. Je peux ajouter un nom de classe CSS ici en disant quelque chose comme Alert honneur, Dash dans quatre Onda séparés. Nous devrions voir un beau en-tête hors cours dans les travaux de pied de page. Nous allons avoir un type d'information de base sur le droit d'auteur. Donc, allons avec un pied de page pour le HTML. Je vais l'enlever de cette application pour leurs travaux. Bien sûr, nous pouvons dire être centre supplémentaire. C' est comme la ligne centrale supplémentaire. Et puis, bien sûr, je peux voir ici que tous les droits pourquoi, c'est un https. On sait que sur cet ender, la nourriture est censée être un expéditeur. Andi commence s'asseoir là maintenant, bien sûr, le comptoir au comptoir travaille. Et c'est ce que je crois que vous voulez créer 10. Démo - Cliquez sur l'une Demo: dans cet argent. Allons créer ce composant au compteur. Donc, où nous voulons orteil fournir une valeur initiale de nombre sur fournir un couple de boutons à mettre en œuvre comme limite élastique la même chose De cette façon, nous comprenons le concept hors liaison de données . Alors allons-y jeter un coup d'oeil à ça. Laisse-moi fermer toutes ces amendes sur ma jambe droite. Nous avons un effondrement sur l'abondance. C' est vraiment nécessaire maintenant. J' ai donc mon code source visible correctement. Je vais à mon AB et puis je peux chercher des composants au comptoir et il y a un fichier Ts. C' est donc un fichier T, qui est l'épine dorsale d'un composant. Donc, c'est vous pouvez dire partie moteur d'un composant. Et c'est la partie de présentation de la société, qui dit simplement APP fonctionne en ce moment, ce que je peux faire est que je peux déclarer une variable à l'intérieur de cette classe qui devient une variable membre de la classe. Je peux nous vendre privé si je veux d'autres moyens. C' est toujours bon. Par exemple, je peux dire compter le jour parce que nous sommes dans dactylographiés. Nous pouvons définir la variable Toby d'un type particulier, je peux dire nombre comme celui-ci. Maintenant, c'est vraiment sympa, parce que de cette façon, le temps combiné en donnera un autre. Au cas où. Si j'essaie d'élever quelque chose de valeur non numérique au nombre, il peut également affecter une valeur par défaut en obtenant pour assigner une valeur. Ici, il n'est pas nécessaire de mentionner qu'il s'agit d'un nombre, mais vous pouvez toujours aller dire égal à 20 comme valeur initiale si vous le souhaitez. Maintenant, l'autre endroit pour initialiser. Comme vous pouvez le voir qu'il y a un constructeur pour une classe particulière, il y a aussi une ONG dessus. Maintenant, Constructor est un constructeur de classe JavaScript typique. Donc, à ce stade, les classes étant créées par instance, ce n'est pas un composant qui signifie que angulaire ne va pas surveiller cela. Donc, si vous voulez orteil angulaire initialement quelque chose pas JavaScript, alors ONG sur elle est la fonction pour le travail. Donc, cela vient à cause d'une implémentation sur en elle dans les poings. L' interface tricotée ah s'assure que vous avez cette fonction. Par exemple, si je ne l'ai pas, vous pouvez voir que votre manuscrit donne un autre dicton qu'à notre composant de compteur, il dit implémente incorrectement cette interface sur. Vous devez le fournir. Donc, si vous voyez qu'il y a une ampoule ici, nous escorte me donne une option à nouveau. Basic Commander ne sont pas contrôlés sur Windows et cela va vous montrer l' interface d'implémentation sur elle. Bien sûr que je peux choisir ça sur la cour vient ici. Bien sûr, vous devez probablement retirer ça parce que nous voulons que ça soit à cet endroit. Il a jeté un nouvel éditeur. On ne veut pas en jeter un autre. Au lieu de cela, nous pouvons dire qu'ils commencent compter égale 20 Maintenant, très important que vous devez dire cela. Commencez ici parce que si vous venez d'autres langues comme Java WASI Shop R C plus , vous pouvez simplement le faire là où il cherchait une variable locale. Ce n'est pas amusant. Il faudra un membre. Vraiment. Mais contrairement à cela, JavaScript sur typescript dire que non, si vous avez spécifié sans le disque un travail, il sera à la recherche d'une variable locale entre sa propre maison. Andi. Il dit que nous devons obligatoirement utiliser à nouveau ce mot-clé. Vous pouvez voir qu'il est délicieux. Je peux appuyer sur le contrôle sombre, puis entrer notre boîte Vous là deuxième option ici. Soyez donc prudent lorsque vous sélectionnez des options. Est-ce que ce compte est égal à 20 et maintenant j'ai une valeur ici. Zéro. Je peux le présenter dans le HTML de la façon que je veux. Alors passons au HTML sur. Probablement l'enlever sur n'importe quel type de votre âge, trois sur et dire le compte actuellement qu'il est sur. Ensuite, je peux utiliser un support bouclé et ensuite je peux, genre, tousser comme ça. C' est une interpolation des valeurs, fondamentalement que quelle que soit la valeur de vos plantes modèles est là qui sera réellement imprimée ici. Donc, si je retourne au navigateur, il est compte actuellement zéro. Mais nous aimerions fournir quelques boutons pour que nous puissions mettre en œuvre notre équipement. Donc pour fournir les boutons, je vais fournir un Parton, Bt et Bt et primaire. C' est les noms de classe qu'on va utiliser. Dick Clement et moi allons copier coller la même chose et changer cette mise en œuvre de l'orteil sauver pardon pour coloniser l'incrément de l'année et Dick Clement tout ce que je veux fournir un fonctionnellement. Donc, quand je clique sur cet incrément à chaque fois, je devrais voir cette valeur particulière être incrémentielle. Donc, ce qui signifie que nous devons déclencher une fonction appelée à partir de ces boutons sur les fonctions doit prendre cela pour fonctionner ici. Donc, ce que nous faisons, nous allons fournir deux fonctions. Je peux dire que tu es défavorable, Andi. Une fonction régulière répertoriée. Je considère que c'est votre téléphone perturbé plus et puis, bien sûr, désaccord. Qui est censé dire ça ? Commencez compte moins moins. Je suis rouge en utilisant la valeur de ce maintenant plus dur appeler ce droit. Donc, c'est très, très simple en angulaire, car maintenant ils ont fourni un simple appel de syntaxe orteil cette fonction directement ici . Ce que je peux faire qui peut simplement dire, utiliser autour du support sur, Ensuite, utilisez l'événement que vous voulez trouver et vous pouvez voir que cet arrière marqué m'aide avec quelles sont les différentes options que nous avons ? Nous voulons utiliser la menthe cliquante et le clic quand je peux dire Dick Clement. Je sais que nous sommes l'école m'a aidé en regardant la classe, puis utilisez-moi la fonction qui est disponible ici, je peux dire une fois de plus, un événement de clic est égal à l'inconfort des orteils. Andi, garde ça. Il est aussi tout mettre dans un conteneur appelé, donc le décalage armé F se formera à votre cour sauvage. Et si je retourne à mon application sur les églises du navigateur, si parfois il ne rafraîchit pas, juste rafraîchir sur votre chambre. Si je l'implémente, vous voyez qu'il s'implémente automatiquement sur Deke, lamentant aussi bien. Vous pouvez voir que lorsque je clique sur ce bouton particulier, la fonction réelle est en cours de travail. Donc c'est une reliure. Ce qui reliait votre est un bouton pour avoir une fonction sur. La fonction modifie la valeur des données du modèle. Et chaque fois que le modèle qui a changé cette valeur particulière est reflété automatiquement , ce qui s'appelle l'exploration de données. Nous avons donc une liaison de méthode, et nous avons une liaison de données. Bien que cette date de fin de ce que vous voyez soit un reddit à ce sujet, ce qui signifie que si j'ai une zone de texte ici sur, je veux que la valeur soit modifiée lorsque l'utilisateur change la valeur. Si je veux cet orteil, affectez cette variable particulière qui est censée être une liaison bidirectionnelle Donc en ce moment, ce que nous faisons est une liaison étaient du modèle. Plus tard, nous mettons à jour la vue. salsa blanche n'est pas encore terminée, alors nous allons le voir dans les radios futures. Quoi qu'il en soit, cependant, nous faisons une méthode de liaison sur la liaison de données à sens unique ici afin que je puisse implémenter ainsi que l'accord. 11. Aperçu des directives: sont peut-être le bit le plus important d'une application angulaire sur, Si vous y pensez, l' unité angulaire la plus utilisée, le composant est en fait une directive, et le composant angulaire n'est rien de plus qu'un directeur avec le modèle. Quand nous disons que les composants du sang de construction sept applications angulaires, nous disons en fait que les directeurs sont les blocs de construction d'une application angulaire. Au cœur de la directive est une fonction qui s'exécute chaque fois que le compilateur angulaire le trouve dans l' obscurité, les directeurs angulaires sont utilisés pour étendre la puissance de son TML en donnant des nouvelles en taxe. directeurs angulaires peuvent être divisés en trois types de composants aux directives tribute et aux directeurs structurels. Comme nous l'avons vu précédemment, les composants ne sont que des directeurs avec des modèles sous le capot. Ils utilisent l'AP victime et nous donnent une façon plus propre de les définir. Les deux autres types de directeurs n'ont pas de modèles. Au lieu de cela, ils sont spécialement conçus pour les manipulations vers le bas. Les directives attributaires manipulent le bas en modifiant son comportement et son apparence. Nous utilisons des directives d'attribut toe appliquer les éléments d'état conditionnel montrent que tous les éléments de masquer sont modifier dynamiquement le comportement d'un composant en fonction d'une propriété changeante. Certains des directeurs d'attributs de construction sont dans le style. Classe NJ désactivée, cachée dans juste switch et ainsi de suite. Jetons un coup d'oeil à quelques exemples d'utilisation hors bâtiment. Les directeurs d'attributs sont désactivés sur Masqué. Ayant bien assigné une expression booléenne, faughnder, invalide et formé sont valides. Représenter l'état du formulaire. Donc, en fonction de la validité des formulaires, le bouton est soit désactivé ou activé, et l'autre message est affiché nos enfants. Dans cet exemple, nous assignons une propriété de style toe do basé sur un objet être une propriété de couleur une fois échoué. Voici un exemple de N G Class Act. Un bon metteur en scène. L' expression est un objet représentant certaines des classes CSS, mais si la classe doit être utilisée ou non est déterminée en fonction de la valeur de ce qui est un lingot. Par exemple, si l'âge de ceux est inférieur à 18 ans, une classe CSS de danger supplémentaire est appliquée. Si la jauge de ceux est supérieure ou égale à 80 extradites succès sera appliqué. Les directives structurelles sont spécialement conçues pour la création et la destruction d'éléments Tom. Certains des directeurs de structure de bâtiment sont NGF Engy, loin de l'Inde quel cas dans ce qui différents directeurs structurels sont utilisés dans le modèle html avec un truc cul au lieu d'un crochet carré autour d'eux. Par exemple, l'ONG. Si direct, une expression booléenne vous est affectée ici. Donc, si les produits ne prêtent pas est égal à zéro, alors Engy. Si réel assuré que le coup trois est ajouté à la longue. Mais si les produits de condition Shortland égale 20 est fondu, alors Engy si va supprimer l'extra du haut. 12. Démo ngForOf, de l'de ngForOf, et ngForOf, cours: pour comprendre les réalisateurs. Prenons un nouveau projet afin que vous sachiez, ouvrez un nouveau terminal, obtenir faire bureau et prendre le commandement N g nu pour refuser temple et dire non pour le vote. CSS est bon. Donc, une fois que cela est fait, je voudrais installer Boots star en tant que Syrien à travers les directives. Timo dossier 10 p.m. J'ai mis Strapped et également ouvert le même dossier dans Visual Studio Court tapant l'art toussé. Nous voulons ajouter des ceviches Chaisson bootstrapped ou angulaires. Ici, je dois aller à la section des taches à une entrée ici pour des trucs de conseil qui est au nord. Marges soulignées barre oblique Est-ce que les choses slash ceci pour splash bootstrap CS est non. Nous allons également mener notre projet en tapant de l'énergie. Self crash espoir Nous allons ouvrir l'application dans un nouveau navigateur ainsi. Donc, l'autre est parce que j'ai donné une mauvaise partie à la distance de la barre oblique CSS bootstrapped Notre fenêtre C s est retourner le contrôle. Voir Onda exécuter la même commande une fois de plus. Alors maintenant notre obligation est prête et nous allons ajouter un nouveau composant pour tester l'utilisation directe . Donc j'ai ouvert une nouvelle mort puis ils en g g c pour générer, compétent avant que les quatre composants slash et composant de nous voulons créer ici pour tester Engy pour off Est-ce que ça a fait ? C' est un n g pour Devil. Allons au composant de l'application html. Où ce pays est présenté et éditer que c'est que nous voyons le nouveau composant aller au composant AB html Ici, descendre de tout. J' ai fait un dîner en cours de CSS à Judy et ensuite je prends votre annonce Engy pour lui comme un sac. Andi Maintenant, si je retourne le gelé, je devrais voir que notre nouveau composant est placé. Maintenant, comprenons la mise en scène N g 4 en utilisant un échantillon de base. Allons donc au D. D'abord, les talibans ont même appelé les gens, ce qui est un jour de congé de n'importe quel type d'objet. Et dans le n g dessus, c' est initialiser cela avec des valeurs factices. Donc, je voudrais ajouter ici, les gens, qui est ce début les gens se penchent sur moi à l'intérieur du AM va créer des valeurs comme , par exemple, congé est révélé H C 45 ville, et il ajoute également une image qui va être dans le dossier Assets. C' est probablement un gamin sous le dossier Images on. Je vais copier quelques images ici de la part de ce qui serait coupé A slash images slash sur Supposons que ce n'est pas notre chippy sur la même chose. Je vais copier de la pâte quelques fois, faire quelques changements. Donc, nous avons quatre objets dans l'Ari, et maintenant nous voulons regarder à travers cela et ensuite présenter les mêmes détails dans le HTML. Donc, la façon dont nous pouvons faire est que nous pouvons aller au HTML correspondant à cette Onda. Allons-y. Mettons un H 3. On dira que tu es Ng pour son saut. Supposons maintenant que nous voulons afficher la liste de toutes les personnes dans une combinaison Uriel comme . Donc, en général, c'est comme ça que ça va se passer. Et c'est une donnée. Si vous revenez au plus près, vous voyez que j'ai une balle qui dit que c'est une donnée de personne, mais je veux que ce bon répète pour chaque personne ici. Donc, pour ce faire, nous utilisons la syntaxe spéciale ici n g 4 sur le directeur structurel et les directeurs structurels ont un mince, sombre commencer leur tour de cul sur les preuves. Un gastrique. Vous pouvez voir que vous obtenez la liste de tous les détails structurels ici N g Car même si nous disons Ici c'est Engy pour off la syntaxe pour l'utilisation de la même est N G quatre Onda. On lui a assigné une expression. Maintenant, cette expression consiste en une déclaration de disponible, comme laisser manger hors d'une façon que nous l'avons jeter les gens. Donc, il faut une personne des gens d'accord sur, puis monté à une variable locale Korpi sur. Ensuite, nous pouvons accéder au être à l'intérieur de ce particulier et laisser slash Alexei d'abord, enregistrer ceci maintenant et revenir en arrière. Nous devrions voir que les mêmes données sont répétées quatre fois parce que nous avons 4 % de données là-bas. Donc, au lieu d'avoir ces données fictives, nous pouvons effectivement extraire les données de l'objet de personne p sur, puis imprimer ses détails, par exemple, je peux dire ici entre parenthèses collège p nom de point est de la ville porte. Sauvegardez ça. Et si je reviens, je devrais voir maintenant qu'on le sait de Bangla et ainsi de suite. Maintenant, si tu veux ? Oh, l'image de la personne. Donc tu peux aussi dire que je suis Jean. La source va être Peter. Imaginez quoi ? Peter image n'est pas une image réelle. Donc, nous voulons la valeur de Peter image Toby, associer à ce SSC qui peut être fait en mettant ceci soit dans un calibré comme ceci sont nous pouvons utiliser l'enregistrement carré pour le SRC disant que c'est une expression et l' expression doit être évaluée. Eso, je vais les orteils sauver ça. Et puis quand j'ai ouvert ça, je n'avais pas de photos. Donc, si je me rafraîchis ici, vous voyez que parce que nous n'avons pas de photos, il n'apparaît pas dans le monde avec cette copie et collez certaines des images ici. Donc, j'ai copié les images dans vous voulez dire ce dossier. Et comme vous pouvez le voir maintenant, si je retourne au rafraîchissement Onda de plus près, vous devriez voir que les images apparaissent. Les images sont de très grande taille. Nous voulons avoir une taille commune pour la même chose. Donc, cela peut être facilement attitude en ajoutant un style ici. Mais nous pouvons aussi le faire avec l'aide d'une autre directive appelée style Engy. Donc, le style indie peut être assigné à un objet d'arme donc je peux définir ici le style Engy est égal toe une expression de style ou que, ici encore, nous utilisons un crochets pour indiquer qu'il s'agit d'une expression et l'expression ici comme un objet. Et c'est la propriété sty que nous voulons donner, qui pourrait être,par exemple, par exemple, tout à fait sur. Ensuite, je peux dire ici 100 comme le coffre-fort, mais nous pouvons avoir à donner 100 PX pour pixel alors, dans ce cas, cela va être une chaîne, quelque chose comme ça sont finalement nous pouvons également assigner quelque chose comme cacher. Le Dr P X a 100 ans. Ainsi, les unités peuvent être spécifiées ici de cette manière parce que start ne peut pas être utilisé comme une partie de la clé. Il doit être donné dans des chaînes comme celle-ci et le sauvegarder. Et si je retourne au plus près, vous pouvez voir toutes les images sont éteintes 100 pixels. heure actuelle, nous pouvons également contrôler cela de l'intérieur de notre composant à PS. Par exemple, imaginez que je suis ici une variable appelée I n g. Stine Save it. Je retourne ici, je déclare une variable. Bien sûr, je m j Stiles égale orteil un objet constitué hors hauteur. Dark PX est 100. Bien sûr, cela doit être sous la forme d'une chaîne. Je peux également spécifier le rayon de bordure. Oh, cinq pixels. Encore une fois. Barda Radius L'un ou l'autre doit être avec un trait d'union. R de l'Oregon. Utilisez cette majuscule sur le trait d'union. R signifie que vous devrez peut-être le donner à nouveau devant les tribunaux. Et cinq p sortent de la chaîne. Donc je dois lui donner comme ça Tout ce que je peux dire ici, rayon de frontière notre P X, qui représente l'unité. Et puis je peux dire que tu as cinq ans, sauve-le et tu devrais savoir, veiller à ce que le rayon soit appliqué. Je voudrais peut-être donner un peu de marge. Je peux contre spécifier ici, marge sombre PX est également très bien. Il y aura donc un écart entre chacun d'entre eux. Ces styles peuvent maintenant être appliqués sur plusieurs éléments si vous le souhaitez, mais nous avons juste l'habitude de ne pas je suis les styles. Bien sûr, c'est parce qu'il n'est pas encore rafraîchi et ne jamais voir l'arabe est parti. Depuis qu'on utilise bootstrap. Nous pouvons également faire usage des classes CSS qui sont disponibles. Par exemple, pour le l. A. Je peux ajouter une classe CSS de Bootstrap en utilisant la classe n g sur la saison de classe Engy à nouveau Un attribut contre le nous devons fournir ici un objet où la clé est le nom du que vous voulez donner. Ceci est une expression booléenne qui détermine si la classe doit être appliquée ne sont pas, par exemple, je peux voir ici le succès du tiret de texte est vrai puisque la paix ne peut pas contenir moins, nous devons le mettre dans un format de chaîne et contre vous savez que le succès supplémentaire de la classe sera appliqué. Si cette expression valeurs à dessiner, ce qui est vrai, toujours je l'enregistre. Et si je retourne au navigateur, vous devriez les voir en couleur verte. Droit ? Mais je peux avoir votre expression aérienne qui a rendu ça faux parfois et que Merican tombe une autre fois. Donc, par exemple, je peux dire trois points d'âge qui est l'âge de la personne ici sur. Je peux maintenant vérifier que votre âge de Pierre est supérieur ou égal à 2 18 Alors alors vous êtes texte à la réussite. Donc si je garde ça et y retourne, tu devrais voir que John Doe n'est pas dans la couleur verte ici. On peut toujours en avoir un autre, et je peux dire un danger fixe au cas où Peter HD serait moins de 18 ans. Alors, sauvegardez ça. Je dois maintenant séparer les classes, l'une pour les adultes et l'autre pour les mineurs. Bien sûr, cela peut également être une fonction, par exemple, basée sur l'âge de la personne. Je veux obtenir une classe CSS ici afin que je puisse dire obtenir la classe CSS sur Peter, fonctionnalité périmètre Vida pour cela. Bien sûr, je n'ai pas de fonction appelée get CSS class. Donc je dois aller ici, effacer une fonction appelée obtenir sa classe de la CIA qui prend l'âge d'une personne que je peux vérifier si la jauge est inférieure à 18, puis retourner des cris de danger supplémentaires je peux dire retour. Merci services Dash Enregistrer. Retournez au navigateur et vous pouvez voir que nous obtenons exactement le même résultat aussi bien. Maintenant, allons à notre html sur notre titre ici pour afficher que vous avez quatre contacts, donc je vais ajouter que vous êtes un succès, il ya des gens ne prêtent pas de maïs Index, sauf ceci a commencé un titre qui dit qu'il y a quatre contacts. Nous allons faire parvenir un accord. Adoption ici de telle sorte que lorsque je clique sur le bouton de suppression chacun, celui-ci par 1 peut être supprimé. Donc nous allons fournir un bouton VT fin ou commencer l'eau sur. Ensuite, nous mettons une marque X afin qu'elle représente une sorte de capacité Action. Lorsque l'utilisateur clique sur ce, je veux que cela soit supprimé donc sur Cliquez sur le bouton. Nous voulons que Dieu efface la personne. Je ne fournirai pas l'indice de cette personne en particulier. Maintenant que nous avons une expression qui dit, Donnez-moi un objet de personne, je peux fournir l'objet de personne lui-même ici. Mais que faire si je veux fournir l'indice de l'élément, être dans l'air un peuple Alors quoi ? On peut le faire. Nous pouvons mettre un cynique ici et dire index comme je Donc la variable de boucle va maintenant me être donnée comme je et je peux fournir ce précieux que j'entends l'autre ici est parce que nous n'avons pas une fonction appelée personne complète située un dans mon t. Donc, je vais sur, puis dire ici, supprimer la personne, qui reçoit un index et puis je peux supprimer l'élément courant. Donc, par exemple, si les index un alors je voudrais supprimer cette voiture particulière. Donc, la façon dont vous pouvez faire est que vous pouvez dire que ce début les gens ne fournissent pas, qui prend l'index et le nombre d'éléments à croire en cet index. Donc, je veux supprimer un élément de l'index. Donc maintenant, nous avons cette fonction. Donc, si je retourne au navigateur et que je clique sur l'un des enregistrements, vous pouvez voir qu'il a disparu et il a disparu. Il est parti. Chaque fois que je fais des billets, vous pouvez voir que ça revient en fait avec de l'aulne, le numéro parce que j'utilise des gens qui prêtent sur. Ensuite, je clique sur le dernier et vous pouvez voir qu'il dit qu'il n'y a plus de contacts maintenant. Incident ce message. Je voudrais afficher un autre message disant qu'il n'y a pas de contacts donc je peux revenir ici et je peux dire couverture car il n'y a pas de contacts dans votre Je viens de caca. Je le vois, mais nous voulons afficher quelqu'un à un moment donné dans le temps, fonction de la longueur afin que je puisse utiliser une autre directive structurelle ou n G. Est qui ajoute cela dans tout ce qu'il supprime du haut, selon la condition que nous avons donnée ici. Donc je veux vérifier. Si les gens sont la terre est supérieure à zéro. Ensuite, nous devons spécifier ceci. Si les gens ne prêtent pas est égal à zéro, alors nous voulons afficher qu'il n'y a pas de contacts dans votre carnet d'adresses afin que je puisse enregistrer ceci . Retourne. Il dit ici qu'il y a quatre contacts maintenant il est 3 à 1 sur les détails ici qui ne sont pas des contacts dans votre carnet d'adresses. Nous pouvons également fournir un vrai ou un bouton ici qui peut réellement déclencher l'appel N g sur elle , qui initialise cette remarque que ce n'est qu'une autre fonction. Angulaire arrive à appeler cela. Le composant est initialisé au début. Mais si vous voulez o re initialiser cela, vous pouvez toujours appeler cela vous-même. Par exemple. Je peux aller ici et ajouter un autre bouton pour un lien ici, ou tourner votre lien 50 et ou trois t et tiret. Et puis je dis votre Seigneur sur et sur Cliquez sur ceci. Je peux appeler N G dedans comme ça. Donc, il n'y a pas de problème à appeler comme ça. Mais rappelez-vous, NJ est destiné à initialiser l'orteil angulaire au début, lorsque le composant est créé. Alors j'ai sauvé ça. Je reviens ici, j'ai quatre contacts retardés un par un chacun d'entre eux sont supprimés. Et puis il est dit, Seigneur, date de conduite improbable. J' ai appris toutes les données une fois de plus. Et puis il y a quatre contacts une fois de plus. 13. Démo ngSwitch: Travaillons sur un autre exemple pour comprendre Engy, Switch et Ng quel cas. Donc, d'abord, je vais orteil le genre de front de ligne, un nouveau composant appelé N g Stockage. Et puisque nous voulons voir cela sur ou l'écran de citation, va aller vers SRC au composant HTML et nous voulons inclure le commutateur Engy nouvellement généré eux aussi, je vais commettre cela sur le comportement après sh n g l'a changé comme un teinturier. Sauvez-le. Revenons aux problèmes sur dsi qu'il dit que la démo du commutateur Engy fonctionne. Donc, ce qui signifie que notre nouveau composant rouge est disponible ici. Allons au HTML du nouveau composant. C' est à une histoire qui dira l'interrupteur Engy. Ce ne sont pas quatre boutons, pieds porton, Ian Thorpe et Primaire. On en veut quatre et ensuite on veut avoir un dollar de bouton de légende que vous mettez dans un seul bouton. C' est un brouillon, donc on a quatre boutons. Nous serons également quatre offres orteil correspondant chacun d'eux. Donc je vais avoir ici. C' est ça. C' est Dave numéro de dollar, et je vais avoir quatre jours comme ça. Supposons que chacune de ces offres correspond à chacun des boutons. Lorsque je clique sur le bouton un que je veux que ce soit avec visible sur quand je kick sur le bouton pour que vous deux devrait apparaître sur lorsque je clique sur l'arbre. Seulement trois devraient apparaître et ainsi de suite. Maintenant, pour que cela fonctionne, passons aux années correspondantes. Déclarez aujourd'hui une variable appelée choix sur Donnons une valeur par défaut sur 12 la même chose. Nous lisons une fonction appelée SEC Choice, qui reçoit un choix et attribue ensuite une charge de distorsion des orteils. Sauvez-le. Retournons ici, Andi, Andi, on appellera cette fonction à travers celle-ci. Certains diront ici sur le film qu'il veut mettre le choix de l'orteil sur la même chose. Je vais copier et coller pour les autres en changeant la valeur de ceci. Donc, en cliquant sur n'importe quel désactivé, ces boutons appelaient réellement dysfonctionnement, qui change la valeur de ce choix. Na Mikel contrôle l'apparence de chacun de l'accord parce que les Chinois est en train de changer en fonction du clic que vous avez fait. Donc la première chose que nous allons faire est de remorquer ce jour-là va convaincre ces quatre jours. Je voudrais que votre changement d'ONG équivaut à deux choix sur Ne faites pas ça. C' est une expression. Nous allons ajouter un crochet carré. Donc les Ng, qui vérifie maintenant la valeur de Childs avec une expression que je vais être ici dans chacun de l'accord. Maintenant, c'est la directive structurelle qui contrôle l'apparence de chacun de cette affaire. Donc que structurel faire ici serait star NJ switch enfants égaux orteil. Je peux vous voir que si c'est un, alors c'est celui qui sera affiché. Si c'est aussi le cas, alors c'est le bon. Donc je vais copier ça étant stupide et faire les changements nécessaires. Enregistrez le fichier. Si je retourne au Rosell, je vois quatre boutons. Mais il dit que c'est dû numéro un. J' ai changé 04 et c'est le numéro 4, mais je le fais. Je clique. Il dit que c'est le numéro deux et le nombre traite chacun d'entre eux fonctionnent comme ça. Maintenant, juste pour être sûr que ça a l'air mieux. Donc, ce que nous pouvons faire, c'est que nous pouvons ajouter du contenu. Disons que je veux notre ici. J' ai eu une rangée avec deux appels. Andi dans chacun d'eux à notre image. Que le premier fardeau correspond à Tiger. Andi, je veux obtenir des informations sur Tiger de la clé. Pitoyeux. Je vais aller à Wiki. Très bien. A ouvert la première Ling, C'est cette image que je vais copier la plante et basée ici. Et puis j'ai copié le premier paragraphe sur puis coller ici aussi. Donc nous avons le 1er 1 Et de même, je vais faire la même chose pour les autres vues aussi. Donc copier pour quatre d'entre eux, Quatre types différents d'images et de contenu. Donc le 2ème 1 est le lion. 3e 1 est guépard. Et pour cet aigle, sauvez-le. Retournez au navigateur sur et vérifier sans Tiger Lion, Cheetah Eagle Cliquer sur que je reçois les détails respectifs Maintenant. Parfois, cela peut ressembler à un taxi, donc c'est ce que nous voulons réaliser. Donc, au lieu de mais en primaire, je peux changer est trop important Link maintenant. Bien sûr, ça aura l'air plus agréable. Alors prenez un lion, guépard et un aigle. Nous pouvons également avoir une option par défaut au cas où j'en ai une de plus en ce moment. Supposons de copier tout ce truc et de le coller dessus. Allons-y. C' est le bois de l'enfant. Très bien. Et je tape ton truc appelé cinq, que je n'ai pas. Donc, quand je clique sur la mordure, rien n'apparaît ici. Donc, nous pouvons également ajouter un autre accord et dire que cet accord particulier est un défaut. Donc, le commutateur ONG par défaut. Andi, tu n'as rien à donner pour ça. Et puis vous pouvez taper votre pas de contenu notre niveau pour cette élection. Désolé, assurance. Sauvez-le. Retourne. Donc maintenant je prends l'aigle, je reçois la sortie et je clique sur cela. Il n'est pas disponible pour la sélection. Désolé pour le désagrément. Donc, bien sûr, je peux y retourner maintenant. Un problème est que si je sélectionne le guépard ici et puis si je rafraîchis la page, vous verrez qu'il réinitialise le premier 1 Parce que dans le composant, vous pouvez voir le choix égal à un est le thé pour la valeur. Ainsi, chaque fois que vous actualisez, le composant est rechargé et les choix sont réinitialisés à un. Ce que nous aimerions faire ici, c'est que nous voulons orteil un signe qui a déjà fait le choix de cette variable. Mais nous devons le stocker ailleurs parce que lorsque le navigateur est actualisé, nous avons perdu ces données, donc nous devons les stocker ailleurs. Et où nous pouvons des histoires est quelque chose appelé stockage de session. Je peux ajouter une clé ici appelée comme par exemple, ils utilisent les égaux d'un enfant. Deux. Je peux dire le choix, Andi, quand tu dis « ONG « , ça vérifierait si la valeur est présente. Si leurs valeurs présentent Ussing, orteil ce choix pour que je puisse voir ici. Donnez cette valeur est disponible. Alors vous pouvez dire que vous êtes destructeur. Choix égal orteil. Obtenez la valeur des histoires de session pour enregistrer ceci. Retournez au navigateur. Maintenant, je vais guépard et je rafraîchis le navigateur. Vous pouvez voir qu'il devrait encore revenir à Guépard Goto Eagle. Et puis je réfléchis à cette page. Il devrait encore revenir orteil l'aigle. Si un bon outil de développement regarde l'application, il y a un stockage local et le stockage de la station et dans le stockage de la station pour ce domaine particulier . Nous avons une valeur appelée choix de l'utilisateur pour donc chaque fois que je clique sur une option, vous pouvez voir que la valeur change et cela sera conservé dans le stockage de décision tant que le frère est ouvert. Par exemple, ce moment j'ai cliqué sur Guépard, donc la valeur est trois. Je quitte le frère, puis reviens. Vous pouvez voir que quand je reviens, il s'agit de Tiger, principalement parce que les données étaient mortes dans le stockage de session. n'y a plus de données parce qu'elles ont été perdues quand le frère a été fermé. Donc, en fin de compte, nous pouvons également le garder dans le stockage local. ce moment, nous n'avons pas, mais nous pouvons le garder dans le stockage local afin qu'il soit persistant si je retourne à cela et que je change de stockage de section, de stockage local orteil et ensuite actualiser le navigateur une fois qu'il est proche. Cette fois, je sélectionne lion, puis ferme le navigateur, quitte le plus proche, puis je vérifie une fois de plus l'hôte local pour deux double zéro. Vous pouvez voir qu'il montre le lion par aigle sélectionné. Je quitte le plus proche et puis ouvrir le chrome une fois de plus et puis je vais orteil locaux pour deux double zéro. Vous pouvez voir qu'il se souvient de l'enfant précédent, même si le navigateur a été proche de 14. Démo - Directive personnalisée: Nous pouvons également créer nos propres directeurs personnalisés pour comprendre le même qui est créer un composant sur un direct vous. Donc, nous retournons à l'ivrogne aveugle prendra ici n g composante génétique. Mais cette fois, ce sera une démo personnalisée, et nous allons aussi créer une nouvelle directive. N g g d. Pour directive. Oregon a activé la directive générée et je peux dire à ce moment un nouveau dossier appelé If Pills Slash Appelons la boîte US quand j'ai appuyé sur Entrée va sexer seulement un fichier es parce que cela ne va pas contenir de HTML ou CSS, et il a mis à jour. La majorité est dans la section de déclaration sur. Revenons donc à notre composant APP h Démon et changement. Cette Engy a changé les coutumes de Moto. Est-ce qu'il a fait Devil démo de directive personnalisée et il a ouvert le navigateur et je dis local était pour Cordoba zéro. Vous devriez voir qu'il est la directive personnalisée Demo fonctionne sur. Ce qu'on va faire, c'est aller à ce nouveau composant et ce sont des cotisations qui sont à votre place  ? Et je l'ai dit, c'est un faire beaucoup de paragraphe sur, disons, C'est un paragraphe et beaucoup de notre image de fin. SRC égal orteil évaluer des images barre oblique Goldberg jpg Nous allons également prendre leur style Engy égal hauteur de l'orteil 30 p x 150 Maintenant, nous avons ces trois éléments Nous revenons, nous voyons ce contenu. Allons à notre directive Plus qui est en boîte sont dirigés RT sur je l'appelle comme un directeur de boîte parce que quand il est utilisé, je veux que cet orteil Surround les éléments comme une boîte ? Non, pas le sélecteur ici a un brakhage carré à la boîte Vous pouvez donner n'importe quel nom que vous voulez ici comme boîte elle-même. Mais Angular a suggéré que vous devriez utiliser une sorte de parfait ici afin qu'il ne soit pas conflit avec aucune des directives de construction nos attributs HTML Donc, le crochet ici indique que examiné Donc je ne suis pas parti. On nous a donné une obscurité sur les bateaux, auquel cas j'aurais pu l'utiliser comme une classe CSS. Laissons cela comme un attribut afin que je puisse aller au HTML ici sur ce que je veux, c'est que je veux voir ici que c'est une boîte comme celle-ci. L' idée de lui donner directeur était un actif que vous entendez est orteil avoir un accès à l' élément réel où il est utilisé sur de contrôler l'apparence de la même. Donc, pour le faire. La première chose est que vous avez remorqué demander une dépendance appelée comme un élément gauche. Donc nous plongons votre feu, il élément hors type appelé souffle élément, qui est un membre hors cours angulaire. Donc on a ça sur. Tout ce que j'ai à faire est de remorquer obtenir l'élément nécessaire, signifie que cet élément sur lequel ce directeur particulier a été appliqué sur un endroit et styles à cela pour le faire, nous utilisons une interface après vue dedans. Et nous sommes cette fonction manquante qui est appelée GI après l'avoir vu. Maintenant, ici, nous pouvons accéder à l'élément à l'intérieur de ceci sur. Alors ajoutez une soeur de la CIA pour que je le fasse. Je peux dire ça. Démarrer un point limite style point natif élément point et le style auquel nous voulons réellement accéder. Par exemple, si je veux fournir de bordure égale à deux un pixel solide, restons-nous assis, sauvegardez ceci. Et si vous revenez au navigateur, vous pouvez voir que l'affaire est maintenant avoir une boîte. Je peux l'appliquer à n'importe lequel de ces autres éléments. Par exemple, je peux avoir votre B chez Fox maintenant. Je devrais être en mesure de voir que le paragraphe a également la case. Andi, je peux continuer à ajouter de plus en plus de choses. Par exemple, comme une idée. La même chose. Une ou deux fois, je peux dire rayon de mort. Je peux juste me battre. Sauf que je peux dire ici Patties off, peut-être cinq picks up et peut-être une marge aussi cinq sauf sauver ça et revenir en arrière et nous devrions voir que les boîtes sont différentes maintenant. Je peux également l'ajouter à l'AMG par vouloir que je peux dire ici avoir des parcs sur elle fait juste la même chose pour l'image Aussi. Maintenant, je peux aussi contrôler certaines autres choses. Par exemple, si je veux fournir la couleur pour cette boîte différente de celle-ci. Donc, cela peut être fait en allant à notre classe Prickly une variable appelée taille qui est égale toe un pixel par défaut. Donc, je veux remplacer celui-ci et j'ai un style ici, qui est un type d'année solide quelqu'un est égal à deux solide sur. Mais alors je peux dire que votre couleur est égale au noir, ce qui est les valeurs par défaut sur. Maintenant, je peux changer cela à une expression en supprimant cela en utilisant une cour arrière, je peux utiliser des dollars de cette taille de point, dollar de l'espace ce type de stock dollars d'espace cette couleur de départ hors cours, vous savez, les changements. Si je retourne au navigateur, je vois toujours la même chose. Mais si un changement politique ici, je vais avoir une frontière rouge. Ce que nous voulons faire, c'est fournir ces valeurs à partir des éléments ici. Et la façon dont je peux faire est d'acheter un décorateur d'idées pour l'entrée activée sur ce que cela fait est maintenant. Je peux fournir une propriété appelée size à partir de l'attribut ici afin que je puisse ajouter votre expression . Taille égale à ce qui est l'expression ? Alors peut-être que je peux voir ici trois cochons auto que vous pouvez voir pour le 1er 1 C'est une pièce que Streep exceller. Mais pour le 2ème 1 ce n'est pas le cas. Je peux également ajouter une grande entrée pour le type sur après l'entrée pour la couleur. Maintenant, je peux utiliser n'importe quel off dans l'élément. Par exemple, je peux voir votre entreprise égale deux. Je peux dire que ta taille est égale à cinq fixem. Je peux aussi dire ici la couleur égale orteil. Voir à droite, Sauvez-le, retournez en arrière et vous pouvez voir que c'est une couleur rouge. C' est aussi une double frontière. C'est un combat, grand moi. Je peux avoir ça à tout ça. Vous pouvez voir ici. La couleur comprend deux soupirs de coup. Trop de gens ramasse la mort des selles égales. Ainsi, directeur peut être utilisé pour modifier l'aspect hors élément, ce qui est totalement personnalisable. 15. Créer la structure de base de notre application phonebook: savoir que nous avons compris les bases des composants. Andi même liaison sur une liaison de données un peu hors. Construisons une application sur comprendre plus sur la même chose. Donc, l'application va être une application d'annuaire téléphonique, qui va avoir le composant absolu comprenant d'autres composants afin que vous puissiez considérer un composant prouvé comme un composant parent. Barre latérale d'en-tête sur la maison pour être des composants enfants hors de bord. Nous allons également avoir ah, routage activé après un certain temps où le cyber affichera quelques nombreuses options et prenant sur lequel vous devriez être en mesure de voir un composant différent à la place du composant d'accueil, par exemple, pour afficher les détails du contact afin que je puisse avoir incompétent sont probablement édition orteil ou ajouter un nouveau composant. J' ai peut-être un formulaire de contact. Si vous voulez avoir une liste de tous les contacts que vous avez, vous pouvez avoir une autre entreprise. si l'utilisateur est en train de taper quelque chose sur la barre d'adresse et les pages pas téléphone. Nous pouvons même vouloir afficher une autre chienne, ce qui est généralement appelé une quinzaine de quatre pages. Maintenant, afin de gagner du temps, j'ai déjà créé un projet angulaire de base sur et j'ai déjà commencé à servir à l' hôte local pour deux double zéro. J' ai déjà ajouté bootstrap Ford, Artur à un. Andi. J' ai également ajouté que dans notre Chaisson angulaire pour commencer par cela, créer les composants nécessaires à notre application. Donc, je vais aller dans un esprit avant et m'assurer que je suis là dans le travail directement. C' est mon téléphone, mais le répertoire APP et je vais prendre cette commande moteur NGC générer composant et je veux que le composant soit dans les composants de carte de frontière. Ceci est pour organiser nos fichiers dans le bon style. Ensuite, je veux créer quelque chose appelé Header qui va être la tête du composant. Andi, je peux dire que je ne veux pas de ces tests. Je peux dire que le respect est égal à deux fermes ainsi que je peux l'entendre coutume de réparer quelque chose comme BB pour l'annuaire téléphonique. Donc sinon, par défaut, ça va prendre à. Donc ça va créer trois combats un fichier CSS. Un fichier tailleur de haies sur un fichier texte a également mis à jour le modèle d'application. Sale est très bien. Alors, allons en avoir un de plus. Donc cette fois je veux dire, c'était un orteil flèche vers le haut. Revenez à la commande précédente et je vais appeler ça comme barre latérale un plus compétent en ce moment pour la maison et il va jeter un oeil à ce qui est généré. Notes qui peuvent le faire monter. Tous ces combats. Donc, sous SRC, nous avons AB. Maintenant, vous verrez qu'il y a une bordure de composants avec des dossiers d'accueil d'en-tête et des cyberdossiers. Chacun d'entre eux vient avec les trois combats. Comme nous l'avons vu eso il y a un CSS html DS. Si vous regardez le HTML, il indique que votre en-tête fonctionne. De même, c'est ses devoirs sur le Sidebar fonctionne, non ? Donc c'est une sortie très basique qu'il va produire. Donc on va aller à la composante APP a bordé le Yémen, enlever de toutes ces choses et puis je vais à l'extérieur de la naissance ainsi que la maison. Mais en faisant cela, allons aussi nous assurer que nous allons structurer est exactement comme les bébés sont dans cette lumière. Donc d'abord, je vais ajouter un accord avec un rôle en tant que moi de classe qui se compose et donc vous pouvez juste contrôler l'espace et ensuite vous pouvez obtenir qui sont générés automatiquement, son équipe tous pauvres. Et c'est là que nous allons avoir quelque chose comme PB Dash header onda slash Phoebe, pas Heather. Pas même si je ne vais pas avoir de composant enfant notre contenu enfant ici. Il est important que nous donnions la balise de fin spécifiquement comme ceci, pas en se terminant avec un temps d'imposition vide. Alors je vais demander à un autre de faire notre rôle. Donc, je vais dire ici généralement rouler sur. Cette fois, je vais devoir prendre des colonnes pour que tu puisses rester ici jusqu'à l'appel Times 2. Et quand vous appuyez sur Entrée, vous pouvez voir qu'on va avoir deux colonnes. Maintenant, ces deux colonnes seront hors de taille égale. Et si vous ne voulez pas qu'ils soient de taille égale, alors vous avez les orteils trouver quel est l'appareil sur lequel vous allez cibler ? Donc c'est Emily utilisé de petits appareils qui comprend quelque chose comme des tablettes. Ensuite, vous devez spécifier quel est le nombre de groupes hors que vous voulez sur 12. Donc le monde entier est considéré comme nous trop bien. Par exemple, si vous voyez ce côté de cœur de studio visuel mais est à peu près occupant, vous pouvez dire trois nos quatre grands. Pour que je puisse en donner trois. Ensuite, le suivant serait sn restant neuf sur 12. Donc ce serait neuf. Et c'est à ça que ça va ressembler. Donc, si vous donnez cela comme pour alors cela dépasse 12. Donc je pense que ça ne va pas arriver correctement, donc tu dois le donner en huit. Donc, c'est bien à l'intérieur de ça. Nous allons fournir une vente de tableau de bord PB, mais à l'intérieur de cette cachette BB vraiment couleur. Donc, il est également important que vous vouliez peut-être spécifier cela dans une colonne, donc je vais aller fournir cette réponse. Sous-estimer le plaisir sombre sur ça. Mets ça après ça. Vous pouvez vous reposer ne sont pas déplacer F deux anciennes années html cool. Sauvez-le. Et quand vous l'enregistrez et retournez dans le navigateur, nous devrions voir Heather travaille CyberWorks sur les devoirs. Ce sont les composants qui ont été mis en place de cette façon particulière. Alors allons à un bout CSS, chacun d'eux l'en-tête cyber et la maison. Et juste pour te montrer à quoi ça ressemblerait, ça va ajouter un peu d'effondrement ici. Donc je ne vais pas interdire l'alerte dans quatre va être un fond bleu clair et il va dire que vous êtes chacun s o le 100 serait comme une application d'annuaire téléphonique. Onda. Disons un paragraphe pour dire que c'est Polaire bien en colère Lord Sept. Sauvez-le et il ne devrait pas le voir. Dans une minute, vous verrez qu'il y a un en-tête et bien sûr, je peux fournir une barre latérale et la maison avec différentes couleurs. Ça va devenir un cybernétique. Donc, nous avons la barre latérale html juste ici sur. Je n'ai pas d'options pour l'instant. Nous sommes pour que je puisse rester vigilant. D' autres Onda Allons juste donner un avertissement et ça va être une couleur jaunâtre qui est sorti. J' ai frappé trois et Xavier m'a fait. Et probablement cela dit alors que ça va vérifier, comment ça va ressembler. Donc, c'est ainsi que la minute principale, parce que vous pouvez voir qu'il ya un chat Onda. Euh, ça ne grandit pas parce qu'on n'a pas beaucoup d'options sur Quoi qu'il en soit, on va le faire. Cette couleur sera changée la couleur, sorte qu'elle ne fera pas beaucoup de différence. Mais si vous voulez vraiment fournir cela pour être une pleine hauteur. Ensuite, vous pouvez ajouter son temps à cela manuellement sur vous pouvez créer, par exemple, à la classe CSS personnalisée ou comme ils sont pleine hauteur. Évidemment, ça n'existe pas, non ? Donc pleine hauteur n'existe pas. Donc, je ne peux pas définir ma propre voiture CSS pleine hauteur dans les théâtres correspondant à cela Donc je peux commencer avec des gens obscurs. C' est en classe CSS sur. Je vais vous fournir votre taille. Ou plutôt, je peux dire, hauteur min 400 pixels sont 600 tout ce qui a du sens. Donc on sait comment leur menu va passer presque en pleine lumière. Eh bien, ce n'est pas vraiment important. Donc, je voulais juste vous montrer comment utiliser un CSS dans un composant. Donc, nous avons ça juste ici. Bien sûr, nous allons simplement supprimer ceci et ajouter quelques ou des éléments là-bas au fur et à mesure que nous avançons. Une dernière chose que je veux vous montrer ici, c'est la composante maison. Html. L' ensemble du composant est juste censé mentionner qu'il s'agit d'une application angulaire développée par votre nom, exemple, sur quelques détails à ce sujet. Donc, si vous avez une image, par exemple, vous pouvez copier une image et ensuite placer cette bonne chose. Mais comment on fait ça ? Allons essayer. Donc, les utilisateurs font une fois de plus à l'intérieur. Ça, on va faire une haie. Probablement trois ou deux là-bas, n' est-ce pas ? Eh bien, vous pouvez dire sur et impressionnant Angular sept application, je dis ici, paragraphe. Donc que laissé par son lettre B demain. Et puis, bien sûr que je voulais qu'il soit ici, pour que je puisse l'emmener. Je suis g SRC égal à quand vous dites SRC égal orteil. Où voulez-vous obtenir les images ? Téléphone ? Donc, je peux commencer par dire slash un sexe si vous savez pensé le G Andi, Supposons que je veux faire quelques noms de classe CSS. Classe égale orteil haute énergie. Andi, ça devrait me donner une image. Non, mais je n'ai pas cette image, donc ça ne va pas apparaître. Ça va juste me donner une option d'image cassée ici. Maintenant orteil agir cette image. Donc, ce que je fais, c'est que je dois essentiellement revenir à mes actifs SRC. Probablement. C' est donner une image comme un sous-dossier ici. Donc, nous voulons créer un dossier appelé Assets slash Images nous avons déjà des actifs que vous allez avoir sur les images pour l'on. Je vais copier Fine de mon système de fichiers local dans ce dossier. Donc je vais copier ce fichier ici. Corvino Tart, J p. G. Donc, je dois changer l'extension de p et G toe jpg et enregistrer ceci. Et quand je reviens, orteil mon application une urgence que l'image est que, bien sûr, c'est, ah, ah, une image un peu plus grande. Donc, si vous voulez le style directement, il est possible, Par exemple, je peux dire hauteur off. Probablement. Je peux dire 100 pixels et pas plus que ça. Et tu devrais voir non, ça va être plus petit, ce qui va le rendre meilleur. Très bien, donc c'est la première partie de notre demande. Ensuite, tout le monde a fourni différents composants orteil travailler avec notre application d'annuaire téléphonique. 16. Créer le contactde de l'un de contact: Amenons un nouveau composant à notre orteil d'application. Afficher les détails de la personne à contacter. Andi. Pour ce faire, revenons à la commande, invite et efface un nouveau composant appelé coordonnées qui ajoute également une classe de modèle à notre application afin que nous puissions travailler avec un jour de congé ou un contact inhabituel et ainsi de suite. Pour le faire. Quelqu' un dit n g générer la classe Et puis je n'aurais pas une slash de modèle de voiture plus complète et ensuite donner le contact. C' est le nom que je vais donner pour qu'il efface un cours. n'y a pas de mise à jour requise après modeler ts onda nous savons revenir à notre leader et il est goto Une source e au dossier verra qu'il y a un nouveau composant Dieu, détails de contact sur en dehors des composants. Maintenant, vous avez également un modèle qui a un contact de voiture de classe tortillas sur, qui est fondamentalement un contact de voiture de classe simple. n'y a rien tous les jours qu'on va déjouer. Alors quoi ? Vous êtes par exemple, si je veux un I d pour cette personne en particulier, donc je peux dire que je d et ensuite je peux dire que ça va être l'offre numéro 5 et aussi nous allons dire m'avoir forcé. Euh, tu peux dire « string ». Nom de famille. Vous pouvez aussi dire chaîne Et puis vous pouvez naître en faisant peu de choses comme, par exemple, le genre une chaîne. Et vous pouvez également affecter un D pour la valeur off. Sauvons moi. Ensuite, nous allons ajouter un livre de données qui est une carte fiable. Donnons à cela une chaîne que vous un, bien que ce type d'âge aurait beaucoup de sens. Mais nous allons faire en sorte que nous aimerions utiliser cela pour une certaine transformation. Donc, convertir un port de données en âge, Donc échapper chaîne là, alors vous pouvez avoir quelques autres choses. Par exemple, je veux avoir la photo de cette personne. Alors qui va être un Vous êtes dans un lien vers une réponse. Gardions cette autre chaîne. Alors tu auras une ville de laitue pour qu'on puisse servir le contexte par ville dans le pays de l'état. Maintenant, certains éteints. Ceux-ci sont probablement facultatifs. Par exemple, je ne sais peut-être pas la date de remise d'une personne ou je n'ai peut-être pas de photo, donc je peux laisser ce vide sur. Tous ces éléments sont probablement optionnels eso. Si vous voulez qu'une propriété soit facultative, alors vous devez simplement mettre un point d'interrogation Attar, Fin de la variable, par exemple. Je peux dire qu'il sera point d'interrogation et ensuite qu'ils deviendront facultatifs. Donc, gardons également cette image facultative. État optionnel de la ville sur l'option pays Maintenant, puisque nous traitons des coordonnées de la personne, cela est également ajouté deux voleurs de plus. Probablement après cela, je peux dire e-mail un strictement sur un quatre, qui est aussi une force. Et ce sont les aliments option. Gardions ça. Alors allons-y pour moi en appuyant sur le changement de bras pour sauver le combat. Donc ça va être nos données de modèle. Ça veut dire que tous les contacts avec lesquels on va travailler. Nous aurons cette information particulière maintenant que nous avons créé le moderne. Cela va créer le composant qui peut afficher une personne de contact étudiants. Allons donc aux coordonnées. Fichier des larmes sur Dhere. Nous voulons orteil créer une variable qui dit contact. Il est un très blâme de jour appelé contact et vous pouvez voir que nous obtenons l'importation automatique. Si vous ne l'obtenez pas, vous devrez peut-être importer manuellement la même chose. Donc, je sélectionne cette importation automatique ou il va prendre une partie absolue, non ? Donc, nous pouvons aussi dire qu'il doit provenir d'une partie liée parce que nous sommes déjà dans le dossier APP , donc nous pouvons aussi bien dire ici, slash fille Ensuite, vous pouvez spécifier une autre barre oblique médecin et ensuite vous pouvez dire moderne sur. Bien sûr, il voulait déjà. Alors donnons cela comme point, point, slash modèle slash couvent. Donc, c'est un fichier qui contient notre classe de conduite sur. Nous sommes importants que maintenant ce n'est pas que nous avons cela important afin que nous puissions initialiser cela. Techniquement, cela est censé provenir d'un point de terminaison de service Web distant, que nous allons le faire un peu plus tard. Mais en ce moment je suis sur initialiser qui sont citées valeur, et la question est, devrais-je le faire ici ? Sont devrait le faire ici maintenant, comme une règle générale du temps. Donc, nous gardons ce constructeur uniquement pour l'injection de dépendance, mais comme celui-ci pour toute l'initialisation. Donc, à cette fin, allons et créer un contact de distorsion égal orteil. Je peux dire un nouveau contrat sur. Vous devez fournir quelques valeurs pour cela. Je peux dire que ce contact de départ n'est pas activé. Bien sûr, le minimum sent que nous avons. Donnons donc un ID égal à un sur ce contact sombre. Prénom, non ? Donc c'est ton prénom. Je vais donner mon nom. Donc je vais donner être pas ça ou contact. Notre nom de famille est égal à l'orteil marque les champs obligatoires. Je serai ce contact sombre, écrit un email. Nous savons que nous n'avons pas d'appel à la naissance pour un dernier contrat. Art country équivaut à s'engager, mais j'ai oublié. Commencez le contact ou vous serez égal. Alors donnons-le dans un an. Donc format. Donc ça va être comme ça. Donc maintenant que nous avons initialisé cette valeur comme je l'ai dit, ça va venir d'un dos et saris, donc nous le ferons plus tard. Nous avons ces données. Maintenant, nous devons afficher cela sur le HTML. Donc, passons à la partie HTML de celui-ci, qui dit simplement actuellement que les détails de contact fonctionnent. Ce que nous aimerions les afficher dans un joli format. Peut-être des étiquettes suivies par des détails de ça. Donc je vais m'en servir. Ne pas rouler. Composé hors deal point Call en deux ou Rho. J' avais besoin de deux colonnes, mais cela, bien sûr, sera une. Mais c'est pour le prénom, le nom, par exemple. Mais je n'aimerai pas autant d'entre eux. Donc j'ai besoin d'environ 11 sur eux. Si je ne veux pas montrer l'idée de manger autour d'un médecin. Gardez-le autour de huit pour que je puisse revenir en arrière et sauver votre multiplié par l'aide. Donc je vais en donner huit avec deux colonnes chacune. Donc, si j'appuie sur l'espace contrôlé à la fin et entré et vous pouvez voir que nous avons complètement tous les détails, donc se souvient de leur prénom. Droit ? Donc c'est le premier moyen sur ça va être perdu. Moi ? Donnons ta des datedeslivres. Ce n'est pas forcément une séquence que je vais prendre votre email. C' est juste que ça va être amusant, et on a une scène de ville, donc on a aussi un sexe, mais on reviendra sur ça dans quelques minutes. Donc maintenant, bien sûr, pour remplir les valeurs, je peux utiliser l'interpolation, donc je peux dire un contact sur les prénoms. Maintenant, contact ici est la variable que nous avons créée ici. Donc, les variables étaient hors du composant sont accessibles à notre avis. C' est donc le point de vue, et nous pouvons y accéder et les apporter de cette façon particulière. Donc je vais copier ça sur le coller. Ça va être le nom de famille. Le sprint. Ici, ils seront un dernier. C' est le pays ici. Donc nous avons sauvé ça. Mais si vous revenez à votre application, il n'apparaît pas cela car actuellement il s'agit d'un composant téléphonique. Nous devons donc changer cela. Et cela est fait dans le composant HTML de l'application. Actuellement, nous utilisons PB maison où, comme je n'ai pas de télévision sûre, les chiffres du tableau de bord de contact cendres. C' est le nouveau composant qui a été créé. Donc, si je reviens à votre maintenant, vous pouvez voir que avant le prénom nom, c'est encore attrayant. Encore une fois. Voyez qu'il occupe les 50% de réduction sur la règle. Et si vous ne voulez pas cela, vous pouvez diviser cela en donnant une taille appropriée. Et alors comment on fait ça ? Nous pouvons aller aux coordonnées H démon pour chacune de ces colonnes que nous avons ici . Nous devons définir un tailleur. C' est à vous de définir la taille que vous voulez. Maintenant, assurez-vous que Studio Court a un jour de congé pour sélectionner un brevet prend, par exemple, je peux choisir comme ça. Je peux le meilleur commandant B ou contrôlé être sur Windows. Vous pouvez voir cela élire la prochaine occurrence au fur et à mesure qu'ils vont de l'avant. Et pour chacun d'eux, je ne peux pas revenir. Votre je peux dire Call STM Dash, c'est un quatre. Et puis je peux revenir à nouveau et ils peuvent opter dans chacune de ces colonnes pour être appelés S eux huit et j'ai sauvé ceci. Maintenant, si je retourne ici, tu peux voir qu'il va en occuper quatre. Et puis c'est une campagne huit. Bien sûr, c'est une bonne idée si je tape vos coordonnées pour que ça se passe sur un et ce n'est pas la tête. Oh, donc je dirais l'histoire, je pense que Contact. Creusez. C' est probablement un HR horizontal faire droit ? C' est à ça que ça va ressembler maintenant. Maintenant, alors que tout cela est bon, nous aimerions afficher ceci comme nom de la personne que nous savons venir sont aussi M. notre gâchis selon le sexe. Donc, ça va essayer cela en faisant cela, combinant ces deux lignes en une seule. Donc, restez juste le nom pur de la personne sur. Alors ça va être le contact. Mais prénom. Je n'ai pas besoin de tout ça maintenant dans un espace, autre interpellation. Donc c'est ce que nous pouvons faire maintenant pour que vous puissiez voir que le nom est que nous connaissons le coma . Mais si je veux montrer à M. notre gâchis ? Je peux le faire. Laisse-moi faire de la place ici, puis je vais utiliser une interpolation et dire ici que les gens du contrat ou du genre sont égaux aux orteils. Un avertissement masculin, a dit Maher, M. est la valeur, sinon il est manqué est le mieux. Maintenant, nous avons ajouté une logique à notre point de vue, qui est techniquement erronée. Mais il fait le travail que vous pouvez voir. Maintenant, nous avons M., nous ne sommes pas devenus le nom de la personne. Donc, disons, par exemple, que je retourne à la DS correspondant à celle sur. Changeons cet outil pour des exemples, Jane Doe. Bien sûr, c'est censé l'être. Est-ce que cet exemple ? Allons, changeons à la femme sur un sénateur. Sauvegardez ça. Et si je reviens ici, vous pouvez voir Mlle Genre et ça marche. Mais combiner une logique métier en vue n'est pas une bonne idée. C' est donc une logique. Peu importe, même si c'est une très petite logique, c'est toujours une logique sur ce que nous aimerions faire est de convertir cela en quelque chose qui est réutilisable. Donc, on verra ça dans une minute comme c'est quoi ça ? De même, ici j'ai un jour de congé, mais d'accord, donc Mais si je veux afficher l'âge de la personne où je n'ai pas l'âge de la personne ? Mais j'ai les gens être et je devrais être en mesure de calculer que chacun de la personne afin toutes ces choses puissent être faites en utilisant ce qu'une cicatrice tuyaux sur. Nous verrons que dans la prochaine vidéo 17. Introduction aux tuyaux et la création d'un tuyau personnalisé: en angulaire. Donc, nous avons quelque chose appelé tuyau, qui peut transformer une valeur en remorquage. Une autre valeur. Par exemple, Si vous voulez convertir cela en majuscules, alors nous avons un tuyau de construction appelé majuscule, donc je peux aller à mon HTML ici. Onda. Nous avons la ville pour que je puisse utiliser un symbole de pipe littéralement. Et puis je peux dire votre majuscule, et vous verrez que le résultat de ce serait la ville en majuscules, à droite ? C' est aussi simple que ça. Donc, vous avez juste à nourrir cette valeur Onda. Ensuite, la transformation se fera par ce tuyau en majuscules derrière la scène. Ceci a par cas est un alias pour un script dactylographié, plantes qui a une fonction et cette fonction appelée transform. C' est cette entrée particulière en tant qu'argument, puis renvoie comme valeur de substitution pour cette expression entière. Et c'est ce que ça va arriver. Donc pêcheur a peu de tuyaux de construction. Par exemple, si je vais à Io angulaire et puis goto chiens et que vous avez cet aviateur français sur, avez-vous pu chercher Disons, je ne cherche que des tuyaux, et ce sont quelques-uns des tuyaux couramment utilisés, et je peux voir qu'il y a un tuyau en majuscule. C' est la classe dactylographiée. Disons maintenant que nous pouvons utiliser le même concept. Onda convertir ceci, entrez l'objet de contact dans un fulling. Ainsi, par exemple, il serait beaucoup plus facile pour nous d'écrire toute cette expression. Alors laissez-moi l'enlever dans leur expression, puis tapez ici quelque chose comme contact. Sentons ça en remorquage. Une camionnette qui est un nom complet. Donc, si je sauvegarde ceci maintenant, il m'en donne déjà un autre ici parce que dactylographié est capable de reconnaître que ce n'est pas un bâtiment angulaire comme ainsi que vous n'avez pas un tuyau hors cette fois. Donc, si vous revenez au navigateur, vous verrez qu'il n'y a pas ou mis. Mais si je vais voir, alors la console JavaScript définissable, vous devriez voir un éditeur. Parlons cela sous droite et vous pouvez voir que cela donne une erreur. Le nom complet du tuyau n'a pas pu être trouvé sur son donner un autre juste ici, donc le contact mordre nom complet, et c'est là que nous pouvons créer notre propre droit ? Donc, faisons cela en allant orteil l'invite du client tout comme nous avons généré des composants cette fois un militaire n G générer de la lutte savonneuse pour pipe ici. Et puis vous pouvez spécifier cinq. Ça va être mon nom de dossier. Et quel est le nom de la morsure que vous voulez ? Donc je vais appeler ce cul pour moi. Il va effacer quelques dossiers numéro un serait un tuyau lui-même. Une seconde serait une tache. Donc, je ne veux pas créer de cas de test pour le moment. Essayons donc les lunettes pour les formes onder. Si une pression sur Entrée, il va créer un seul fichier sur les mises à jour le fichier du module aussi bien. Donc, c'est parce que tout comme vous avez un composant pour faire partie d'un module, même les tuyaux sont également supposés faire partie de MRT. Maintenant que nous avons fait ça, revenons vérifier. Y a-t-il un changement ? Vous pouvez voir qu'il n'y a pas d'éditeur, mais nous n'avons pas de sortie. Aussi ici sur la raison de cela est très simple. Alors allons voir ça. Permettez-moi de conclure sur les amendes sur de minimis goto SRC ab, et vous voyez qu'il ya dépit et nom complet tortillas de type sombre est un nouvel ami qui a été généré et qui est une classe avec une fonction appelée comme une transformation. Il reçoit la valeur sous forme d'arguments et ne renvoie rien à ce stade car il ne retourne rien. C' est en fait sur la chaîne vide que nous obtenons. Vous pouvez également voir que la classe est décorée avec un tuyau sur qui a un nom et le nom est entièrement Ceci est le nom que nous avons défini dans l'invite de commande Andi. Il est livré avec une classe appelée plein nom pipe Implémentation type transform. Maintenant, c'est la fonction que nous aimerions utiliser pour que peut-être avoir utilisé cela quelque part est comme nous avons dit que dans l'enregistrement biblique avec elle la vie de contact, plein moi Donc, ce qui signifie que je m'attends à ce que la gauche éteigne ce tuyau à être un objet. Donc ce que nous recevons ici, c'est cet objet ici. Donc je peux dire littéralement que vous êtes que ça va enlever un argument de type. Appelons nous contacter hors type de contact. Cela signifie que vous devez fournir un objet lui-même si sa fourniture autre chose qui va être une erreur lors de l'utilisation et il va retourner une chaîne. Donc, entre le type de ricine sur cette corde de robe, bien sûr, nous devons retourner quelque chose. Maintenant, nous pouvons évaluer, euh, les conditions par ici, disant que s'il n'y a rien fourni, c'est retourner une chaîne vide. Donc je peux dire ici, si ce n'est pas le contact sur, alors je peux dire votre retour. Je peux fournir une chaîne vide. Car si le contact est un objet réel, il sera hors de ce type que les gens et les enfants. C' est un objet de contact de classe. Et maintenant je peux voir ici quelque chose comme Contact Door m'a forcé. Plus un espace un espace plus contact ou nom de famille Bon. Encore une fois, vous pouvez voir que j'ai le prénom et le nom ici. Mais que se passe-t-il si je veux aussi inclure les plus serrés comme M. et Mme et ainsi de suite ? Donc, nous allons définir la carte disponible Titre égal orteil contact notre sexe deux particules pour les hommes et puis je dis marque de mode. Alors je l'appelle « M. Sinon », ça va être raté. Maintenant, nous pouvons combiner cela avec des dettes de titre plus. Donc, si je l'enregistre et retourne au navigateur, il ne devrait pas voir que c'est M. Nous savons. Allez, 18. Créer un tuyau personnalisé pour afficher a à partir de la date de naissance: Allons chercher une autre pipe cette fois. Interrompre l'affichage d'un port de données. Alors affichons l'âge de la personne. Maintenant, l'âge de la personne peut être en termes. Off. Les années sont des années et des mois ou des années et des mois et des jours. Donc, pour ce faire, ajoutons un nouveau tuyau. Revenons à la même commande change l'âge des orteils. Très bien, c'est clair aujourd'hui. Age dark pipe tortillas a également mis à jour le fichier du module. Retournons à notre école arrière. Il se détache de celui-ci. Je vais entrer dans l'âge, c'est supposons que l'usage est éteint. Il se trouve que c'est quelque chose comme ça. Vous allez fournir la conduite, Docteur. Vous serez libre de cette chaîne. Andi, ça va être fourni à l'âge alors supposé ça. Cela devrait afficher quelque chose comme, disons, 45 ans plus tard. Et puis si je spécifie quelque chose comme ça avec age cooler one sur de Donc si celui-ci est un, il devrait afficher la même chose. Supposons que c'est le front de mer Andi. Dans le cas si j'ai l'option que puis nous allons âgés de 45 ans le jour, quatre mois et si j'ai un autre C'est un par exemple. Trois. C' est censé être 45 ans, 4 mois sur 70 ans, un RV Trevelyan prenant ça. Non, nous pouvons voir que dans ce cas particulier, je n'ai pas d'informations supplémentaires ici. J' ai une information supplémentaire, qui est comme une information ici. C' est dans une rue héritée. Maintenant. La façon dont cela fonctionne est que le temps gauche dit hors de l'âge d'utilisation du tuyau qui est ici sera considéré au premier argument. Et après cela, vous pouvez dire deux-points et tous les périmètres supplémentaires si seulement fournir plusieurs paramètres que vous pouvez dire deux-points ex school et blanc plein et dit et ainsi de suite. Donc ce sera le premier argument Ce sera le deuxième argument est le troisième argument, quatrième et tour de la peur. Donc, dans notre cas, nous voulons juste un seul drapeau ici. Donc si le drapeau est présent, il est 12 ou 3 si c'est un sur autre chose que sur un arbre, alors ça va être celui-là. C' est donc ce que nous voulons définir ici maintenant. Donc, évidemment, maintenant la valeur ici est, bien sûr, le nom de la variable Aiken le définit comme autre chose. Je peux même l'appeler comme vous le serez. Et je suis sûr que ça doit être une ficelle. Donc parce que nous savons ce que nous fournissons. Donc ça va être un string onda, suivi par disons, exemple, je l'appelle plat un optionnel. Mais si cela est fourni, il doit s'agir d'un numéro comme celui-ci, n' est-ce pas ? Mais c'est facultatif. Pourquoi c'est cette option ? Parce que je n'ai pas besoin de le fournir. Donc ici, les finances s'appliquent. Je vais avoir 45 ans. Maintenant, c'est fait. Tu sais, si depuis que je suis la Grande-Bretagne dans un autre, donc si tu veux utiliser ça, ça ne te montrera aucune valeur. Bien sûr, je ne suis pas utilisé de toute façon, mais c'est un jour de congé, mais ceci est suivi par je veux donner quel est l'âge réel de la personne. Donc ça va à cette heure, c'est tm il. Donc, je vais au composant de détails de contact des composants html sur. Ensuite, voici où j'ai affiché le d sera maintenant avec la volonté sera. Si je veux spécifier combien d'années quelque part vous que br pour briser sur, alors je vais utiliser et le symbole de pipe et je dirai oui, contacter le mal être l'âge de la vie. Donc maintenant, il n'y a pas de mieux. Mais cela ne produit pas d'atouts maladroits. Comme vous pouvez le voir, il n'y a pas de sortie ici. Probablement je ne fournirai pas ça dans une épave ronde. C' est très bien. Ça va ajouter une valeur significative ici. Maintenant, comment puis-je calculer la clé sera déformée, soustraite du courant à ce jour. C' est une logique simple, mais on verra comment ça va se faire. Je vais dire, sinon, il sera juste choisi sur une corde vide. Donc on n'affiche rien d'Adulte. Si l'affaire sera, est disponible, nous savons apparaîtra un objet. Créons un DT gauche équivaut à deux nouvelles dates de développement. Donc, nous avons créé l'objet. Maintenant, je dois lui dire quel est le nombre de jours de congé sont des années entre eux. Donc, je vais dire que vous êtes laissé si égal à date maintenant moins DT Wonder Obtenir le temps Maintenant obtenir le temps Donne le temps en millisecondes ils ne savent pas que c'est une millisecondes actuelle. Donc on a une grande différence. Et maintenant, je peux créer un objet de fossé. C' est la qualité, il est deux égal à Toe savait que hors. Le seul problème ici, c'est qu'il va l'officier d'ici 19 années 70. Je dois soustraire. C' est Essayons ça. C' est le type d'année est égal à 80 pour obtenir une année complète moins 1970. Ne bouleverse pas laisser le mois parce que les orteils dd deux sombres obtenir mois sur. Alors, bien sûr, que les jours sont égaux orteil. Battre pour ne pas avoir de date, et ça va donner le gros hors du mois. Maintenant. J' ai besoin de retourner une valeur basée sur ce drapeau afin que je puisse utiliser votre cas de commutateur. Il est également clair que le flux qui est un laisser sortir le mettre entre guillemets ou je peux dire que l'âge est égal à une chaîne vide. Pour l'instant, c'est un indicateur de commutation allumé. Maintenant, je peux dire ici que si le drapeau est pour obtenir l'historique du drapeau, le drapeau est un sont si le drapeau est par défaut, que s'il y a autre chose, donc pour ces deux-là, nous allons obtenir la même chose. Mais comme, par exemple, je peux dire ici tout le pied est égal orteil. Je peux utiliser un dos prendre ça. C' est pour la chose promise que je peux avoir des variables incluses ici. Maintenant, c'est là que je vais dire le propriétaire ici. Oui. Donc c'est comme 45 ans à l'époque. Bien sûr, je n'ai pas besoin de dire « break ». En fait, ça va être dans la section par défaut ici parce que si c'est l'affaire 100 personnes, ce sera le bureau. Mais si c'est un cas pour, par exemple, je dirais qu'il est déjà cite des années pieds sur un dollar par mois. Waas on, bien sûr, très parent. Je devrais dire casser ici parce que si les enfants sont un, seulement cette valeur. De même, je vais dire cas 3 ou mettre égal orteil. On peut dire vos années de dollars . Mettons un dollar par mois, mois, dollar C'est ça donc nous avons maintenant donné de façon appropriée. Donc ça va le sauver et voir. Bien sûr, une chose est que je ne suis jamais revenu. Ces valeurs que j'ai à dire sauveraient cela. Revenons à la Rosa pour voir que c'est 44 ans maintenant. Revenons à notre HTML sur un drapeau ici. Donc, si je dis appelé maintenant, si je reste avec revenir au navigateur, il devrait dire 44 ans et 11 mois. Et si je prends ton drapeau est trois sauvages, retournez sur ça dit que tu es je crois que j'ai raté une déclaration de pause ici. Donc ça va sortir de la pause. Sauvage. Retourne maintenant. Nous devrions voir qu'il est écrit 44 ans, 11 mois et 6 jours après si je donne ici dans le vieux port. Donc, si je dis autre chose que trois que très bien dès le Syrien, vous retournez et voyez qu'il est par défaut à un et c'est implicite 44 ans, et c'est ainsi que vous seriez en mesure de créer une pipe, ce qui est des vues d'un morceau de logique. 19. Assignement - Créer des pipes personnalisés pour le remplissage d'une chaîne avec des caractères: Donc voici que je voulais dire que j'ai un tuyau local ouvert pour deux, double zéro et la page ressemble à ceci. Et c'est parce que le html ici. Donc, il est dit que l'attelage de moins de l'âge de rien d'autre. J' ai créé deux tuyaux ici l pad tortillas de tuyaux sombres et sont mauvais sur 5 30 ans. Donc, vraiment, utilisez cela dans notre HTML. Ici. Je vais prendre un paragraphe et puis je prendrai un nom comme si on n'était pas Andi comme un autre . Vous verrez qu'il y a une chaîne Partridge côté gauche ici et par défaut elle a alloué cinq comme astuces. C' est un autre exemple dans la composante enlèvement. 30 ans ont défini une variable multi, qui a été un cento. La texture que nous connaissons pour que je puisse venir ici et que je puisse utiliser la même chose. Je peux me le dire par n'importe qui et ensuite je peux spécifier 25. Ça veut dire qu'ils sont totalement radiés. Toute la chaîne de mise va être de 25 dont quoi que ce soit le nom occupe, les statistiques pourraient être sur le côté droit, mais la queue gauche sera battue en utilisant un personnage de mon choix par exemple, si vous mettez un dollar ici, c' est donc le deuxième périmètre de l'aide. Donc, ce qui signifie après la séparation des dollars total, il serait 25 caractères ou nom moyen, qui est actuellement, nous savons que les personnages de lutte de prix sur le côté droit. L' enfant gauche sera associé au symbole dollar pour le nombre restant de caractères signés. Sauvegardez ça. Vous devriez voir des symboles de 20$ suivis par le monde. Tu sais, Nike façons. Vous pouvez également utiliser notre feu. Certains exemples peu clairs et d'autres ne sont pas dire que le nom est 25 probablement un hachage sur la fermeture des crochets. Gardez-le, et je devrais voir les combats se dérouler du bon côté. Cette fois, nous pouvons également combiner les deux. Tous les parents sont de nouveau ensemble. Stay Here est un autre exemple. Donnons le nom que j'ai fait sur le côté gauche pour 10 personnages avec comme astuces. Et si vous ne mentionnez rien, ce sera une stricte par défaut pour une journée. Je côlon 15 le sauver, et je devrais voir le total où il serait 15 sur le nom que nous savons exactement se trouve entre les deux . Donc c'est la tâche que je pense que vous auriez besoin d'environ 30 minutes pour cela sur le meilleur 20. Créer le cours de contactsService: le leader de cette page particulière ici est hardcore fait dans le composant lui-même blessé à la date de ce que cela devrait être récupéré à partir d'un serveur distant sont à partir d'un type de service Web . Cela peut être fait ici même. Ce n'est donc pas une bonne pratique. Il serait bon de créer une carte de classe réutilisable en tant que classe de service sur, puis mettre toute votre logique métier notre logique d'accès aux données dans les usines de service et les utiliser à plusieurs endroits sont des composants multiples. Maintenant, pour ce faire, nous devons créer une classe de service. Revenons à l'invite de commande sur. Laisse-moi éclaircir ça. Et puis je vais utiliser N g g , et ensuite je peux dire s pour le service. Ou vous pouvez dire dans les enquêtes dégénérées. Et puis je donne à votre dossier où je veux créer mes services. Je peux fournir nos services et ensuite je vais donner ce que, dans le nom du service, je peux appeler comme un annuaire téléphonique. Maintenant, il va effacer les sondages téléphoniques points ts plus ça va aussi me donner des cas de test , que je ne veux pas sur les lunettes aux pètes. Il va effacer une seule plante dactylographiée, pas de mise à jour au modèle ts. Maintenant, revenons et ouvrons la même chose. Donc on va y aller. Regarde la barre oblique des annuaires téléphoniques dans ses 30 s qui a créé un service d' annuaire classique . Mais pour l'instant, nous voulons avoir une fonction ici qui peut vous donner les coordonnées que je vais donner ici. Obtenir les détails de contact sont quelque chose comme ça, ce qui prend un type de numéro i d. Off. Donc c'est censé prendre une idée. Et selon l'idée de postuler sous-évalué. Alors, qu'est-ce qu'il est censé revenir ? Il est censé retourner un seul objet de contact. Bien sûr. Votre importation que sur alors ici est l'endroit où vous créez l'objet et retourné la même chose. Maintenant, je suis vraiment censé faire un orteil de demande. Http Web salaires. Quoi ? Nous le ferons un peu plus tard. Donc je vais extraire cette cour à partir d'ici. Ensuite, mettez-le dans ce service particulier maintenant. Donc, dans l'amour, contactez notre i d égal orteil un je voudrais dire que j'ai besoin qui est souffert par l'utilisateur. Maintenant, il est dit ici que déformer les secrétaires contactés dans d'autres parce que nous n'avons aucun membre disponible. Appelez le contact ici. Alors ce que je fais que ce gamin sur ces choses démarre quelqu'un qui commande sur Mac contrôler les fenêtres sur et les sélectionner tous. Et puis croyez que, bien sûr, une dernière chose est que je vais trouver une variable locale appelée Contact. Alors laissez le contact. Il va à un nouvel objet de contrat, et puis j'envoie toutes ces valeurs. Le premier jour, ils montent toutes ces valeurs. Je vais peut-être devoir rendre ça. Alors faisons un contact de retour aussi. Donc maintenant, nous avons une fonction qui va écrire un objet de type contact avec toutes ces valeurs. Maintenant, ici, nous devons recevoir ça. La question est, comment puis-je obtenir cette fonction ici ? Donc, une façon que vous pouvez faire est que vous pouvez toujours créer un objet à partir de cette série d'annuaires téléphoniques clans, par exemple. Tu peux dire que les orteils des gens de service gauche, nouvel annuaire, Soviétique comme ça. Et puis vous pouvez voir ici, ils commencent contact égal service de remorquage. Commencez, obtenez les coordonnées, c'est ça. Et bien sûr, je dois vous donner une idée. Appliquons les idées Un. Maintenant, si vous retournez à un frère, vous devriez voir la sortie sans aucun problème. Donc on a ce Hollywood. Ce n'est pas la façon dont vous devriez faire, principalement parce que la classe de service de l'annuaire téléphonique elle-même peut avoir des dépendances sur un autre sujet, littéralement ou un autre sujet de service. Par exemple, si nous voulons faire une demande à et c'est le point de raison TDP Webster, nous utiliserions quelque chose appelé Hits TTP Client, qui est d'angulaire. Donc maintenant, nous ne savons pas comment créer un objet à partir de cela. Donc, nous voulons angulaire pour me donner cet objet aussi. Donc, évidemment, faire cela a beaucoup et beaucoup d'inconvénients. Dans ce cas particulier, cela a fonctionné. Je l'ai montré. Mais ce n'est pas la bonne façon de faire la bonne façon de faire ce serait orteil Demandez angulaire de créer un objet hors de ce service d'annuaire téléphonique et de m'injecter cela de sorte que lorsque vous faites est vous définissez sur. Votre dépendance est dans le constructeur. Maintenant, vous devez savoir que nous n'avons jamais créé d'objet à partir de ce composant de détails de contact. Il est angulaire, ce qui crée un objet à partir de cette classe. Maintenant, évidemment angulaire, est censé appeler ce constructeur particulier sur c'est quand. Si nous définissons une variable ici, appelons-le un service Onda. Nous avons défini leur type de données de ce qu'on appelle « saris ». Maintenant, angulaire sait qu'il doit créer un objet à partir de ce service d'annuaire téléphonique. Maintenant, en ce moment, où angulaire fait cet angulaire va regarder dans la manière positive. Avons-nous déjà un objet hors des sondages téléphoniques ? Si la réponse est oui, ça va l'injecter ici. Mais si l'objet n'a pas encore été créé, il va créer un objet et ensuite me le passer ici, à droite, donc ça s'appelle un singleton. Cela signifie qu'à tout moment, vous aurez une seule instance hors annuaires téléphoniques ou classe de risque ainsi de suite quand angulaire a créé cette classe. Donc, s'il y a des dépendances mentionnées ici, angulaire injecterait également. Cette dépendance est parce qu'il est maintenant une responsabilité angulaire de créer l'objet. Donc, maintenant que nous avons reçu cet objet surentendu, cette variable devient locale à cette paire de crochets bouclés particulière, qui signifie que je dois créer une variable membre ici sur. Ensuite, je dois affecter cette variable locale à la variable membre et ainsi de suite. Mais dactylographié a une fonctionnalité fantastique ici. Je peux déclarer cet argument constructeur à haut taux, nos publics sont protégés et ils font automatiquement en tant que membre. Variable maintenant, non ? Donc, évidemment, dans nos impôts, je dois maintenant dire que cela commence que nous commençons à être contactés à partir d'un seul. Et si vous revenez au navigateur et que vous pouvez voir que la sortie arrive également ici, nous allons également ajouter un autre petit détail ici. Ajoutons donc une image d'art de contact égale deux. Je vais ajouter un « Vous êtes aujourd'hui ». C' est un lien externe, donc je vais enregistrer ceci. On n'est habitués à cette photo nulle part. Alors passons au composant de détails de contact html Probablement juste en dessous du HR. Donc c'est l'île. Je suis G sur. Maintenant, nous devons prendre SRC égal à deux. Maintenant, la question est de savoir comment je veux dire avec l'image maintenant, très simple. Je peux toujours utiliser votre contact notre image comme celle-ci qui est une expression que l'expression sera résolue. La valeur de l'image sera montée au SRC. Permettez-moi aussi d'ajouter un peu de style de sorte que ce n'est pas une souche égale à deux hauteurs qu'il a gagné 50 picks sur ce. Sauvegardez ça. Je retourne au navigateur et je devrais voir une image avec cela. Maintenant, ce n'est pas spécial, mais si vous concevez un attribut, une expression qui peut être attribuée dans un autre. Attends. Donc, par exemple, si je supprime ceci ici, alors il supposera que c'est la valeur réelle. Cela signifie qu'il cherche une photo dont le nom est de contacter notre photo, ce qui est faux. Donc, évidemment, vous allez avoir une erreur, n'est-ce pas ? Faites-en une image cassée plus une erreur disant qu'il est à la recherche d'un hôte local pour deux étirements double zéro. Contacter cette photo. Maintenant, nous voulons dire angulaire que ce n'est pas une valeur de chaîne. C' est une expression onda. Une façon de faire être vu déjà en utilisant un calibré. L' autre façon de faire est d'entourer ce SNC d'un crochet carré. Donc nous disons maintenant que ce brandy, ce que nous assignons est une expression, pas de vraies valeurs fondamentales. Donc, quand je dis cela, le problème voit la même image revenir à nouveau 21. Configurer le point de terminale /contacts REST: Nous avons donc construit sur le service angulaire, qui est injectable, et actuellement il me donne un seul objet de contact. Maintenant, pour que nous puissions travailler avec de l'argent, les gens contactent les objets et comprennent comment récupérer les données à partir d'un point de terminaison de service Web distant . Construisons d'abord un point de terminaison de service Web lui-même. Donc, à cette fin, revenons à un nombre de commandes et je veux installer quelque chose appelé Jason Server sur. C' est un repos très simple et sophistiqué un fournisseur de services. Essayons d'installer ça. Donc npm I pour installer sur une vie Vous êtes Jason Server. Donc, le Suroor décent dépend de l'âge est dans le fichier, que vous pouvez garder n'importe où dans votre projet. Un arbre sur l'asile peut être n'importe quoi. En fait, le plus tard peut également être servi à partir d'un fichier Jobs pourrait. Mais pour l'instant, nous allons créer un dossier dans notre application à la victoire. Allons-y toe-chardon mon répertoire d'application. Donc je vais créer un nouveau dossier ici sur un fichier à l'intérieur de ça, Appelons ça notre bébé slash data Jason. Et c'est un combat que nous allons créer Onda qui va être un objet. Il va au Jason va représenter un objet, Onda. Chaque point final est représenté à l'aide d'une valeur clé. Par exemple, je peux payer des contacts purs, qui est une clé, et la valeur serait un ari. Et ce serait un seul objet de contact, par exemple. Je peux dire que je suis un sur ce sujet. Je peux dire prénom. Bien sûr, sur ce étant amusant j, il doit être une syntaxe très stricte. Je dois dire au tribunal un sur double cours, prénom sur. Allons te prendre mon nom. De même, je vais donner le reste des jours D. Donc nous avons le prénom, le nom de famille genre. Il a fait téléphone City, Etat, pays. Je crois que ce sont là les valeurs. J' ai manqué quelque chose ? Ouais, rencard off. Mais c'est une sorte de date de naissance. Donc, ce qui est le sera sur 1974 01 à 0. C' est mon premier objet. Je peux avoir un autre objet juste pour m'assurer que cela a fonctionné. Trouve une copie de cette section pour la virgule et goûtez-la. Nous devons donc conduire des objets en ce moment. Bien sûr, comme nous donnons un i d Donnons nous, disons John Doe sont Faisons en sorte que ça va être une femme. Disons que c'est un exemple pour que je puisse avoir Jane Doe à Hexham sans téléphone. Mettons un peu du numéro de téléphone pour chaque cinq par 897 un numéro. Donc ça dit, j'ai fini le Texas et on va faire l'U S. A. On. Faisons de nous notre C 85. Un autre mec. D' accord ? Et nous avons besoin d'une image. Et si je ne veux pas obtenir d'image, je peux laisser ceci vide, ou je peux même spécifier que c'est non, parce que nous n' avons pas cette valeur donc nous pouvons juste effacer tout et ensuite le rendre non, parce que pour le moment je ne en ont fait pour cela. Maintenant, allons vérifier si nous pouvons travailler avec cela maintenant, vous pouvez voir que les Jasons sont ce qui a Bean installé. Je vais aussi aller orteil emballé ou Jason pour faire une entrée pour démarrer le serveur. Donc on ira ici et on a effacé une entrée pour que l'entrée soit des yeux colorés, Jason leur serveur. Ou vous pouvez l'appeler le reste du serveur tout ce que vous voulez, quelle est la valeur pour cela est Jason, leur serveur. Et puis vous pouvez spécifier le port si vous voulez Test export par défaut taux commence par, je crois, 3000. Donc, ne donnons pas que 4200 est l'endroit où mon angulaire est en cours d'exécution. Donnons-le à 4300. Nous ne pouvons pas simplement spécifier qu'il doit surveiller les modifications apportées directement à l'amende. Donc, c'est OK. Et puis enfin avec leur db slash ater Jason. Et c'est le combat qu'il est censé commencer maintenant que nous avons créé une option ici , allons continuer et courir jour. Donc, pour cela, vous dites npm Iran suivi de tout ce qui sera donné ici, cela pourrait être n'importe quoi. Je vais mourir pur Jason Dash a dit, A gauche si tout va bien, vous devriez voir qu'il dit ressources http locaux nourriture trois double zéro contact slash. Donc, si ouvert cela dans un navigateur sont dans un facteur à deux jambes, je devrais être en mesure de voir qu'il y a deux contacts. Ce que cela me permet aussi de faire est de rechercher mon i d. Par exemple, si c'est une barre oblique. Je devrais voir un objet de contact. Si j'ai dit barre oblique deux, qui est le i. D. Il va en fait chercher automatiquement dans l'idée et vous utiliser ceci. Cela n'a pas non plus vu beaucoup de fonctionnalités comme une pagination et ainsi de suite, donc nous pouvons obtenir les données d'ici. Maintenant, nous devons contacter ici, alors allons vérifier que les données de barre oblique DB sont Jason. Nous devons conduire. Maintenant. Si je veux plus de contacts comme celui-ci, nous pouvons obtenir plus de données à partir d'un backside appelé mockery dot com on. Et ce que nous devons faire est de spécifier quels autres champs nous voulons. Quels autres types de données nous voulons Onda. Ensuite, on peut l'obtenir sous la forme de CS 3, Jason et ainsi de suite. Maintenant, ce que je vais faire, c'est que je vais aller préciser que mes idées de terrain trouvent le numéro Terra. Ça va être un prénom sur le type Prénom de mon email. Très bien. Le genre est aussi très bien. Je n'ai pas besoin d'une adresse i p, mais j'ai besoin de Et si je clique sur le petit, donne-moi un des pieds. Les types pour lesquels vous voulez un concert ? Car j'ajoute le téléphone qui va à ce type. Nous avons besoin d'un D sera qui est un mort. Mais allons-y à un rencard. Alors, les dates entre quoi ? Je vais donner quelque chose comme 01 2019 74 à, disons une date aléatoire. 03 23 Je suis parti en 98. Je ne veux pas sous cette forme que je voulais dans mon format eso. C' est ce que nous avons utilisé dans notre pipe d'âge. Nous voulons notre plus sentir cette ville hors de type ville. On veut un état hors état. Encore un pays. Bien sûr que je veux le pays. Andi, je veux aussi la photo. Donc, l'image est fondamentalement juste. Maintenant, laisse-moi le donner en noir. Mais je vais ajouter une expression ici. L' expression va sexer la valeur basée sur le I d sur le genre. Laisse-moi le baser ici. Donc, fondamentalement, je construis une concaténation de chaîne qui va réellement obtenir de l'un de mes sites Web en majors. Andi, si le sexe est masculin, alors les hommes coupent les femmes, puis une barre oblique et dans le magasin de slash, alors quand je dis appliquer, on obtient une expression là. Nous avons donc prénom nom nom, email, sexe, téléphone. Si vous voulez changer la séquence, vous pouvez changer la séquence comme ce dragon Drop on. Je pense que ça devrait. Les gens pensent que nous avons la date de la photo de pays de World City State. Donc nous ne voulons que 100 dossiers. Nous ne voulons pas trop d'entre eux. Et on veut les orteils. Procurez-les au format Jason. Maintenant, vous pouvez télécharger ceci ou vous pouvez en prévisualiser. Ça va te montrer quelque chose comme ça. Donc on fait comment on peut copier tout à partir d'ici pour que je puisse appuyer sur le contrôle. OK, copiez et revenez Toe mes données que Jason a enlevé cette Ari Andi a piecé l'autre que je n'ai pas de bagages, je suppose. Notre quart après le tribunal de format Maintenant, j'ai 100 coordonnées avec des données aléatoires. Je peux continuer très pour la même chose en regardant l'hôte local pour trois contacts double zéro barre oblique , barre oblique dire, par exemple, 88 que la personne sur elle est également une image valide. Donc si j'ai copié ça et ouvert ça et toi papa, tu peux voir que l'image de valeur qu'on peut utiliser. Donc maintenant, si je retourne sur, apporter quelques changements à mon salaire est tel qu'il va frettes orteils le lecteur du point de terminaison distant que nous savons juste créé. On devrait pouvoir voir quelqu'un répondre aux données ici. 22. Consommer le point Consuming REST dans notre service: donc pas de frais généraux. Deux TB service Web Retour dans ce haut et en cours d'exécution il est temps pour nous orteil. Consommez le thème dans notre service. Allons à notre application. La première chose que vous devez faire est d'inclure un modèle appelé It's TTP Demanded model et cela doit être fait en allant orteil à mon devoir. Oui, et nous devons agir pour importer ici. Mais bien sûr, avant cela, nous devons importer le modèle lui-même. Donc, nous allons dire importation à partir de la barre oblique angulaire commune STD sur ce qui vient de cela est une partie de module en tant que client http moderne sur Une fois que nous avons ajouté cela ici, cela doit être inclus dans notre section importations. Maintenant, autre application dépend d'un autre module et ce modèle a un salaire appelé client http , si vous vous souvenez, nous pouvons injecter un service en remorquage. Un autre service est un composant. Donc, ce que nous voulons faire est que nous allons à nos sondages téléphoniques et nous disons que nous voulons consommer ce service client http et la façon dont nous le faisons est en tapant cinq à partir d'américain. Appelez ça Http sur le temps libre, c'est client TTP et c'est aller orteil pour importer le 2ème 1 que je devrais utiliser à partir de à angulaire commun son PIB. Donc on a eu ça. Maintenant que nous avons Http, nous ne pouvons pas consommer la même chose. Alors comment on fait ça ? Donc, nous allons dire ici est le début, http point Get et nous devons fournir un u r et l'urine pour est très simple. Donc ça va être scdp hôte local 43 slash de contact double zéro slash Plus ce lierre que nous recherchons Donc je peux voir ici plus t maintenant, cette fonction quand vous appelez, ça va refaire ce qui est appelé comme un observable et l'observable a à consommer plutôt que de dire, l'observable doit être indice Donc je peux simplement dire retour ici sur qui me donne une erreur parce que ici vous pouvez voir que nous avons dit que le type de données écrites est contact. Mais comme cela va retourner un observable sur, ce que nous faisons ici est maintenant nous allons dire que cela va revenir sur observable, qui est de Rx Js et nous disons que cela pourrait être n'importe quoi Maintenant, nous savons que c'est un objet de contact Mais en ce moment, nous allons dire n'importe quelle année Donc, ce qui signifie que lorsque cette fonction est appelée, il va en fait au fait sur observable. Et si vous vous souvenez où nous avons appelé ont été appelés dans nos coordonnées de composant et dans le composant cardinaux de contact es. Donc nous avons dit ici ce contact de départ est égal orteil un observable à nouveau. C' est faux, car le contact est un contact de type variable hors contact. Mais comme c'est un observable, vous savez, la façon dont nous pouvons assigner est donc nous disons d'abord, ces actions que nous commençons à obtenir des coordonnées, qui est observable sur observable, doivent être souscrites en utilisant un sombre s'abonner, et le substrat donne trois rappels. Le premier rappel est fondamentalement à propos de quand vous obtenez le fait, ne le faites pas. Que voulez-vous aller quand vous obtenez un montage ? Que veux-tu faire ? C' est un second périmètre. Et lorsque l'abonnement est terminé, que voulez-vous faire maintenant ? Dans notre cas, nous voulons simplement recevoir les données. Donc, quand les données sont disponibles, donne-le-moi. Je voudrais assigner un contact de distorsion orteil égal aux données de l'orteil, et c'est ce que nous essayons de faire ici Si je formate cela donc nous appelons maintenant la fonction et quand l'objet est retourné, l'observable est de retour. Nous souscrivons à cela sur chaque fois que des données sont disponibles, les données me sont données et je l'attribue. Oh, ils commencent le contact. Donc je vais sauver ce navigateur de retour. Si vous voyez maintenant, nous obtenons des données sur une autre personne Maintenant aussi, vous pouvez voir qu'il ya une erreur ici initialement, Donc, il est juste ne peut pas trouver image hors indéfini. Faisons une chose qui est effacer l'écran, puis recharger une fois de plus. Onda, euh, voyez que nous avons un éditeur ici et la raison pour laquelle c'est un autre maintenant Andi pas plus tôt est parce que lorsque le composant est chargé, l'objet de contact est vide. C' est indéfini en ce moment, Rachel, parce qu'on vient de déclarer le type de données. Mais on ne vous a rien assigné. Nous n'avons pas monté quoi que ce soit dans le constructeur. Nous ne monterons rien dans l'ONG là-dedans. Également sur mieux être assignant. Nous sommes en fait a un moment plus tard dans le temps où le meurt réellement disponible. Donc, mais avant cela, le composant est chargé sur le U I onda le composant HTML Si vous regardez, il essaie de faire une sorte d'image ici et ce n'est pas défini à ce stade dans le temps, sur et indéfini. L' image sombre est un éditeur et c'est ce que vous obtenez réellement interruption Impossible de lire image de propriété hors indéfinie. Maintenant, une solution facile pour cela serait juste initialisé ceci dans soit Dans l'image sont ici lui-même égal orteil nouveau contact sans aucun périmètre. Onda. Maintenant que cela devrait résoudre le problème sur vous pouvez voir que l'intérêt, Bien sûr. Initialement, il va encore aller à une photo sur Non seulement ils ne sont pas image valorisée, donc c'est pourquoi il donne. Mais c'est très bien. Nous pouvons encore décerner en ajoutant une photo factice. Mais c'est bon, juste au cas où j'irais ici et au lieu d'un. Si je dis 45 sauver maintenant, devrait voir une personne différente, non ? C' est exactement comment consommer un point de terminaison de repos en utilisant le client http, nous allons faire un peu re factoring maintenant, donc si je retourne au service, vous pouvez voir que cette urine serait maintenant utilisée à plusieurs endroits. Évidemment, ce n'est pas une bonne idée de le garder ici. Donc je vais juste taper ça comme urine à base, que je n'ai pas quelqu'un créer une variable. Votre appel, CONST. L' urine à base égale orteil ceci et cette corde. Maintenant, j'ai un mécanisme simple par ici. Et bien sûr, nous allons écrire de plus en plus de fonctions, comme obtenir tous les contacts, ajouter un nouveau contrat, etc. 23. Écrivons les opérations CRUD dans la ContactsService injectable: dans ce modèle. Ajoutons d'autres fonctionnalités à nos salaires de l'annuaire téléphonique pour commencer. abord, modifions le type de retour de observable sur tout orteil observable hors contact. Et c'est parce que dans notre composant, coordonnées contactées par son composant DS étaient en fait en train de concevoir la valeur de retour de l' abonnement à notre objet de contact. Donc, alors que nous avons dit ici que c'est tout ce que nous savons que lorsque nous faisons une demande à cet Ural particulier, il renvoie un seul objet de contact. Alors passons ceci à observable hors contact. Maintenant. Lorsque nous avons enregistré cela, vous pouvez voir qu'il me donne un autre parce que par défaut la fonction get retourne et observable hors objet, nous devons transformer l'objet réponse en un objet de contact. Ceci est fait en appelant une fonction appelée carte dont le travail est de mapper sur un objet d'un type à autre jour. Donc, à cette fin, vous devrez peut-être appeler la carte de voiture de fonction, car vous pouvez voir qu'elle n'énumère pas la fonction de carte, donc nos smoking ont des opérateurs de rayon que vous pouvez utiliser. Par exemple, si je vais ni modèles Onda chercher des audits Js Vous pouvez voir qu'il y a un opérateur de sous-module , et il y a beaucoup d'opérateurs que nous pouvons voir ici comme, par exemple, conquis ou attraper. Il y a le compte, et beaucoup d'entre eux. L' un d'eux se trouve être une carte aussi, Donc, si vous voulez, vous pouvez importer notre slash extérieur r slash slash opératoire homme. Non. Encore une fois, accédez à cette fonction de carte à partir de cette fonction get. Retournez le ventre. On continue North Talk man, puis Matt a accès à l'objet de réponse. Appelons si la succession et nous avons besoin d'écrire un converti ou cartographier la valeur du leader . Je peux simplement m'asseoir. Les données ont un contact, de sorte que le casting off qui aura lieu automatiquement. Maintenant, vous voyez qu'il n'y a pas d'autre maintenant pour que cela fonctionne, vous devez ajouter un paquet de plus à votre application. Donc, en exécutant cette commande, NPM installe les optiques JIA dash compact. C' est un ceci et revenez au plus près pour voir que le résultat est intact. l'ADN. C' est à une seconde fonction. En ce moment. Nous voulons être en mesure d'ajouter un nouveau contrat, donc c'est la fonction de couleur appelée comme notre nouveau contenu, et l'argument serait objet hors contact. Après avoir ajouté un nouveau contact par le biais du point http, nous obtenons un observable hors de l'objet de contact avec le 90 ainsi. Donc on va dire que tu es observable là-dessus et ensuite je verrai ton retour. Ce début arrive à représenter sont causées maintenant The Post Rick Waas, L'Ural Very un post qui est cette base. Ural, exécutez cette cour de base et il n'y a aucune idée. Associative, contrairement à la précédente sur le deuxième périmètre, serait les données que vous voulez à notre qui est ceci et non que nous recevons un objet JavaScript, mais qui sera converti en une charge utile Jason et sera envoyé afin que nous n'ayons pas à faire de conversion d'objet en chaîne ici. Il sera également difficile, et c'est à DP demande Header Caldas contenu ID égal applications orteil gauche Jason Donc tout est implicite. Mais si vous voulez à nos en-têtes supplémentaires, vous pouvez toujours l'ajouter comme périmètre 1/3. Donc je n'ai pas une telle exigence en ce moment, mais quand nous assisterons à une occassion, alors nous devrons peut-être nous envoyer une autorisation. Donc, en ce moment, cela renvoie un objet observable hors objets Donc, tout comme dans le cas précédent, nous pouvons avoir à faire correspondre la réponse, quoi que ce soit. Une fois que nous entrons en contact, objet et ça va être fait. Comme vous pouvez le voir, ce sont à peu près une Venise. De même, nous pourrions vouloir faire une mise à jour. Donc, pour ce faire, il est appelé qu'il est hors contact. Nous avons reçu un contact en tant que périmètre, et la valeur de retour est exactement comme la précédente. Nous avons une conduite observable, donc nous allons copier face la même chose à cette fois qu'ils rentrent. Ils commencent Http, tar mis qui en fait, depuis lors, c'est les gens de la ville demandent cette fois. On n'a pas besoin de l'urine de base ? Doit l'idée de la personne qui a déclaré que nous voulons modifier, qui est de contacter notre i d. Et puis je peux dire le contact souvent lui-même avec le plus pâle. Donc, comme dans le cas précédent, nous pouvons encore avoir à mapper la réponse à un objet de contact que nous allons faire maintenant et la fonction est terminée. Une autre fonction que nous voulons Robert ici est cette suppression qui est identique. Donc le get donc je copie porte le même changement. Le nom toe supprimer le contact. Il semble que les idées un périmètre sur parce que la fonction de suppression de point http. Andi, Contrairement aux précédents, il n'y a pas de mise à jour de contact à venir au restaurant. Donc ça va être observable hors de tout, et alors je n'ai pas besoin de cartographier ça. Allons avoir une fonction de plus à cette classe de service, qui me donne une liste de conduite par page. Donc, eh bien, addio obtenir tous les contacts, qui prend un numéro de page, qui est un nombre sur si le nombre n'était pas si Prenons à la première page, qui retourne et observable. Mais cette fois, au lieu d'un seul contact, nous aurons un tableau hors contact. Et afin de faire une demande, nous pouvons simplement dire, retourné ce truc abondamment. Ne prends pas Yoran sur la base. Mais alors nous disons votre carte de points, nous obtenons la réponse et nous convertissons la réponse en remorquage sur tableau, hors contact. Maintenant, ça va me donner tous les contacts dans notre point de repos. Nous voulons utiliser ce numéro de page. Pour ce faire, nous pouvons lire disponible pour les parents Andi, qui est un objet composé de valeurs clés. La clé est une page de soulignement de voiture de chaîne et la valeur doit toujours être une chaîne, qui est le numéro de page que nous fournissons. Donc on va juste le convertir en une chaîne. Mais la concaténation et ce modèle peuvent être notre deuxième argument. Maintenant, le deuxième argument à ce get est un tas d'options, comme les en-têtes et les périmètres et ainsi de suite. Et puisque nous voulons fournir seulement les compteurs de modèle, donc nous allons sauver vos parents de groupe de carrière. Maintenant, c'est aussi bon que de dire que les parents sont la clé. Le bas des deux-points est la valeur maintenant en année six. Si vous avez la clé et la valeur avec les mêmes noms de variables, vous pouvez simplement taper les parents. Donc, sauvegardons cela sur ce aigre obtenir tous les contacts par fonction de page. 24. Afficher la liste de tous les contacts en utilisant la les la directive NgForOf: Maintenant que nous avons toutes les fonctions nécessaires pour l'application, soyons plus de composants sur cette fois-ci autour. Nous allons ajouter un composant qui peut obtenir sur les contacts et l'affichage. Donc, cela va créer un nouveau composant en tapant N g G C pour les composants de genre. Et nous le voulons dans le composant. Plus vieux, Disons que ça s'appelle Contact cette liste sur Nous ne voulons pas de Spec. Donc, avec les lunettes de médecin à l'agitation et c'est juste parfait égale deux PB pour l'annuaire téléphonique qui va créer trois classes. Html CSS est une classe typescript et met également à jour notre APP. modernité est liée à la section de déclaration, alors revenons à notre cœur et ouvrons le thème. Donc, nous allons ouvrir le composant de liste de contacts de TS, qui est ici et va déclarer une variable hors contacts à elle. Alors calmons ça. Demandez aux contacts, prudent sur un tableau hors contacté. Je sais que cela me donne un autre parce que nous avons des orteils import les mêmes commandants de cyprès sont contrôlés sur Windows et que nous n'avons pas initialisé cela, en ajoutant, donc si vous voulez obtenir initial, est-ce vrai et un tableau vide comme celui-ci ? Mais ce n'est vraiment pas ça a fonctionné parce que nous allons juste initialiser cela dans le n G sur dedans , utilisant notre fonction de service. Donc le service est injectable, donc évidemment nous devons l'injecter dans nos constructeurs. C' est un privé, c'est une critique. Respectable , sur les salaires enregistrés de l'annuaire téléphonique, ces chirurgies de conversation ne pouvons pas dire obtenir des contacts et nous avons eu la fonction, les menaces et observables, que nous devons souscrire. Appelons ça un début. Abonnez-vous. Le premier argument est le combat qui reçoit l'objet de réponse, qui est un autre de contexte que nous connaissons. Donc on ne peut pas rester ici. Quelle que soit la réponse qui vient, nous voulons assigner à toe le contexte de début est égal à remorquer, et ils devraient effectivement l'enlever, en récupérant les données de la première page afin de tester la même chose. Allons au HTML sur essayé de récupérer les détails de la conduite. Alors passons à cela et il est dit que la liste de contacts fonctionne. Mais à la place, je vais prendre votre nous sommes de crochets bouclés. Et puis j'ai dit que les contacts sont disponibles que nous avons C'est juste pour afficher ça dans la forme de Jason Jason dans le tuyau de construction que l'on travaille. Quel que soit l'objet est là dans la chaîne Jason. Donc, si vous revenez au navigateur, vous verrez toujours les détails précédents. C' est parce que notre au composant HTML affiche actuellement PBY contact tweeté. Permettez-moi donc de recommander la même chose. Et puis il a tiré notre nouveau composant, qui est la liste de contacts PB Cash, comme un nouveau coup de main. Donc, c'est inclure cela à l'époque. Sauvez-le. Et puis je retourne au navigateur. Je devrais voir une liste de contacts, et vous pouvez voir que le contexte en attente d'un certain i d un orteil i d 10 jusqu'à ce que si je veux les détails de la deuxième page. Je peux retourner ici à mon TS compétent et ensuite fournir le numéro de page car c'est un trois. Sauvez-le. Quand je reviendrai ici, je devrais voir un nouveau groupe de contacts de 21 à la Turquie, qui est censé être une page numéro trois. Donc, nous allons utiliser ceci maintenant sur l'affichage du contexte de vue. Revenons à,Bien sûr, Bien sûr, nous voulons que la police que ce numéro de deux pages de RB Tony devrait fournir ça parce que c'est génial que nous obtenons les détails de la première phase. Allons au html sur vous pouvez maintenant afficher au moins hors contacts qu'ils avaient trois d'abord et dire que la liste de tous les contacts. C' est ce que j'avais, Charlie pour regarder à travers et obtenir tous les contacts un par un afin que nous puissions imprimer les détails du même angulaire fournir quelque chose appelé les directeurs. Alors visitons la documentation angulaire pour la même chose. Allons donc angulaire, c'est vous Andi ? Va sur les quais. Il y a une section A p sur dans la liste des types que nous pouvons sélectionner directive. Comme vous pouvez le voir qu'il y a beaucoup de directives communes, former des activités liées et ainsi de suite. Donc celui que nous regardons est ce qui s'appelle N G. Loin du moteur. Quatre de la directive sont des perdants. Toe a regardé à travers une collection que nous avons sur des collections observables, et puis nous pouvons accéder aux éléments inhabituels de la collection. C' est assez utile. Allons voir comment cela peut être utilisé. Maintenant, nous allons utiliser un accord qui est censé être répété pour chaque contexte que nous avons à faire qui prendra votre étoile. N G quatre égale deux, et nous devons donner expression expression expression sera comme laisser voir les contacts. Maintenant, contacts est la variable membre dans notre TS Here. Ceci est un membre fiable et nous voulons toe Obtenir un seul contact sur Nommer comme voir. Donc maintenant, si vous pouvez réfléchir, voir est un contact que je peux afficher les détails de ce Voir ici, par exemple, voir assez complètement. Donc, si vous revenez au plus proche, vous devriez tous les voir affichés sous la forme de noms complets. Bon, donc c'est comme ça qu'on peut se regrouper. Et Ari, au cas où si cet Eric grandit automatiquement, ça va aussi grandir. Par exemple, mettons appartement ici en disant que, disons, important pour Bt et notre traité et la famille sur. Ensuite, nous dirons votre Seigneur plus le gestionnaire d'événements de clic de talent pour le même conseil appelé Seigneur . Et bien sûr, nous n'avons pas cette fonction qui en donnera une autre. C' est le sauver. Retourne par ici. C' est à une fonction normale, qui est censé incriminer le numéro de page. Et nous n'avons pas le numéro de page il variable solitaire appelé Asian Off numéro cinq, initialement à une onda, nous devons implémenter ce numéro de page dira que ce début occasionnel plus. Maintenant, nous devons fournir cette page. Fourd le service Ne pas obtenir toutes les fonctions de contact. Donc, nous avons dit que ce service de démarrage Ne pas obtenir tous les contacts sur ce numéro de page de démarrage est la variable que nous voulons fournir à la fonction d'indice. Nous allons fournir le rappel, qui reçoit les données qui est ah, correspondant à un contenu de jour de congé. Nous avons orteil de contact inné orteil ce toxicomane existant et cela peut être fait dans une base différente . Une des façons de faire est de commencer le contenu est égal à la rente orteil qui se compose de toutes les valeurs des contacts de distorsion, comme avec nous, les valeurs des données. C' est donc ce qu'on appelle l'opérateur de propagation en six ans. Donc, il va réellement se répandre sur les valeurs du contact, puis répandre toute la valeur des données devient un nouveau loin. Et c'est un Centobie commence à te contacter si je sauve ce noyau maintenant. Et si vous revenez au navigateur, alors jetons un coup d'oeil à ça. Nous obtenons le premier à éteindre et quand je clique sur Lord More, vous pouvez voir que 10 autres sont chargés. Et chaque fois que je clique dessus, tu en auras 10 de plus à chaque fois. Donc, pour embellir la même chose maintenant, revenons ici. Au lieu de simplement afficher ceci, je peux probablement afficher l'image du nom de la personne sur Probablement City d' où vient la personne. Donc, nous allons avoir un peu de CSS si inquiétant. La fin avec ce qui est appelé groupe de liste sur ce groupe de liste va contenir ce groupe d' éléments, donc ce qui est éléments, hors de votre classe est égal à l'élément de la liste d'orteils Groupe. Je suis probablement que je veux avoir un rôle avec deux colonnes qui énoncent la règle avec un SM quatre appelé que pour l'image plus appelé S eux âge pour le reste de la pièce de données le 1er 1 est censé contenir et donner à chacun C'est notre image, la mort et l'image. Doug va se composer de la SRC venant de Cedar Picture. Mais si vous vous souvenez, l'image de cèdre est supposée être une expression pour que nous puissions voir que c'est une expression en ajoutant un carré dans le SRC. Attribut. Donc c'est une photo. Non, vous pouvez aussi nous donner la taille. Donnons une souche de peau par exemple, off, disons 100 pixel de 1 50 image et cela devrait être assez bon. Et c'est un endroit où je veux afficher les noms des personnes. Allons avoir une tête pour laquelle consiste à voir mais plein moi sur. Et nous sommes également au courant du paragraphe qui se compose de Cedar City et de voir cet état le sauver . Revenons à la Rosa sur DSI que les données sont désespérées bien. 25. Configuration de la ligne et des vues de l'évolution: Maintenant que nous avons plusieurs composants dans nos applications qui a un composant de liste contacts et de détails de contact composant, nous devrions être en mesure de basculer entre eux en cliquant sur une personne de contact particulière, probablement sur l'image ou sur le nom. Si je clique dessus, il devrait afficher les détails de cette personne spécifique. De toute évidence, nous devons déterminer où ces renseignements devraient venir. Nous aimerions donc probablement supprimer cette liste de contacts. Et à cet endroit, nous voulons afficher les coordonnées de la personne. Et cela est fait en utilisant un concept appelé concepts de routage. La première chose à faire est de remorquer identifier l'emplacement où le composant doit être détruit dynamiquement. Maintenant, à cette fin, nous allons aller à notre composant ab AB HTML. Et c'est là que nous avons affiché les composants en les changeant manuellement. Ce que je vais faire, c'est que je vais enlever ça et placer un composant appelé rotor. C' est un composant de construction de l'angulaire, mais cela ne viendra que si vous utilisez quelque chose appelé Write of modern. Puisque nous n'avons pas fini ça. Donc ça ne m'aide pas ici, mais quand même, ajoutons ce petit chocolat comme attaque. Donc, évidemment, si vous revenez au navigateur, vous faites mieux ici dire ce total de ligne. Ce n'est pas un composant valide. Si vous revenez à la console, vous pouvez le voir. Zéro Rotation n'est pas inconnu. Élément maintenant qui peut être fixé très rapidement en allant à notre application sont à la modernité est , et nous devons adhérer à un modèle appelé un modèle de rotor. Alors faisons de l'annonce sur notre modèle. Donc c'est une importation. Andi sur ta route et ça va me donner un mannequin. C' est sur un modèle appelé Rotor Modern. Contrairement aux précédents que nous avons utilisés ici, il se peut que vous ne puissiez pas utiliser ce type de modèle directement, et c'est parce que vous devez donner quelque chose qu'on appelle la configuration de la route. Alors quel est un autre qui crée ça ici ? On peut changer ça plus tard, donc on va déclarer une variable. C' est si Const. Les routes, qui est temps libre appelé, a écrit cite orteil et et pour le timing, laissons le vide et puis revenons à notre section d'importation et puis j'entends le module Rotor pensé pour Route sur. Ensuite, nous fournissons ces routes. Donc tu as sauvé ça. Maintenant, si je retourne à la Rosa, je ne devrais pas avoir d'erreur. Mais je n'ai aucun composant parce que nous devions spécifier dynamiquement ce composant. Maintenant, la partie de l'Oural ici peut identifier ce que ce composant particulier est censé être . Par exemple, si je dis barre oblique, je veux que le composant home vienne ici. Mais si je dis oui, liste de contacts barre oblique à titre d'exemple, Donc, cette partie doit identifier la liste du composant et ce composant devrait être placé ici . Nous pouvons également dire que vos coordonnées de barre oblique sont des coordonnées. Cela devrait identifier un contact intense ici que c'est là que la configuration de la route entre en jeu. Imaginez vous pour spécifier quelle partie du pot devrait identifier le travail, le composant avantage assez simple. Allez ici et puis créez un objet de configuration de route qui a essentiellement une partie sur Nous disons que la maison est la partie et alors cela devrait reposer Oneto un composant appelé composant maison sur. Maintenant, si votre service sera vide ici en ce moment. Mais une fois qu'il est très chargé, nous pouvons vérifier ici en tapant slash hold press enter je devrais voir le composant maison. De même, je peux également spécifier qu'une autre partie appelée liste de contacts, devrait identifier un composant appelé comme composant de liste de contacts. détails de contact du pot Onda se doivent d'identifier un composant appelé composant de détails de contact. Droit ? Donc maintenant vous pouvez voir que j'ai trois points de route différents, donc chaque partie identifie l'entreprise spécifique. Maintenant, la partie que le texte peut être tout ce que vous voulez, mais je n'ai pas vraiment gardé la même chose que la suggestion sur le composant lui-même. Alors revenons ici sur tout ça. Si je dis que vous êtes la liste de contacts et appuyez sur appel d'offres, vous pouvez voir que ça me donne la liste de contacts. Et bien sûr, si j'ai dit Contract de Goût, ça reviendra et me montrera contacter des indigènes à partir d'une seule personne. Donc, évidemment, nous aimerions également avoir une racine de votre application pointant orteil certains avant composant, et cela peut être fait en spécifiant que la racine de votre application devrait rediriger orteil un de cela comme la maison. Nos listes de contacts, c'est à vous de refaire généralement au début. Ce n'est pas nécessaire, mais a commencé, Seyfarth égale orteil une chaîne vide et puis nous spécifions l'un des composants sont vous pouvez le dire directement à la maison dans ce cas, devoirs redirigés parce que la forme est une partie qui correspond au texte. Vous pouvez également prendre directement votre composant est à la maison confiant. Mais un seul problème est que je suis district fait partie de chaque partie que nous voulons dire que la chaîne vide devrait être la seule chose dans les parties, pas seulement une partie du parc. Donc, cela est fait en tapant pour correspondre sur la même nourriture de cette façon. Seulement si la partie entière est une industrie, alors elle est redirigée la maison. Donc si je retourne au navigateur, vous devriez voir maintenant que le trou va s'afficher à l'avant. Donc, même si je ne visite pas cela, je supprime cela et appuie sur Entrée, vous verrez qu'il est redirigé. Orteil barre oblique à la maison sur qui vient automatiquement. Maintenant que nous avons maintenant configuré le routage de base, nous aimons également fournir de nombreuses options. Donc, si je clique sur l'option de menu, il devrait aller orteil une entreprise particulière que cela se fait en utilisant quelque chose appelé un jambes de routeur qui sont simplement mis des liens hypertexte. Alors allons voir comment cela peut se faire sans quelques menus ici. L' un est entier. L' un est la liste des contacts sur le terrain. Je devrais pouvoir basculer entre eux en utilisant l'hyper moyen, pas en le tapant manuellement à cet endroit. Alors revenons aux pieds le composant cybernétique. Html. Montez ce H 3 et sur quelques boutons ici. Donc c'est vers l'avant. Une arme avec Bt et sur. Je peux enregistrer Bt et Dash Primary sur le bouton. La légende sera à la maison. Disons ça. Retourne. Vous verrez qu'il y a un fond et si vous voulez un bouton plus large, vous pouvez spécifier année Bt et Dash long qui va occuper le plein arraché sur le côté. Mais ce qui serait bien ? Et puis, bien sûr, je peux copier et coller ceci quelques fois. Un 2ème 1 serait une liste de contacts afin que ce soit une liste de tous les contacts. Et si tu ne veux pas de famille, tu peux l'appeler comme Second Billy. C' est comme ça qu'on regarde ça, et c'est bon. Donc maintenant, vous voyez, j'ai deux boutons, mais bien sûr en plaisantant sur lequel rien ne se passe donc à cette fin, ce que nous devons faire est de fournir ce qu'on appelle une directive de liaison de routeur. Donc ils disent que la directive est donnée comme ça je suis supporté pour que je puisse avoir de la place ici pour que je puisse dire Router League égale. N' oubliez pas que l' enregistrement d'écran signifie tout ce que nous avons donné ici est une expression. Donc, c'est un attribut régulier, mais on a donné une ligne droite pour indiquer qu'il s'agit d'une expression. L' expression est un Ari composé hors de la route. Ce que Donc, par exemple, je concours déjeuner ar barre oblique à la maison sur qui devrait correspondre orteil la maison. De même, je peux vous donner un total sur, puis égal à une expression qui consiste en une liste de contacts. Tiens, sauve-le. Et si je retourne au navigateur, je devrais voir deux boutons sur. Lorsque je clique sur la liste de contacts, vous pouvez voir que ce rotor Oakland affiche maintenant une liste de contacts. De même, quand je prends ça, tu peux voir que je peux retourner à la maison maintenant. De même, je peux également fournir un itinéraire tôt pour chacun de ces deux. Fais ça. Revenons à la liste des contacts. Html Andi. Si vous voyez, c'est là que j'ai l'image. C' est là que j'ai un nom complet afin que je puisse ajouter un itinéraire seulement. Avec ce sont aujourd'hui qui est ajouté bord de l'orteil pour Donc quand je vais au bord pour notre une rangée tournant égale stoop et Ari. Mais cette fois, nous voulons fournir des jours de contact slash sur la sauvegarde. Donc quand on retourne ici, on a la liste des contacts. Vous voyez que je ne reçois pas de lien hypertexte sont je ne reçois pas une icône de culture, mais en cliquant dessus, vous devriez voir que je suis capable de mettre leur personne différente. Bien sûr, ce que nous voulions faire est de cliquer sur une personne en particulier pour voir les détails de cette personne. instant, nous ne fournissons aucun détail sur la personne que nous avons ici. C' est la raison pour laquelle nous ne recevons pas ça. Donc, la prochaine chose que nous pourrions avoir à faire est de remorquer veut sur l'information, comme une idée de cette personne aux coordonnées. Donc, comme, par exemple, avec ce contrat, je pourrais vouloir fournir la graine ou l'idée, et c'est ce que nous pouvons vous donner. Allez, graine sur lierre. C' est la raison pour laquelle c'est une expression. Tu vois, c'est un jour de congé. Deux valeurs maintenant l'une est un flux. C' est la partie. Et la seconde est l'idée de la personne que j'envoie. Mais malheureusement pratique sur ce sujet, vous pouvez voir que je vais obtenir un éditeur. C' est parce qu'il regarde le contenu. Détails barre oblique trois sur. Je n'ai pas de cartographie pour cette partie. Comme si on avait la cartographie pour le contact. Il est, mais pas pour les détails de contact barre oblique trois. Donc si j'efface ça et que je prends cette personne maintenant, tu peux voir que ça me donne une autre chose. Ce contexte, il est coupé. Cinq est invalide. Alors, comment traitons-nous ça ? C' est très simple. Nous allons à l'application modèle TS et dire que quoi ? Avec la preuve de contact, nous aimerions également fournir un I D. Et si je ce type ici, je ve Alors il va supposer que le lierre doit aussi être dur le mettre. Mais nous savons que cette idée doit être comme un seul orteil. Trois sont ainsi de suite. Donc, afin de mentionner que c'est une partie précieuse de la partie que nous donnons à votre côlon, Heidi, et cette variable peut maintenant identifier quels que soient les nombres qui fournissaient. Donc, si tu reviens, tu vois qu'il n'y a pas d'autre choix ? Non. Quand je clique dessus, il va à la personne critique. Mais nous fournissons les cinq seuls, mais nous ne l'utilisons pas ici. Et si vous venez de reculer et d'aller au contrat, c'est la composante DS. Vous verrez que nous fournissons toujours 45 comme numéro. Donc, même si nous sommes ici bien, sont un, par exemple, ont toujours envoyé pour un combat. Maintenant, ce que nous devons faire est de capturer cette valeur que nous envoyons, qui fait partie de la partie de I d Andi. Alors prends ça et travaille avec ça. Donc, au lieu d'envoyer, 45 étaient orteils envoyer Cette idée fournie par l'utilisateur 26. Accéder aux paramètres de l'itinéraire dans ContactListComponent: Donc, ce matin, disons comment recevoir les paramètres ronds et ensuite obtenir les détails de cette personne de contact particulière . Et pour cela, nous devons se faire un service. Apporté par le module de rotor angulaire appelé comme activé a écrit afin que nous puissions déclarer une variable Say, par exemple, privé après un nominal sur le type off activé tour. Donc, les noms de variables peuvent être tout sauf la tendance générale est que vous gardez le même nom du nom de classe avec un coût plus bas obtient plus tard. Cela a maintenant accès orteil sur les paramètres de la route. Nous pouvons utiliser cela dans l'image. Donc maintenant, nous pouvons dire ici que ce début a activé les entreprises de plein air, qui est un observable à laquelle vous pouvez vous abonner. Et maintenant, vous avez accès à tous les parmètres inhabituels. Disons que les données des forums sur l'utilisation maintenant de ce terme état sont que nous aimerions probablement faire une demande à celui-ci. Donc je vais couper ça d'ici et biper ici au lieu de 45 où l'approvisionnement est éteint. Je voudrais que nous ayons l'idée et nulle part cette idée ne vient. Si vous regardez ces oreilles modélisées ABT. Nous avons défini la variable appelée Idee ici. C' est donc la variable que nous essayons d'accéder à partir de l'état du baromètre. Donc, si je sauvegarde ce numéro ici et puis retourne au navigateur sur, nous avons accès aux coordonnées slash un. Donc, si je vais à la liste de contacts et que je clique sur le deuxième contact, vous voyez que nous fournissons ici et nous obtenons également les détails de cette personne. Donc, si je vais à quelqu'un d'autre et puis obtenir les preuves, je suis en mesure d'accéder à ces détails particuliers aussi, quelques changements que nous ferons votre parce que nous voyons qu'il y a beaucoup d'erreurs qui arrivent. Et c'est principalement parce que hors de la barre oblique non ici. Maintenant, si j'ai une image déformée, ce serait fantastique, pour qu'on puisse assigner une image différente. Tu es comme ça pour qu'on puisse aller voir Martin. Nous avons cette conduite tortillas. Il y a une image qui est facultative, et je peux aussi assigner une chaîne ici qui est censée être coupée, une barre oblique de sexe en majors, et puis je peux dire que vous êtes hors vol point PNG Andi qui devrait nous donner un profil par défaut image. Maintenant, si vous revenez au plus près, nous voyons que nous n'avons pas de rédacteur en chef. Et c'est parce que j'ai une photo appelée actifs Images profil que PNG. Donc, si vous retournez orteil SRC et assis images, vous pouvez voir que j'ai ce fournisseur, le moteur qui peut être utilisé à l'avenir. Une dernière chose que nous allons corriger est la taille off. C' est probablement trop grand, donc je veux O district US 200 pixel installé sur un Excel efficace. Donc, nous allons la liste de contacts html sur. On vous a ici quelque chose comme 1 50 pixel. Réduisons le remorquage 100 pixels et cela devrait être très bien. Une dernière chose est que celui-ci ne ressemble pas à une icône cliquable, mais il est explicable à cause de tous les liens rotor. Nous pouvons ajouter un peu de style ici afin que vous puissiez dire style égal à pointeur de côlon concert orteil, et cela fait ressembler à une icône cliquable. Vous pouvez voir que j'ai un bout du doigt pour que je puisse prendre cette personne quand j'aurai les détails de la même chose 27. Suppression d'un contact: Non, la facture a vu comment le routage fonctionne sur Comment pouvons-nous basculer entre les différents composants en utilisant un hurling de route ? Jetons un coup d'oeil à une autre fonctionnalité étaient programmatiquement nous pouvons naviguer vers une vue différente ainsi. Par exemple, si je prends cette personne et que je reçois les jours D, c'est ce que nous voulons fournir. Une suppression mise ici. Onda. Quand je clique sur le village, je veux qu'on me demande. Tu es sûr de vouloir le croire ? Et si la réponse est oui, je devrais supprimer ceci. Mais puisque les données sont supprimées, je ne veux pas être ici. Mais au lieu de cela, je voudrais revenir à la liste de contacts où je peux voir sont supprimer plus personnes. Je peux également fournir une adoption d'accord ici lui-même pour que je puisse lancer là-dessus. Et la même chose devrait arriver hors cours, auquel cas je n' en ai pas pour l'orteil de redirection arriver. Mais d'abord, allons voir que nous pouvons fournir un bouton de suppression à partir d'ici pour le faire. Allons aux détails de contact Component Command V ou contrôle, être coordonnées. Oui, nous allons fournir une fonctionnalité de suppression ici. Alors c'est les vacances. Supprimer le contact Onda. Quel que soit le contact qui est actuellement affiché, les gens prennent pour faire la même chose. Maintenant quarante. Nous voulons le faire hors de ces salaires avec les distorsions notre redémarrage supprimer contact. Et ça demande une idée. Le périmètre sera donc fournir ces contacts. Je le serai s'ils commencent à contacter notre i. D. Onda. Ce Retton est observable quand l'abonnement est terminé. Nous voudrions faire quelque chose de telle sorte que la vue actuelle est retirée sur une autre vue est placée dans la route ou hors tard. Cela peut être fait en utilisant un autre service, probablement mieux après Madi et ceci est appelé comme un routeur. Donc nous allons fournir ici une variable 5 autour de son type hors tout au long. Et c'est important ici et maintenant cette variable a accès à votre fonction appelée naviguer dans le routeur de distorsion Ne navigue pas. Nous devons fournir une journée de congé toutes les pièces dans notre obtenir très simple avec une liste de contacts . C' est là que nous aimerions continuer à donner cela prend toute route para milieu. Nous aurions pu fournir cela en tant que variables ici, aussi la seule chose que nous devons faire maintenant est de fournir une partie pour place. Allons à l'extrême et correspondant à cela probablement off vers quelque part ici je peux voir pour $10 BT médian en danger. Donc, parce que c'est un bouton de suppression, je peux également fournir entendre un gestionnaire d'événements de clic est égal à la fonction de contact de suppression de toe. Une dernière chose que nous voulons fournir ici, c'est les orteils. Demandez à l'utilisateur. Êtes-vous sûr de vouloir supprimer ? Et nous disons ici en utilisant, si non conforme ? Confirmé en passant, est-ce une fonction de fenêtre pour que nous puissions voir votre Ere you shoud on ? Si l'utilisateur dit non, nous allons simplement revenir de cet endroit particulier. S' ils utilisent leur dit Oui, ça va aller. S' ils l'utilisent, il n'y a pas, c'est juste le retour d'ici lui-même. Donc ça a sauvé ça. Retournez au navigateur. Maintenant, nous avons un bouton A pour le village. Donc si je clique dessus, ça va me demander Etes-vous sûr ? Je dis annuler. Je vais rester en arrière. Si je dis village et je dis OK, maintenant vous pouvez voir qu'il est supprimé sur. Je suis également navigué liste de contacts orteils 28. Formulaires (réactives) à la conduite des modèles et à l'aide de modèles: dans les applications. Les entrées utilisateur sont gérées par Alphonse. Une batterie est un regroupement logique des éléments d'entrée tels que les zones de texte, lesboutons radio, boutons radio cases à cocher abandonnées sur le sup, l'importance et ainsi de suite. Pervers angulaires, deux approches différentes pour gérer les entrées utilisateur à travers des formulaires, réactifs et modèles. Les deux peuvent vous capturer leur entrée à partir de la vue, valider l'entrée de l'utilisateur jusque-là modèle sur le modèle de données, surpasser et fournir chaque changement de piste d'orteil. Cependant, ces deux un processus de protestation et de gérer les données de formulaire différemment et offrent différents avantages. En général, les formes réactives sont plus robustes. Ils sont plus évolutifs, réutilisables et testables. Si les formulaires sont le gardien de votre application ou si vous utilisez déjà des modèles réactifs pour créer vos applications, utilisez des formulaires réactifs. formulaires individuels, Lesformulaires individuels, d'autre part, sont utiles pour ajouter un formulaire simple à une application comme un formulaire d'inscription utilisateur qui est facile à un autre, mais ils ne sont pas mis autre, à l'échelle comme vraiment deux formulaires. Si vous avez un formulaire de base, les exigences et la logique qui peuvent être complètement gérés dans le modèle. Les Nouvelles Templiers deux informe 29. Travailler avec un formulaire piloté sur les modèles pour ajouter de nouveaux contacts: Donc, notre application Maintenant cet endroit une liste de contacts ou je peux cliquer sur une personne de contact particulière vous orteil. Les détails sont Si je veux supprimer, je peux cliquer sur le supprimer. J' ai un pop up. Je peux dire Ok pour être annulé. Orteil. Reste en arrière. Supposons que si vous voulez ajouter une nouvelle conduite, alors nous devons travailler avec des formulaires. Un annulaire a commencé à travailler avec des formes de deux façons. L' un est appelé formulaires pilotés par un modèle. Un autre est appelé formes réactives. Dans cette vidéo particulière, nous allons travailler avec modèle pour informer. abord, nous allons avoir un nouveau composant et versé un enseignant afin que je puisse aller de l'avant formulaire html pour ajouter un nouveau contact. Donc, je vais à l'invite de commande. Assurez-vous que je suis dans le répertoire de travail. Est-ce que n g ordinateurs composants générés slash contact. Si vous ne voulez pas d' orteil, attendez. Avec cette technique était Toe Falls Onda. Nous pouvons obtenir jusqu'à l'avant graphiques et d'autres nouveaux graphiques comme That's Perfect égal Toe BB pour l'annuaire téléphonique. Autres carrières trois fichiers un CSS et HTML sur un combat T s sur de sorte qu'il a mis à jour sont plus devoirs. Alors passons au cœur et ouvrons les composants de l'application SRC, et nous avons votre honneur de conduire notre composant de conduite son démon. Donc, si vous voulez que notre orteil de formulaire de contact apparaisse ici, nous allons probablement un bouton de barre latérale. Allons à l'état de notre complément chacun au Yémen. Copiez ce lien basé il qui souffle quelque chose jambe qui est en contact avec le public sur la nouvelle conduite. Donc on a le bouton ici. Mais bien sûr, quand je clique dessus, nous obtenons un éditeur disant que je contact n'est pas une route de valeur. Nous devons donc aller à nos idées modernes. Nous devons définir une nouvelle route pour que quand Mais moi c'est le contact est la rencontre. Un nouveau composant appelé notre composante conduite est placé sur son démon Paige. Si vous allez ici maintenant et c'est très frais, si je clique sur ce notre nouveau contact, vous voyez que nous obtenons la page HTML ici. Bien sûr, afin de faire cela comme un HTML valide, allons-y et à une forme humaine riche. Alors va à ça. Récupérez cette histoire et votre contact. Mettons un simple formulaire HTML. Je vais utiliser leur forme point de forme. Ça va être notre classe CSS bootstrap. Nous n'avons pas besoin d'action ici parce que nous ne soumettons pas. Cette année s sont plus de 30 source, mais nous aimerions avoir un label et il participe pour chacune des propriétés. Faisons un accord avec les groupes de formulaires, puis composé hors étiquette plus sur l'entrée avec le contrôle de formulaire . En tant que classe, l'étiquette aura le prénom car la légende sur la zone de texte d'entrée est censée être pour le prénom. La bonne forme de l'acteur devrait correspondre à l'idée de cette boîte de saisie particulière afin que je puisse vous donner le prénom. Je n'ai pas d'idée. Donnons-lui une carte d'identité égale deux d'abord moi. Maintenant, le but derrière ça est quand je reviens à sa forme féminine. Vous voyez, je peux cliquer sur cette étiquette. Le curseur apparaît ici. Donc, je reçois si je ne l'ai pas pour le sauver. Reviens ici et tu peux voir que je peux cliquer dessus, mais rien ne s'est passé. Il ne transfère pas le contrôle ici. Donc, en ajoutant un quatre orteil égal d'abord moi, Vous cliquez sur cette étiquette apportera l'accent sur ce manuel particulier, il est donné sous un. Donc je ne suis pas, fais plus de place. Ici, faites une copie de ceci pour le nom de famille. Ça va être un label appelé nom de famille. Andi devrait correspondre à ce qui est un référencement ici. Et nous avons deux zones de texte. Prénom et nom. Maintenant, le prochain serait probablement le genre. Donc je vais copier ça sur Pieced. Mais cette fois, je veux avoir un vraiment serait. Donc ça va être une bonne entrée. Parce que pour la vidéo, nous devons donner un nom commun à tous les deux qui est donné comme genre. Ce n'est pas vraiment exiger i d. Ce n'est pas nécessaire. Je peux le faire monter. Cette valeur d'aspirine 80 est égale à l'école faite. Andi, je peux dire ici , tapez votre barre oblique principale sur la même chose. Je vais à base de café en faire un autre vraiment ? Avec le même nom. La valeur serait féminine. Et bien sûr, la légende à afficher aussi serait féminine. Donc si je garde ça et y retourne, vous devriez voir qu'il y a vraiment un bouton qui dit mâle ou femelle. Donc, je clique sur ce qui est sélectionné. Je clique sur cela, un autre bouton vraiment sélectionné. Permettez-moi donc de compléter le formulaire en ajoutant un set off do slash deal pour chacune des coordonnées . Donc non, j'ai ajouté un champ pour chacun d'eux et il avait un sous-marin Grande-Bretagne, dessous de l'image si bon sur votre à un bt médian et primaire. Je vais nous appeler ça bientôt. Donc, nous avons un orteil important à comme un angulaire un lâche les éléments de forme à associer avec le modèle plus tard. Par exemple, si j'ai une variable appelée prénom ici, je peux associer ce prénom à ce manuel particulier. Maintenant, cela peut être fait dans un étaient contraignants ou deux étaient par moi. Wonder flexion est là où nous pouvons simplement aller et dire que la valeur égale orteil quelque chose. Par exemple, si je dis ici prénom hors printemps est égal orteil que vous ne le faites pas Et si je veux que cette valeur soit associée à cette zone de texte, je peux toujours venir ici et dire valeur égale orteil prénom hors cours. S' il s'agit d'une expression, cela peut être donné de deux façons soit avec un double crochet bouclé. Ou je peux simplement dire que c'est une expression en ajoutant un crochet. Si vous revenez au navigateur maintenant, vous pouvez voir que le prénom est changé orteil. Nous le savons parce que la valeur vient d'ici. Mais si je veux voir quelle est la valeur du modèle plus tard, quand je fais les modifications à la zone de texte qui va sur un paragraphe où j'utilise un double crochet bouclé prénom, qui est le lecteur moderne sur alors si vous revenez ici et puis vérifiez qu'il montre ici, nous savons que cela vient de la modernité réelle. Il en va de même pour celui-ci. Mais c'est entre ça de dire : Allez, Allez, c'est inchangé. C' est parce que c'est une réunion de rappel. La valeur des données modernes a été associée à un style unidirectionnel. Donc, si vous apportez les modifications dans la zone de texte, il n'est pas reflété dans le modèle réel. Donc, pour ce faire, nous pouvons ajouter un moteur appelé moderne. Donc, la façon dont vous pouvez spécifier est vous. Pouvez-vous l'épave au carré parce qu'une expression et il est également associé à leur on key up événement. Donc nous allons mourir modèle N G pur et ensuite assigné la variable, qui est croyez-moi, cela provoque un problème, comme vous pouvez voir qu'il me montre déjà un autre. Ce modèle de moteur ne peut pas être utilisé directement comme ça. Il en a un joli avec. Donc, si vous revenez au navigateur, vous pouvez le voir sur la console. Je dois en avoir quelques autres. Et la raison en est que si vous voulez utiliser le modèle de moteur, vous devez travailler avec un autre modèle. Caldas forme modèle. Donc, nous avons obtenu notre modèle ts et ensuite nous disons d'abord importer à partir des formes obliques angulaires et ce que nous voulons importer est quelque chose nos formes modernes et ce module de formulaires doit être ajouté à notre section d'importation. Allons-y ici, et c'est la première étape. La deuxième étape est que chaque fois que vous utilisez un modèle de moteur, ce champ particulier doit avoir un nom de propriété. Il peut être n'importe quelle valeur, mais voir régionalement le même nom que le nom moderne. Donc, étant donné son prénom et que je retourne au navigateur, vous devriez voir que cela montre la valeur que nous connaissons, venant du moderne. La même chose arrive ici. Mais si je commence à augmenter, vous devriez voir qu'il change aussi dans cela parce que maintenant la zone de texte est l' associer au moderne dans un style de liaison à deux sens. Donc, si les changements d'orteil viennent, vous pouvez voir que le modèle est également en train d'être changé. Maintenant, ce que nous allons faire, c'est que nous devons répéter la même chose pour chacun d'entre eux. Mais au lieu de déclarer une variable pour chaque hors des membres, je peux aussi bien effacé, disponible hors type de contrat et initialisé ce contact de démarrage, il va top nouveau contrat. Revenons ici et disons que le modèle correspond point de contrat d'orteil Prénom sur. C' est parce que les données modernes c'est une propriété de cela maintenant. Donc, nous pouvons maintenant donner ici nom égal orteil. Nom de famille N g modèle est égal à deux points de conduite l'année dernière et aussi je peux aussi donner pour celui-ci. Maintenant, je sais que c'est le bouton radio. Nous avons déjà donné une propriété de nom depuis des jours. Tout ce qu'on a à faire est d'associer un meurtre n g égal au sexe des orteils pour les deux. Donc, je vais accélérer ça ici aussi. Ici sur ce sera genre et mettre les endroits que vous connaissez, puisque la valeur par défaut pour contacter notre sexe est masculin. Si je l'enregistre et si je retourne au navigateur, je devrais voir que le courrier est déjà sélectionné. Bien sûr, si je sélectionne cette femme que les modèles, résultats de genre ont changé en femelle. Maintenant, laissez-moi à la même chose pour chacune de ces zones de texte. Et une dernière chose, c'est que ça te dit, fais-le d'abord parce qu'on n'en a aucun. Mais au lieu de cela, nous pouvons afficher le contact. Mais c'est un objet que vous avez affiché dans une forme Jason. Allons juste se battre avec Jason orteil. Voyez le contenu qu'ils retournent au frère et jetez un oeil à cela. Il affiche un objet de contact vide, qui a un sexe et une image par défaut. Mais si je commence à ajouter dans les autres détails, vous pouvez voir qu'il est l'ajout m'a forcé. Nom de famille sexe est déjà là. Alors je prends ici. Nous savons que vous connaissez Burke avec un e-mail, et cela est ajouté et ainsi de suite et ainsi de suite à nouveau. Il suffit de vérifier qu'en ajoutant chacun des champs Donc, vous pouvez voir maintenant que l'objet de données se compose des valeurs de la zone de texte sur que nous devons faire maintenant est orteil écrire une fonction qui peut gérer la fonctionnalité sont. Pour ce faire, revenons au noyau. Nous avons le composant de contact de l'annonce DS. Il est clair qu'une fonction appelée au contact Onda. Nous avons cet objet de contact que nous voulons ajouter toe sur le dépôt existant. Pour ce faire, nous injecterons le service qui est des artères de livres étrangers. Une fois que nous avons obtenu le service, nous pouvons voir ici que ce service de démarrage commence notre nouveau contact. Il a besoin d'un objet de contact, qui n'est rien d'autre que cela a obtenu contact le ventre de retour hors. Notre nouveau contact est observable et sera abonné étaient de fournir un rappel et le rappel obtient l'objet de contact d'identité et nous pouvons dire ce que nous voulons faire avec cela. Donc peut-être temporellement je peux juste afficher l'idée sur la console en tuyautant droit consulaire et vous contactez avec Ivy plus entrepreneur i d. Maintenant, après avoir ajouté je pourrais être intéressé orteil Aller à la page, qui affiche les détails. Donc pour lequel nous pourrions vouloir utiliser un service de plus cette fois rotor service, hors type appelé Shelter. Et une fois que vous avez ce rotor, nous pouvons maintenant dire que ce démarreur ne navigue pas. Et puis nous fournissons la partie où nous voulons aller sur la carte de la fête. Coordonnées avec l'idée nouvellement générée qui est le contact que je d. Et ils devraient prendre l'orteil de contrôle. La page des détails du contact affichant les détails. Personne de contact. J' ai donc enregistré ceci et j'appelle cette fonction sur le clic de ce partenaire particulier. Alors passons au bouton. L' événement click. Il cite orteil la fonction, ajouter la conduite. Donc je dis ça pour revenir au navigateur. J' entends mes pieds est et comme l'Abberton sur une fois que nous à ce que nous devrions voir que les détails ont été ajoutés avec succès à la presse 10 point 30. Valider les entrées des utilisateurs dans un formulaire piloté sur les modèles: par conséquent, en utilisant le formulaire de conduite, nous avons pu ajouter de nouvelles coordonnées. Andi, retournons là-bas. Donc, pour la chose est, sortons de cette partie qui est donnée dans le HTML. Donc on a ça avec Jason, donc on n'a pas besoin de ça. Revenons voir ça juste sous le lien. Non. Mais une chose est que sans taper de prénom, nom de famille, e-mail ou numéro de téléphone, je suis toujours en mesure d'ajouter un nouveau contrat. Et cela vient avec une nouvelle idée. En outre, il n'y a pas de prénom nom de famille. Aucun de ces détails n'existe. Bien sûr, nous ne voulons pas que ces détails soient acceptés. Supprimons ceci et voyons comment cela peut être géré. Donc, dans le formulaire de conduite d'annonce, première chose est, si les champs obligatoires minimum ne sont pas supportés, je ne veux pas que cette personne soit activée du tout, donc les utilisateurs ne peuvent pas prendre cela accidentellement. De plus, supposons que le prénom est obligatoire au minimum que trois lettres doivent être là et un maximum de 15 lettres. De même, je veux avoir Ah, restriction que l'e-mail est un numéro de téléphone de terrain obligatoire doit être ender, et il doit être un puits numérique de 10 chiffres et ainsi de suite et ainsi de suite. Donc, si je veux fournir de telles validations, comment avons-nous fait ça ? Pour comprendre comment le médicament de forme euston d'abord, jetons un oeil à la documentation. Donc, goto point angulaire io qui est docks fondamentaux se forme sur. Vous pouvez voir qu'il y a quelque chose appelé forme brandish. Et ils ont expliqué ici comment la validation téléphonique se fait dans les deux Templin pilotée comme une forme moins réactive. Mais s'il a gratté ici Donc fondamentalement, ce qu'ils disent ici est que vous devez définir une variable, qui est la variable de modèle ici. Nom de hachage. Tu peux donner n'importe quoi ici. Par exemple, dans notre cas, cela pourrait être le prénom de hachage et égal le moteur de toe More. Maintenant, avec cela, ce qui se passe que angulaire crée un objet orteil correspondant le champ. Nous pouvons y accéder en utilisant ce nom de hachage particulier, par exemple, là. Étant donné ici quelque chose comme si le nom correspond modèle de moteur toe que vous pouvez dire nommé, sont invalides ou nommés sont sales etcetera. Donc, nous allons jeter un coup d'oeil sur ça. C' est ainsi que cela peut être fait. Donc, la première chose que nous voulons faire est de remorquer Goto, l' un des champs hachage première moyenne égale modèle d'énergie orteil qui sont également quelques autres validations de base . Par exemple, je peux dire que ce champ est un pied requis. Mainland est égal à traiter dans excellent égal à 15 par exemple Steve it on. Si vous revenez au navigateur, nous voyons la ferme. Allons jeter un oeil à ce domaine particulier. Donc, je sélectionne ce modèle ici, puis je choisis mon prénom sur. Lorsque je sélectionne ceci, j'obtiens l'élément d'entrée généré réel. Bien que nous ayons donné quelques attributs ici comme la classe de type Islay Editor, vous pouvez voir qu'il y a aussi un attribut supplémentaire, l' un d'eux est la classe. Bien sûr, nous avons donné la classe, mais vous pouvez voir que nous n'avons donné que le contrôle de la ferme. Mais maintenant, nous avons Engy intacte Engy intacte N G invalide les classes CSS sont ajoutées sur la base de la scène de ces extraits particuliers. Depuis que nous avons dit que ce manuel gonflement est nécessaire sur nous n'avons pas entré. Il dit ici qu'il est invalide et que le nom de classe a été appliqué De même, le nom de famille CSS vierge du moteur est un jeu parce que nous n'avons pas apporté de modifications à cela. Dès que j'apporterai quelques modifications à cela et même si je le ramène à son état d'origine, il ne sera plus considéré comme vierge. Mais il sera considéré comme sale. Par exemple, si je vais et je crains X, alors c'est que vous pouvez voir que maintenant a le nom de classe CSS ici disant que le contrôle de formulaire qui est ce que nous lui avons donné, dit Engy invalide car il n'y a pas de valeur là-dedans. Il dit maintenant NJ sale à la place n g vierge De même, il waas plus tôt Engy intacte. Maintenant, il est touché au moteur et ce serait utile pour les appareils mobiles. Donc, les données CSS invalides Engy, mais sera supprimé automatiquement dès qu'un satisfait aux exigences du champ. Par exemple, si je tape ici, nous savons que vous pouvez voir que j'ai fait en sorte que les valeurs saisies ainsi requises sont prises, se lever, ont également entré cinq lettres, Donc la propriété continentale a également été prises. Descendez car à l'origine, si vous voyez le nom de la classe CSS, c'est votre valeur Engy. Bien sûr, si je ramène cet orteil arrière, disons deux lettres que vous pouvez voir maintenant il est n g invalide parce que maintenant il ne répond pas à l' exigence du champ . Donc, c'est une classe CSS qui nous aide à comprendre quel est l'état de ce champ particulier Maintenant, avec les noms de classe CSS comme ici, nous avons aussi des propriétés afin que nous puissions utiliser ces propriétés comme immaculé, éditeur valide non valide d'un champ particulier pour dissuader le mien d'afficher un message d'erreur . Ici ne sont pas non plus remarquer que les dollars supplémentaires ici font partie d'un formulaire. Et si vous allez à l'élément de formulaire ici, vous pouvez voir que le formulaire est également considéré comme invalide dès qu'ils tapent sur des informations significatives . Ici, vous pouvez voir que le formulaire lui-même est maintenant considéré valeur. Bien sûr, si je rafraîchis, le formulaire est maintenant dans l'état vierge, donc vous pouvez revenir au formulaire à nouveau. Vous pouvez voir qu'un formulaire est à l'état vierge et qu'il n'est pas valide parce qu'une des zones de texte est invalide, n' est-ce pas ? Donc, nous pouvons maintenant tirer parti de cette propriété et dire que désactivé ce Wharton sont modifiés la couleur orteil rouge eso lorsque le formulaire est invalide. Alors comment on fait ça ? Allons voir ça d'abord. Donc maintenant que j'ai donné votre exigence de base ici, continent requis et le maximum, allons au bouton et nous serons une propriété handicapée ici. Si le formulaire est invalide, La première chose est que nous devions donner au hachage un nom de formulaire qui s'appelle F un est égal à la forme de remorquage N G. Une fois que nous donnons ceci maintenant, nous pouvons accéder au formulaire complet sur le domaine agricole en utilisant ce F pour que je puisse venir à mon partenaire et que je puisse adhérer à cette route réellement handicapée. Non pas que le simple dossier indique ce que nous sommes ascendants est une expression. Donc, je peux dire un point de formulaire Invalide. Donc cul dans un sérieux. Et si vous retournez à la place, vous pouvez voir que le formulaire est dans un état invalide. Sur j'ai le bouton étant désactivé afin que je puisse cliquer dessus maintenant. Droit ? Donc, si je descends au bouton, vous pouvez voir que l'attribut disabled a été ajouté ici. Bien sûr, si je tape ici un prénom, allons taper ici nous non. Si je descends maintenant, nous pouvons voir que le modèle est activé je devrais être en mesure d'ajouter un nouveau contact avec seulement le prénom. Nous pouvons également changer la couleur en changeant cette propriété particulière. Non pas que ce soit une chaîne ici et nous pouvons remplacer ce primaire par un danger dans fermé, les agriculteurs invalides. Alors comment on fait ça ? Allons-y une minute et nous mettrons un double orteil bouclé. Indiquez que vous allez mettre une expression avec le point F non valide. C' est vrai ? Donc, je peux mettre un point d'interrogation si elle est invitée sur un danger et sinon je dirai ici que c'est privé. Donc, puisque initialement le formulaire est invalide, il sera Bt en danger de trésorerie. Une fois que j'ai entré quelques valeurs dans les manuels, vous verrez que cela devient BT et Dash Primary. Donc, revenons au navigateur sur le formulaire est déjà divisé et vous pouvez voir en bas . Le bouton est désactivé et il est de couleur rouge. Comme dans d'autres types et noms comme la note, vous pouvez voir que maintenant nous avons le bouton de couleur bleue, qui est également un voisin sur les mêmes lignes. Soyons aussi quelques autres violations. Par exemple, je veux également que l'e-mail soit obligatoire afin que je puisse taper votre hachage. Email est égal à deux n. g. moderne et puis je peux le voir calme. Donc, vous êtes un couple de choses comme Hash Phone P est égal à deux N g. Moderne. Ceci est nécessaire parce que nous avons affaire à contacté. C' est égal à égal. Barre d'orteil de quatre chiffres. C' est l'expression régulière typique, mais je veux aussi dire un minimum de chiffres d'appel d'offres et un maximum de 12 chiffres à ce numéro de téléphone particulier. Alors sauvegardons ça. Andi, retourne au Frozen. On verra que les agriculteurs dans l'état handicapé qui passe sous le prénom, je suis vous pouvez voir qu'il y a encore des handicapés. Cet e-mail de centre qui a dit à l'exemple point com si mais il est toujours désactivé. Numéro de téléphone I sous quelques numéros. Maintenant, nous pouvons voir qu'il est toujours désactivé, mais dès qu'ils entrent dans le 10 au juge, vous pouvez dire qu'il est activé maintenant. Mais si j'entre 11 encore bien, 12. C' est bon, mais 30 lettre pas OK, donc c'est comme ça que vous serez en mesure d'utiliser certains modèles aussi dans vos validations. Donc maintenant que nous avons activé ou désactivé, Mais sur la base de la validation, nous devons également dire à l'utilisateur que pourquoi ce bouton particulier est désactivé au cas où si vous faites des erreurs comme par exemple, j'ai supprimé le prénom, il devrait me dire ici que le prénom est obligatoire. Revenons donc à notre cœur pour ajouter quelques jours pour afficher d'autres messages. Maintenant, le message d'erreur numéro un serait que le champ prénom est obligatoire, et cela ne devrait apparaître que si l'utilisateur n'a pas encore entré quoi que ce soit. Le 2e 1 serait Milland égal à l'orteil 3. Cela signifie que nous devons dire à l'utilisateur qu'un minimum de senteur vous devez mettre en ligne et que je ne pars pas. L' utilisateur ne l'a pas encore fait. Et bien sûr, le 3ème 1 Nous n'avons pas besoin de respecter, parce que si vous avez une propriété de terrain Max, les navigateurs ne vous permettent pas de taper plus de 15 caractères du tout. Donc ça va ajouter quelques offres. J' ai donc un accord pour les parents le deuxième jour des affaires pour enfants ici. Le 1er 1 dira probablement que forcée signifie ceux-ci exigent sur obligatoire sur le deuxième message d'erreur serait comme, um donc s'il vous plaît entrer trois lettres cased pour le prénom. Je vois ça. Retournez au navigateur et vous verrez que nous n'avons pas affiché ces deux autres messages. Donc, nous pouvons également ajouter un peu de style à cela, comme, par exemple, il doit être dans un peu de couleur rouge. Il doit être un peu plus petit que le reste des étiquettes. Vous pouvez dire qu'il doit être mis en italique pour faire cela. On a Olysse ce cours. Appelons cela comme une classe pour les Urgences de costume en plastique. Jara. Et nous n'avons pas cette classe CSS particulière. Alors ajoutons un. Donc, je vais ouvrir ce CSS orteil correspondant bien sont composant de contact. CIA dit qu'ils pensaient ER, qui crée une nouvelle classe, a donné la couleur offre il étranger est resté. Donnons de l'italique. Nous voulons réduire la taille amusante à environ 80% de rabais sur son original sauve pardon 800.8 p. M. Donc, si je sauvegarde cela et si vous revenez au navigateur, je devrais voir que les autres messages sont comme prévu. La seule chose que nous ne voulons pas, c'est que nous ne voulons pas effrayer l'utilisateur en affichant toute la grossesse. Justin Edwards. Donc, ce que nous voulons faire est que nous devons nous assurer que l'utilisateur a commencé à taper le prénom , puis il n'a pas assez tapé. Les caractères sont, s'il décide et efface tout, le prénom est requis. Ademas en vedette apparaissent. Donc, pour ce faire, c'est à une condition si ici. Donc on va ajouter une directive. Col. N g Donner égal orteil. Nous disons que le prénom, qui est cette variable particulière, est sale car le prénom est invité. Alors montrez ça seulement si c'est sale. Cela signifie que quelque chose a été changé dans les prochains ainsi que c'est invalide. Maintenant, si je retourne ici, vous verrez que ce n'est pas dérangeant tout de suite parce que c'est dans l'état pur. Et si je tape ici quelque chose comme ça et vous pouvez voir maintenant qu'il arrive dès qu'une valeur valide de couche , vous verrez que les éléments ont disparu parce que nous avons veillé à ce qu'il ne soit affiché que s'il est invalide. Et bien sûr, si je fais une erreur, vous verrez que les deux apparaissent sur la même logique. Nous pouvons aussi l'être. Si les conditions ici, par exemple, je peux dire, star Angie, si nous sommes encore forcés de quitter, ne pas les erreurs nommées d'abord sont arrêtées, un objet représentant sur les autres. S' ils existent, je dirai, si l'un des autres s'appelle chœur, alors on veut que ça s'affiche. Donc, nous disons que sûr, ce message particulier seulement si la collection d'erreurs contient requis. Donc la même chose que nous allons copier et coller pour le prochain faire un peu de changements. Donc, fondamentalement, nous voulons dire que cela ne devrait s'afficher que si la validation du continent échoue. Copiez ceci et basé ici maintenant j'ai enregistré ceci. Je retourne au navigateur, vous verrez qu'il n'y a pas d'autre message. Dès que je commence à taper une seule lettre, vous pouvez voir qu'il dit s'il vous plaît sous au moins trois lettres pour le prénom. Je veux plus que les arbres. Pas de problème maintenant, donc si je commence à soulever, vous verrez que l'autre message apparaît moins. Si c'est complètement cela, vous verrez que c'est le cas. Le prénom est requis. Voici donc comment vous pouvez ajouter des messages d'erreur personnalisés sur. Alors revenons en arrière. Copiez ceci lors du collage pour l'e-mail. Donc e-mail n'a qu'une seule évaluation, qui est qu'il est nécessaire de coller ici et dire que c'est essentiellement e-mail sur ce est e-mail. Les erreurs appelées ne sont-elles pas requises afficheront que l'adresse e-mail est requise ? On n'a pas la validation continentale pour ça, alors on va s'en occuper. Copions la même chose pour quatre. Numéro sur le numéro de téléphone a deux élévations cette fois, donc l'un est nécessaire. Donc juste comme ça. Donc je vais dire que vous êtes parce que ça pour le téléphone est sale car un téléphone moins est invalide car un dernier téléphone a un score d'éditeur requis. Et, bien sûr, le message devrait indiquer le numéro de téléphone est requis. Andi, je vais copier ça. Téléphone goûté a un éditeur appelé Pattern. Nous pouvons donner aux clients Mme qui dit que Bush plaisant. Peut-être que vous pouvez dire 10 à 12 chiffres pour pour l'enregistrer sur. Revenons à l'orteil du navigateur Rafraîchir une fois. Andi, voyons si on peut faire des violations de l'évaluation. Alors je vais taper mon nom et libre. Mais si je commençais à élever, il y a un éditeur. Si je supprime complètement cela, il y a une erreur qui va de la même manière ici. Je ne sais pas vraiment sur le CO, pas de problème. Mais si je commence à élever complètement, vous verrez qu'il dit que les militants sont nécessaires. De même, si j'ai un numéro de téléphone, si je tape même un seul chiffre, il dit que l'importation lieu 10 à 12. C' est pour quatre numéros. J' ai commencé à enregistrer des numéros de téléphone aléatoires. Maintenant fixez qu'au chiffre 10, vous verrez que les autres messages ont disparu. 11. Pas de problème. 12. Pas de problème. Mais protégez le 13ème 1 Vous obtenez ça, Ademas encore. Maintenant, si vous c'est tout à fait, vous verrez qu'il dit toujours pour les nombres requis. C' est ainsi que vous devriez être en mesure d'ajouter des validations personnalisées pour votre formulaire, sorte que les données non valides ne soient pas entrées dans votre base de données 31. Monter un contact en utilisant un formulaire réactif: savoir que nous avons vu les formulaires pilotés par le modèle. Jetons un coup d'oeil aux formes réactives. Vraiment. Les réformes sont basées sur deux classes angulaires appelées contrôle de forme, de groupe et de formulaire, pour comprendre comment cela fonctionne. abord, ajoutons un mettre ici pour une réunion les coordonnées de la personne sélectionnée en cliquant sur, ce qui m'amène à un formulaire qui est préchargé avec ces détails particuliers. Alors d'abord, sortons de l'eau. Donc, nous allons aux détails de contact du composant SRC AB et à la place que le HTML a actuellement un bouton de suppression qui a eu un autre durcissement. Avant cela, c'est un bouton avec Bt et Bt et corbeille Primary comme noms de classe. Et puis il a déménagé a la gomme. Aucune prise sur cela ne devrait me conduire à un écran différent, et cela peut être réalisé de deux façons. L' un est de l'utiliser tôt. Le second est d'aller par programme vers un autre composant. Allons sortir. Pour partir. Rolling est une expression parce que nous donnons un crochet ici et l'expression même en ajoutant que je ne suis pas composé de différentes parties de la pièce. La première partie sera le combat d'élite slash, qui est un fixe à part, suivi de l'idée hors des utilisateurs sur l'idée d'utiliser que nous le voulions. Est-ce que ce contact est notre i d. donnons contact. Je ne le sauve pas ? Mais ce particulier sur la définition n'existe pas. Allons à notre APP Model DS et dans le modèle APP DS. Nous avons orteil définir un itinéraire pour la chose, mais nous n'avons pas encore de compétent, alors continuons à un composant. Donc, nous allons à un nouvel onglet, assurez-vous qu'ils sont là dans le répertoire de travail. Nous aurons n'importe quel composant de génération G. Nous voulons commencer dans le dossier des composants qu'il contact est le nom du composant. Nous ne voulons pas de spécifications de la mort à ce stade. Et puis nous voulons aussi une voiture de préfixe. PB pour qui livre Ce genre est le CSS HTML sur les fichiers DS correspondant au composant. Aussi, c'est la barre oblique SRC ab slash AP Model DS dans la section déclaration. Revenons donc à la majorité de l'APP. Oui, ajoutons une nouvelle définition de route pour n'importe quoi. Le contact est une partie. Il contact quoi pour un donné. Heidi. C' est donc une idée deux-points qui en fait une variable sur le composant que nous voulons. Le Seigneur. Qu' est-ce que c'est ? Composante contractuelle. Sauvez-le maintenant. Si vous retournez chez le frère, vous devriez voir qu'il y a un bouton d'édition en cliquant sur lequel il me prendra orteil. Un nouveau composant qui est dirigé Contact fonctionne maintenant lorsque ce composant est chargé, nous aimerions obtenir les détails de contact pour le i d. correspondant sur le travail avec cela. Donc, revenons à la composante aidée à Oui, et ici d'abord nous voulons orteil recevoir un couple de dépendance est numéro un serait orteil obtenir la route activée afin que nous puissions sortir cela. Périmètre deuxième est les services de carnet de formulaires à travers lesquels nous pouvons réduire les coordonnées correspondantes . Et il est vrai que d'abord nous avons dit hybride après redid route hors de l'activité gorge. Ce que City Girl étudie Private Oh, pour les autres et à la fin, G sur elle. Faisons la partie de chargement. Donc, s'ils commencent l'activité, se développent vers Adams, ce qui est un observable, et nous souscrivons à cela en passant un rappel, et l'appelé Reckless est l'Ari du Baron. Donc l'Onda de la firme nous aimerions travailler avec le i D. Donc nous disons que vous êtes préoccupé par les entreprises hors Heidi Juste changements qui ont été en mesure d'accéder à l'i d de l'actrice Park. Donc on retourne à la gelée sur. Lorsque cette page est chargée, vous devriez voir qu'elle indique « Obtenir l'arbre d'idées ». Alors, quelle est l'idée qui vient du périmètre de la route ? Et maintenant que nous avons l'idée, donc nous devrions être en mesure de faire une demande. Donc, copions cette partie et sortons de cela, qu'ils déforment le service, commencent, obtiennent les chefs de contact de l'I D particulier, qui renvoie un autre observable, l'indice qu'en fournissant un combat qui poursuit les coordonnées qui sont reçues le. Ensuite, nous aimerions apporter la même chose juste une très belle. Retournons à la Rosa et voyons que nous obtenons les détails correspondant au Je serai donc j' ai la liste des contacts. Je sélectionne au hasard un autre détail, et puis il a prétendu, et vous devriez voir que nous obtenons les détails de cette personne en particulier maintenant Tout ce que nous avons à faire est de remorquer ces détails dans une forme qui apparaît ici. Pour cela, nous allons utiliser un formulaire réactif sur la première chose que vous devez aller pour travailler avec les formulaires actifs est aller au modèle APP DS et importer un autre modèle à partir des formes angulaires appelées formes réactives. Donc, ils ont un modèle de formes réactives. Cela doit être ajouté à la liste des importations que nous avons ici parce que maintenant notre modèle dépend d'un autre module. Une fois que ce modèle de formulaires réactifs est disponible, ce que nous pouvons faire est que nous pouvons aller ici et effacer la variable ou le formulaire de contact hors groupe de forme de vie et nous pouvons initier. Est-ce dans le quelque part ici, commencer formulaire de contact est égal orteil nouveau groupe de téléphone. Le nouveau constructeur de groupe de formulaires prend certaines configurations et la configuration concerne l'élément de formulaire. Par exemple, imaginez que cet objet de formulaire de contact représente l'ensemble du formulaire. Le formulaire est fait sur les éléments de formulaire comme les zones de texte et quelles sont les valeurs de chacune de ces zones de texte que nous serions intéressés à mentionner. Et maintenant, nous voulons orteil pré Seigneur ces détails de contact dans ce formulaire. Donc, évidemment, nous voulons avoir un manuel pour chacun d'eux. Donc, nous aurons vos variables comme Ivy avec un nouveau formulaire contrôler le formulaire. contrôle peut être un constructeur vide ou vous pouvez également donner une valeur par défaut. Par exemple, nous laissons cela tel quel, sorte que vous verrez que le I d ne sera pas. Parce que nous avons un contrôle de formulaire sans aucune valeur fournie sur cela pour la raison que nous ne fournissons pas la valeur ici est parce qu'à ce stade, nous n'avons pas le contact réel. Le contact est chargé à l'aide d'un observable. Nous devons donc définir les valeurs qui se forment dans ces sections particulières. Nous le ferons dans une minute, mais nous définirons d'abord les objets de valeur. Maintenant que nous avons initialisé tous les éléments du formulaire de contact, nous pouvons également donner un D pour la valeur à l'image qui correspond au thé pour l'image de profil de contact qui est là dans le contact 50 ans. J' ai cette ficelle. Certains copient cela, et si vous revenez ici, le constructeur a la première valeur par défaut facultative de périmètre qui ont été donnés ici. Maintenant, passons au HTML correspondant au composant. Faites-le sortir du formulaire Créateur de paragraphe sur dans le formulaire. Nous dirons que ce formulaire doit être lié à la variable de formulaire qui a été créée ici , qui est appelé formulaire de contact. Et c'est très simple. Nous utilisons une nouvelle directive appelée As forme Equals Toe Fund qui forme dans. Prends ça. Nous pouvons maintenant avoir des boîtes supplémentaires représentant les valeurs de chacune d'entre elles. C' est bien. Ne consiste pas à partir d'une étiquette. C' est dans le prénom cette entrée et nous dirons que vous êtes sous contrôle de la forme. Le nom est égal à deux prénoms. Maintenant, vous pouvez voir que nous utilisons une expression ici et nous utilisons simplement un attribut. C' est la syntaxe maintenant engagée. Si je n'utilise pas un groupe de formulaires et n'utilise pas directement un nom de contrôle de formulaire, alors vous pouvez dire contrôle de formulaire comme une expression égale toe. Le prénom dans ce cas, il est supposé comme point de contact Prénom de formulaire. Maintenant, c'est ça. Maintenant, si vous comparez ceci avec une approche basée sur un modèle, nous n'avons pas besoin de définir un nom pour cela. Nous n'avons pas besoin de définir le modèle de moteur. Nous n'avons pas à le définir. Nom de l'employé avec de l'argent. Le prénom équivaut à un modèle étrange. C' est pourquoi c'est beaucoup plus simple. De plus, il est également testable parce que maintenant tout est blessé optique ici, y compris les validations, que nous verrons dans la prochaine vidéo. Nous pouvons tous mettre les données des formulaires en utilisant ce paragraphe, et nous disons ici, formulaire de contact, Valeur sombre. On peut le mettre comme un chasseur. Donc ça va vérifier Cette absurdité va revenir au navigateur. Tu devrais savoir. Voyez qu'il y a une boîte supplémentaire. Toutes ces variables membres hors de l'objet de formulaire n'est aucune. Eh bien, si je vais ici et tapez un nom, vous pouvez voir qu'il apparaît dans cet objet de formulaire particulier. Donc, ce qui signifie que les boîtes supplémentaires ont bean associé magiquement à l'objet de formulaire. Alors revenons en arrière et ajoutons quelques éléments supplémentaires. Donc je vais copier ça sur base. Ça va être pour le nom de famille, et on a juste tapé ton nom de famille. Sauvez-le. Retournez au navigateur. On devrait voir deux zones de texte sur. Je devrais être en mesure de taper les deux sur vous pouvez voir que je suis capable orteil refléter les changements dans le formulaire de contact. Objet avec cela fait. Maintenant, c'est à un peu d'embellissement. Je vais l'enlever. Je vais ajouter une classe hors groupe. Ce ne sera qu'une étiquette ici. Classe Amerada hors forme contrôle. Faisons une copie du même Andi à un autre pour le nom de famille que nous aimerions voir que c'est son nom de famille. Le genre est vraiment pas. Donc je vais avoir un genre comme légende. Celui-ci serait de type égal à deux radio. Si vous ne mentionnez pas le type par défaut, ce sera un texte voulu. Par conséquent, ce sont des zones de texte. Je n'ai pas besoin d'un cours pour cela, mais j'aimerais avoir un nom ici parce que le genre est vraiment ne lirait pas l'impuissance. Pour qu'ils nous travaillent un groupe, vous devriez avoir un nom commun là-bas. Vous devez également dire un nouvel outil égal pour que la valeur que vous avez mentionnée ici soit celle qui est sélectionnée lorsque ce bouton radio est sélectionné. Et bien sûr, le nom du contrôle de formulaire. Dans ce contrat de l'objectif de son sexe, j'aimerais avoir un bouton de plus, mais ça va être considéré comme une femme. Bien sûr, nous ne verrions que les boutons radio des orteils, mais nous aimerions avoir quelques légendes pour cette Onda. Nous pouvons aborder la légende tout comme ce mâle et femelle Où un problème est que si vous cliquez sur le monde mâle ici, le lecteur Grande-Bretagne n'est pas sélectionné. Vous devrez peut-être épingler le point et cliquer dessus pour le vendre, Andi, plutôt que si vous voulez choisir sur l'étiquette, vous devez les regrouper en un seul. Donc je vais couper ça, mettre un travail et me baser sur la grossesse de la même façon que je vais couper ça pour l'étiquette basée sur le temps. Je n'ai pas besoin de ça, donc je vais l'enlever de la même façon. Alors maintenant, nous retournons à un navigateur, je clique sur le monde féminin. Vous pouvez voir qu'il est sélectionné. Je donne un coup de pied sur le monde Masculin. Ils ne seraient vraiment pas sélectionnés parce que le travail remarque aussi que c'est un haricot sélectionné ici. Dès que vous cliquez sur cette preuve de rue, vous verrez qu'ils sont mauvais que aussi se changer. Alors maintenant, complétons le reste des formulaires en copiant et collant chacune de ces offres. Et enfin, orteils Burton enregistrent les détails qui rayent votre arme plus égale à Bt entre les changements primaires Xavier ST sur. On n'a plus besoin de ça. Alors sortons de ça. Sauvez-le. Revenez pour les nouveaux et vous pouvez voir que le formulaire apparaît avec l'image déformée, Ural, Ural, parce que c'est ce qui est là dans l'objet de formulaire. Et le reste des détails n'existent pas encore. Et si vous vous souvenez, nous sommes en mesure de faire avec succès les détails de l'idée qu'il est une assiette ici le jour . Évidemment, nous devons savoir avant de charger cela dans la ferme sur cette étape se fait comme ça. Retournez à l'endroit où on faisait la console depuis longtemps. Nous pouvons simplement penser à cela. Démarrer contact formé sont la valeur définie. Andi, une fois sur l'objet de contact réel dans le formulaire hors paires de valeur clé. Maintenant, vous pouvez simplement des trucs comme un contact comme ça. Il doit être un tas de Keeble semble donc pour le faire, nous utilisons un opérateur de propagation de l'an six. Donc, nous disons ici que nous voulons créer un nouvel objet avec les valeurs de l'objet de contact. Sauvez-la. Lorsque vous retournez ici, nous devrions être en mesure de voir que les détails du contrat ne sont pas préchargés. Et puisque nous savons qu'en ayant quelque chose dans la zone de texte affecte directement l'objet de formulaire nous savons que les changements que nous faisons ici sont déjà là dans l'objet lointain. Tout ce que nous avons à faire est d'associer ceci avec le jour à la fonction qui sauve l'état actuel de la forme dans notre point de vue. Maintenant, c'est la dernière partie. Nous n'ajouterons pas de fonction ici appelée Enregistrer les modifications et dysfonctionnement. Nous allons nous associer à la s'il vous plaît uniformisé le bouton. Et quand il s'agit d'une carte, je dois enregistrer ce service de démarrage. Quels annuaires téléphoniques sont toujours mis à jour contact et nous avons une fourniture. Ils commencent le contact pour la valeur sombre et cette valeur correspond à un objet représentant chacune de ces clés avec les valeurs des boîtes de pont. Alors allons-y, appelez cette fonction. Nous disons que l'événement clic est égal à enregistrer les modifications fonction. Donc, la même fonction de changements appelle ici le contact de mise à jour de, ou sari annuaire téléphonique qui renvoie un observable sur. Abonnons-nous à cela. Et lorsque la mise à jour termine le travail, elle revient avec le Dejan mis à jour. Donc, nous obtenons cela sous la forme d'un nouveau contrat. Et tout ce que nous avons à faire est d'attirer le composant des coordonnées pour cette idée particulière. Andi, nous n'avons pas encore la dépendance du rotor, donc nous allons ajouter une dépendance de plus le rotor Private Sauveur, caractère hors type. Et puis on revient ici, ils commencent dans l'obscurité. Navy Gate est un plan d'une journée hors pièces. Dans ce cas, il va être contacté Dash 50 jours, deuxième fond. Ce sera l'objet de contact Ivy off mis à jour. Donc, ils contactent sur n'importe quel. Sauvez-le. Andi, si je retourne ici, on verra qu'il y a un formulaire qui est préchargé. On peut retourner à la liste des contacts. Prenez les données de quelqu'un d'autre cliquez sur Modifier. Les données sont Lord Ege. Je vais mettre quelques hachages ici est sur, puis dire enregistrer les changements et vous devriez voir maintenant il a chargé le composant de détails de contact pour ce que je d. Et je vais voir les changements qui ont fait avec succès. Retournons en arrière. C' est la même chose et enregistrer les modifications, et nous voyons maintenant que les changements ont été mis à jour 32. Valider les entrées des utilisateurs dans un forme réactive: donc, en utilisant les formulaires de réalité, on a pu modifier les détails. Cependant, nous n'avons pas de validations pour le moment. Donc je suppose que si je retire ça était Lanny sur, alors sauvegardez ça. Vous devriez voir que le prénom de cette personne est le dernier parce que nous n'avons pas eu validations. Donc, tout comme, engagé les formulaires pilotés par le modèle. Nous aimerions également fournir des validations pour les formulaires réactifs, mais celui-ci serait beaucoup plus simple. Alors mettons cette banque de débarquement à la ferme. Andi Ici, nous pouvons définir certaines validations comme un moins de 34 valeurs. Maintenant, cela est fait avec l'aide de la classe des validateurs d'aide. Revenons donc à la documentation angulaire pendant une minute. Ouvert, angulaire, ça le sont. Vous cliquez sur les chiens et les bases sur lesquelles nous avons des formulaires. Nous avons une validation de formulaire. Et bien sûr, le 1er 1 est le modèle d'invalidation. Les préfets rampent un peu vers le bas. Je vais voir qu'il y a une validation de formulaire réactive sur l'une des mentions ici est que voir les validateurs ap une référence. Donc, ils construisent une classe pour les validateurs et il contient des fonctions d'aide donc Si je clique dessus , vous verrez que ces fonctions existent. Hommes, qui est la validation de la fonction Max requis. C' est un titre. La plupart d'entre eux sont explicatifs sur. Vous devriez être capable de comprendre ce qu'ils font, et même si vous ne le faites pas, vous pouvez le faire. Il vous dira ce qu'il va faire exactement. validateur qui nécessite l'orteil de contrôle a une valeur non vide. Donc c'est ce que nous aimerions avoir ici pour le prénom, probablement pour l'email pour les quatre numéros etcetera. Donc, même si je dis email ici à nouveau, voir que ce doit être un e-mail valide. Cela va automatiquement tester qu'il s'agit d'une adresse e-mail afin que nous puissions revenir en arrière maintenant. Andi, disons ici que le prénom n'a pas de valeur par défaut, donc nous le donnons vide. Mais vous vous souvenez que lorsque le contact est chargé du reste en point, il sera dit. Mais d'ici là, ce sera une planche. Mais nous aimerions spécifier qu'une zone hors refroidissement de validation s'applique. Par exemple, je veux dire qu'il est nécessaire et qu'il a un continent sur trois lettres afin que je puisse taper vos validateurs n'ont pas besoin et ensuite je vais prendre des validateurs. Commencez le continent sur trois. Donc, c'est ainsi que vous spécifiez un tas de validations sur les lignes similaires. Je peux spécifier ici pour e-mail et téléphone etcetera. Nous y reviendrons dans une minute, alors retournons à la ferme pour faire un peu d'inspections. Nous avons les coordonnées. Cliquez sur l'édition et nous voyons les détails. Donc je vais sélectionner cette flèche. Andi, choisissez la propriété du prénom et vous pouvez voir que la propriété de la première fois ici a du carburant. Les classes CSS qui identifient l'état actuel du contrôle de formulaire d'élément de formulaire sont quelque chose de plus grand. Il prend en charge les taxis, son nom de classe. Mais il considère en G intacte parce que nous n'avons pas utilisé d'appareil mobile pour passer que tout ce que nous avons fait, c'est dans l'état pur. Mais il a aussi dit qu'il était rallié. Mais si je suis tout à fait, vous pouvez voir maintenant il y a quelques changements, et il dit que c'est un objet sale parce qu'il a été modifié son été touché aussi bien qu'il est en G invalide. Maintenant, le n G invalide vient principalement parce que hors du fait qu'il est un champ require. Si j'ai ramené Lanny snobby, tu vois, tu vois, c'est une valeur de haricot. Mais si j'enlève trois lettres, vous pouvez voir qu'il est à nouveau invalide parce que le continent est maintenant violé la même chose. Un endroit pour égaler la forme. Vous pouvez voir que le formulaire a également un état non valide sur tous ces états peut être consulté à l'aide notre console. Revenons à notre sauvegarde change les gens littéraires là-bas, ce qui est un excellent point pour le moment. Laissez-moi engager ce cours afin que je ne veuille pas vraiment économiser entre ceci ou quoi que ce soit. Alors revenons sur le lien. Nous prenons maintenant les mêmes changements et maintenant nous voyons que nous sommes dans le burger profond. Allons à la préoccupation Onda. Nous pouvons maintenant dire ici ce point de formulaire de contact de démarrage Vous pouvez voir qu'il y a un statut qui spécifie s'il est dans l'état vaillant ou non valide, et il dit qu'il est valide parce que nous n'avons pas d'erreurs dedans. De même, nous pouvons également vérifier démarrer le formulaire de contact point des enseignants américains invalides téléphones. De même, je peux aussi vérifier si elle est valorisée. C' est vrai, donc nous pouvons utiliser soit le statut. Quelle est la ficelle ? Êtes-vous les lingots invalides, fonctionnalités valorisées ? Vérifiez s'il est valide ou non valide. Évidemment, on veut orteil Utilisez ce champ ou faites-le de cette propriété et contrôlez l'apparence de ce bouton. Toujours attendre à la base. Allons le sortir du débunker sur non engagé. Ceci Nous allons également revenir à la pointe de notre composant de contact d'édition. C' est TML. On a le bouton. Nous voulons ajouter l'attribut disabled en cas de désactivation du formulaire invité. Donc c'est très simple. Maintenant, je peux dire que désactivé est égal à deux. C' est une expression pour que je puisse voir votre contrat de fléchette invalide. Donc, tant qu'il est invalide, nous rendons cette base de bouton capable et en utilisant le contact de thème formé, valide ou invalide, nous pouvons contrôler si elle est supposée être primaire sont danger. Donc j'aurais coupé ça, mis une expression de guidon et puis je dirais que vous êtes un chien de forme de contact. Question valide. Mark Delgiudice concert comme d'autres moyens primaires, il est considéré comme passé un danger donc d'abord parce qu'il est valorisé, il ne devrait pas y avoir de problème. Vous pouvez voir qu'il est écrit bleu et qu'il est activé. Je vois un doigt à regarder. Mais si je l'enlève, descendez, descendez, vous pouvez voir que le bouton est désactivé et je ne peux pas cliquer dessus maintenant. Droit ? Donc, c'est si simple à travailler avec maintenant, sans même ajouter de règles de validation dans nos éléments HTML, nous avons simplement ajouté qu'il y a un obligatoire sur les validateurs continentaux. Donc, nous avons ajouté les règles de validation requises dans Midland dans l'objet de formulaire sur qui est automatiquement pris en charge ici. Donc, notez que je n'ai pas spécifié ici que l'élément de forme est nécessaire notre continent sur les mêmes lignes. Je peux aussi dire qu'il doit s'agir d'une adresse électronique car la dernière qu'elle doit être requise pour que je puisse passer à cette composante années plus tard. Ils entendent que l'e-mail n'a pas de t pour la valeur sur je peux voir vos validateurs Don't e made Plus je peux enregistrer les validateurs. Ne te taisez pas. Vous n'avez pas besoin de donner le continent a combattu celui-ci. Donc maintenant, si je retourne au navigateur sur de tout va bien. Mais si je supprime cela après son simple, vous pouvez voir qu'il donne maintenant un autre parce que ce n'est plus un e-mail valide. Donc, je dois donner au symbole racine. Je ne peux pas commencer dans un véritable qui est également invalide. Je dois avoir quelque chose. Vous ne pouvez pas juste avoir un simple texte aussi là, donc c'est pris. Descendez. De même, nous pouvons également donner une validation de numéro de téléphone afin que je puisse dire que le numéro de téléphone est nécessaire comme un moins C'est un modèle. Donc, je peux dire que les validateurs commencent les facteurs sur le modèle est soit une chaîne sur une expression régulière . Donc je vais aller avec l'expression régulière sur l'expression régulière doit avoir un chiffre. Comment Maney veut les chiffres jusqu'à 10 à 12 chiffres est ce que je m'attends. Numéro de téléphone américain maintenant. cause de ça maintenant, il ne suivra aucune valeur non numérique. Revenons en arrière, faisons un rafraîchissement complet et puis très bien. Si cela est correct afin que vous puissiez voir que maintenant que le 10 chiffres semblant il est ceci, vous pouvez voir qu'il est automatiquement changé orteil rouge sur les handicapés. Donc je ne fais pas ça. Et si je tape ici et parie aussi que ce n'est pas une charge. Et donc ça doit être un nombre. Donc, maintenant que nous avons fait les validations, nous devons également dire à l'utilisateur que vous ne pouvez pas simplement avoir deux lettres pour le prénom, vous devez dire que le prénom est obligatoire. Nous voulons donc fournir des messages d'erreur ici, à la rescousse, qui ne sauront pas ce qui se passe avec cette ferme. Droit ? Alors revenons. Je suis ces messages ici et contrôle l'apparence de ces messages en utilisant d'autres formes. État. Donc on va aller taper ici un do avec probablement un cours hors de l'ère. Nous n'avons pas cette classe avec laquelle nous allons les artistes sur la violence envers les enfants pour deux autres messages. Le premier message d'erreur est pour le prénom étant obligatoire dans le 2ème 1 probablement pour la violation continentale. Donc c'est le type. Votre prénom est obligatoire et puis je suis tapé votre s'il vous plaît entrer au moins trois lettres. Nous voulons que ces messages apparaissent uniquement si le prénom a été touché par bean sont sales et non valides. Maintenant, nous savons comment accéder au formulaire de contact. Mais comment accéder au formulaire de contact ? ce prénom. Maintenant, c'est là que nous avons quelque chose qu'on appelle les contrôles. Donc nous pouvons i n g Si vous êtes sur, alors nous disons que vous êtes de contact sous forme de contrôles sombres. Alors, quelle est la liste de tous les contrôles que nous avons sur ce que le prénom a gagné le contrôle et est-ce invalide ? Si c'est invalide, alors montre-moi qu'Andi doit être sale. Donc je vais dire que ton prénom ne fait pas mal. Donc, cela maintenant s'assurer de commencer les premières minutes 30. Cela signifie que quelque chose a été changé là-bas sur le changement deux valeur est invalide. Alors seulement afficher celui-ci maintenant hors cours. Nous voulons également que cela ne soit désespéré que s'il y a un éditeur pour le prénom appelé obligatoire. Donc, évidemment, nous devons ajouter un NGF de plus, qui va copier cette partie avec une étoile n g égal orteil ce nom de force, mais d'autres ne sont pas requis sur. C' est la façon dont vous avez spécifié. Bien sûr, les adultes voient la collection hors de tous les autres. Si tout cela il y a des erreurs et avons-nous le nécessaire mieux ? Ensuite, affichez seulement celui-ci et le suivant est juste une copie basée hors de la scène. Mais au lieu d'être requis, ce sera la violation d'un continent pur sur l'Angleterre, ils devraient prendre la même chose. Donc, c'est à un plus frais. Maintenant, vous verrez qu'il n'y a pas d'autre message apparaissant car Numéro un il n'est pas valide. Numéro deux, il n'est toujours pas sale, donc en colère. C' est ça. Maintenant, c'est sale, mais c'est toujours valide. C' est sale, toujours marié. Mais maintenant c'est sale, invalide, et l'invalide c'est parce qu'il viole la relégation continentale. Alors je vais, c'est tout à fait maintenant. Bien qu'il soit le pool de validation requis sur, il affiche le prénom est obligatoire. Et comme dans le cas précédent, nous aimerions appliquer un style à cela. Revenons donc au CSS correspondant à ceci, qui est juste ici et puis nous allons définir une étoile de classe ici, et nous pouvons voir ici que la couleur est le style de forme rouge. Probablement italique, puis ils ont formé la taille. Nous pouvons dire votre 0.8 PM comme 80% de réduction sur sa taille d'origine. Revenons au navigateur. CSS peut nécessiter une actualisation complète. Faisons ça, Andi, essaie d'élever quelques lettres. Vous pouvez voir que nous obtenons cela et un message aussi. Donc de la même façon. Nous pouvons également définir d'autres messages pour d'autres champs. Donc je vais copier cette partie. Nous avons un contrôle de courrier électronique qui a atteint les élévations cette fois numéro un est nécessaire. Bien sûr, le 2ème 1 est le soir. Donc, ce doit être un e-mail valide. Alors, prenons ce changement. Tout le prénom à émettre Onda. Nous disons que l'adresse e-mail est obligatoire. Le deuxième message serait comme une expression féminine non valide. On va faire face à la même chose. Toe Full téléphone a également des validations. L' un est le besoin. Le second est le modèle. Alors Anglo cellule, ce sera les prénoms. Et puis je vais changer ça en quatre. Et ils disent que le numéro de téléphone est obligatoire. Et voici le combat. Donc nous allons spécifier que c'est que vous pouvez dire, s'il vous plaît Input et 12 chiffres sur saut. Bien sûr que j'ai oublié. Ce doit être un e-mail. C' est donc la règle de validation. Et c'est le modèle de Telesco. Sauvegardez ça. Revenez pour que le navigateur soit actualisé une fois activé, puis cochez Si tous fonctionnent comme prévu. Je vois donc un autre message. Je vois le deuxième message d'erreur. Maintenant, je supprime ce je la crête, donc pas une expression valorisée. Donc je vais enlever ça. Il est émérite est obligatoire. Donc, il dit ici agréable, mais ont tendance à faire des chiffres bien seulement. Et si plus il est pour le nombre est obligatoire. De plus, le même bois est complètement désactivé n'ont pas pu aller plus loin sans faire des entrées vaillantes. 33. Intégrer jQuery (pour la pagination sur les glissements): beaucoup de tentatives que nous pourrions avoir à utiliser notre enfant 40 était complètement C'est comme poussin. Eh bien, par exemple, dans notre application, quand nous allons à la liste de contacts sur gratté, vous verrez que c'est un bouton Lord More, qui seigneurs le prochain lot de 10 contacts. Mais si vous voulez que cet orteil automatiquement, Seigneur, quand vous grattez la page ici comme vous l'avez peut-être vu sur Facebook où lorsque vous faites défiler vers le bas, il charge plus de contenu de page. Pour ce faire, il se peut que nous devions utiliser J Query. La première étape vers cela est la requête G installée sur sa dépendance. Donc j'ai été envie. Um, la qualité J installée et sa dépendance est activée types slash qualité poussin. Une fois servi dans l'installation, nous avons toe laisser angular savoir que nous avons un nouveau fichier JavaScript . Pour cela, nous allons orteil angulaire Jason, qui est juste ici, et vous pouvez voir que si vous faites défiler vers le bas il y a une section appelée Script, qui est une zone sur les scripts que vous voulez associer orteil. Alors développons ceci et ajoutons une entrée. La blessure ici donne pour J Query, qui est là dans la norme, ou des outils, et Scott ne g développer dist ! Et nous avons votre geek marié ou Js andi avec le Nord souligné Modernes slash j carrière slash juste slash vérifier Très sombre, moyenne torches sauvés ce combat sur tous les changements à votre angulaire Jason demandera le soleil sera redémarré Allons Retour à notre contrôle de survie Voir et exécuter ceci une fois de plus. Et maintenant, nous avons l'application chargée avec succès afin de comprendre comment gérer le défilement. Evans hors du Jake s'inquiète. C' est Goto. Jake est tombé dans l'obscurité sur l'endroit où J Query a déjà été chargé. Andi, je vais ouvrir les outils de développement. Maintenant, vous pouvez voir que dollar est une variable valide qui sépare leur fonction. Onda Good assimilé un dollar pur hors corps porte dépendent et vous devriez voir qu'il ya un bonjour imprimé. Donc, ce qui veut dire que Jake s'inquiète, ça marche ici sans aucun problème. Et c'est vraiment bon et nous avons accès au dollar. Afin de connaître la position des brouilleurs, il peut voir que ce robot est actuellement à la position zéro. Mais quand je fais défiler vers le bas maintenant, vous pouvez voir une partie des pages en dernier, par exemple, jusqu'à entendre si c'est le dernier, non ? Donc c'est parti maintenant. Nous voulons savoir ce qu'on appelle position lorsque vous êtes en bas. Donc, ce qui signifie que nous voulons voir quelle est la quantité de page qui est chargée en haut. De plus, quelle est la hauteur de cette section, quel est l'état de la fenêtre ? Donc, nous pouvons obtenir cette information en tapant ce que vous avez égal ? Fenêtre de 2$. Donc, savoir WT présente l'objet de fenêtre et je peux prendre votre porte de fenêtre forte haut Andi puisque actuellement nous avons presque en bas. Quand j'appuie, c'est 13 71. Mais si vous allez au début et ensuite appelez la fonction de thème zéro parce que je n'ai pas gommé quoi que ce soit. Donc, si j'apporte l'orteil de la page ce niveau donc en grattant et maintenant si je dis quel est ce travail rampé  ? Vous pouvez voir qu'il est 2 26 grand sens de la même façon maintenant quand je suis ici, il a dit 1371 qui est l'emplacement de votre document à cet endroit donc nous pouvons également obtenir la position inférieure en ajoutant la hauteur de la fenêtre Par exemple, si je live w hauteur de point, il est 6 21 qui est la hauteur de cette partie orteil cette partie partie. Si je réduit les fenêtres orteil droit quelque part sur 50% et vérifier, vous verrez qu'il est quelque part sur TNT et 25 choisir dit en additionnant, qui est rampé jusqu'à la hauteur. Nous devrions obtenir le prêt sur le document afin que vous puissiez voir votre hauteur de point w ainsi que le village ou la mêlée dessus sur. C' est censé être la hauteur de notre fenêtre, c' est-à-dire les grandes cellules de 1992. Maintenant, cela est vraiment basé sur où est votre position de défilement actuelle ? Donc maintenant, quelque part que je suis au milieu, vous pouvez voir qu'il est dit 1034. Donc, si je suis au début, je devrais obtenir quelque chose comme 600 à n'importe qui parce que je suis en train d'avoir ce rampé zéro, et je ne suis que l'addition de la hauteur de point w eso 6 21 Big sell. Maintenant, si vous êtes au plus bas, nous savons qu'il est 13 71 mais cela dépend du contenu de la page. Le contenu de la page mise en place est appelé Document. Donc je peux rester ici pour le document Equal Stores. Et maintenant je peux dire la hauteur du lot et vous pouvez dire que la hauteur de Didot est 1992 Nous vous respectons là où je suis en ce moment. Donc, je suis au début en ce moment. Hauteur du concessionnaire, qui est le document Hauteur est encore 199 orteil. Donc, afin de vérifier si nous avons défilé vers le bas plus, nous devons comparer la hauteur de point bleu placé des leaders foule tous les orteils l'acte ou la hauteur. Et si elles correspondent, cela signifie où l'eau le plus et nous pouvons déclencher ce Seigneur plus de fonctionnalités de notre application ici de sorte que lorsque nous sommes au plus bas, le Seigneur plus de fonction se passe automatiquement. C' est donc l'idée derrière tout ça. Alors revenons en arrière et mettons en œuvre la même chose. Donc, allons toe SRC ab composants liste de contact sur le DS correspondant à la même où nous avons déjà la plus basse fonction. Nous devons simplement l'appeler encore et encore en fonction de nos critères. Donc, la première chose est, vous devez accéder au dollar variable global qui est là dans la fenêtre et en faire un local. Vraiment ? Eh bien, définissons juste la fenêtre d'orteil avancée des autres personnes de la qualité R J dollar. Donc c'est un de la même chose. Laisse-moi le donner comme ça. J' avais le dollar. Alors maintenant, je dois aller à l'unité et dire que nous sommes intéressés à écouter l' événement défilement par la fenêtre. Et pour ce faire, nous allons d'abord à votre fenêtre de dollar vers ramper. Donc, fondamentalement, nous sommes de l'industrie dans l'événement scroll sur la fonction de rappel d'approvisionnement, qui est l'événement à déclencher. Chaque centime de votre grattage. Donc ça veut dire que si je gratte la page comme ça, ils ont même tiré à chaque fois. Ce que nous devons faire est maintenant d'avoir l'accès à la hauteur de la fenêtre et gratté, ce qui signifie que chaque fois que je fais défiler comme ça, ils même ce feu et c'est là que nous voulons écrire notre noyau. Et je vais créer quelques variables locales à gauche W égal à la couleur des orteils. Nous savons Onda laisser d égale $2 document et nous venons d'entendre vérifier si la hauteur de point w plus un peu mêlée n'est pas égal orteil n'a pas caché. Ensuite, nous devons juste appeler ce début Seigneur plus. Voir cela sur avis que cette fonction est également liée à l'orteil important. Ici, nous ne cliquerons plus sur le bouton. Eso Vous pouvez réellement valider cette ligne en appuyant sur commande, barre oblique, barre oblique de contrôle enregistrer le fichier sur revenir au navigateur. Donc, si je fais défiler vers le bas, vous voyez qu'il ne les charge pas tous. C' est probablement parce qu'il doit y avoir un éditeur, et l'autre dit que ce début Lord Moore n'est pas une fonction maintenant. C' est typique quand on utilise Jake Worry. Maintenant, il y a une raison à cela. La raison est que nous utilisons une fonction de rappel dans un style de combat ES, pas dans la sixième année. Donc, dans les années cinq style que la clé était Cela ne correspond pas aux variables membres de la classe , mais au lieu de cela, il représente l'objet de fenêtre pendant l'exécution. Donc, pour que ce câble représente l'objet de classe, il suffit de le convertir en fonction adulte. Donc je vais l'enlever de cette fonction, puis sur Adul et sauver ça. Revenons-y. Nous verrons également la qualité de la crête apprendre de plus en plus de contenu. Donc juste pour nous assurer que nous sommes en mesure d'en apprendre plus sur les deux qui pourraient alors il a fonctionné et dans la nuit parlé jusqu'à vous verrez qu'il ya une demande pour le reste. Le point de terminaison a été créé. Mais si je fais défiler ici dès que j'ai fait défiler tout ce que vous devriez voir qu'il va faire une autre requête sur. C' est pour la page. Numéro deux sur la glace Couronne plus et vous verrez qu'il y a une page numéro trois sur la page numéro quatre et ainsi de suite et ainsi de suite. Donc vraiment bien, le Seigneur cela automatiquement, tout comme la façon dont les applications comme Facebook fonctionne. 34. Utiliser SweetAlert pour de belles boîtes de dialogue: dans notre application. Lorsque nous regardons les détails de la personne de contact, nous avons un brevet pour supprimer la sélection sur lequel vous devriez voir qu'il ya une boîte de dialogue de confirmation apparaît, qui est, Êtes-vous sûr ? Maintenant, l'aspect et la sensation des jours dépend des avantages. Er donc si vous allez à un autre navigateur, par exemple, voici un safari, la même page est chargée et quand je clique sur la boîte de dialogue Village qui apparaît est totalement différent de celui que nous voyons en chrome. De même, si je vais à cinq renards et que je clique sur Supprimer, vous verrez que la boîte de dialogue est totalement différente et c'est de l'opéra. Et à l'opéra, les boîtes de dialogue disaient que tu étais différent. Bien sûr que vous pouvez tester dans d'autres frères sur. Je suis sûr que ça va être différent de ce n'est pas une bonne approche parce que nous n'avons pas le contrôle sur le style de ce salaud de renflouement. Parfois, il est important que nous contrôlions ces choses comme par exemple, je veux dire Ari sûr s sont pas sur. Peut-être que je veux avoir les légendes d'un client pour ceux-ci maintenant. Étant donné que tout cela n'est pas possible, nous devons dépendre de certaines boîtes de dialogue tierces parties. Il y a beaucoup de boîtes de dialogue de requête J disponibles, mais celle que je montre ici s'appelle Sweet Alert. Plus sûr Goto Sweet. Autres Voici un joli tas de Taylor avec des icônes animées. C' est le beau titre. Il y a un texto. Nous pouvons également avoir des appartements personnalisés comme Annuler Estimé. Donc, pour commencer avec cela, c'est très simple. Vous dites juste NPM installer alerte douce que la fonction future appelée Swan. Et puis vous avez très tees off options comme nous pouvons dire, Quel est le titre ? Quelle est la prochaine, quel genre d'icône vous voulez. Et si vous voulez voir à quoi ça ressemble, vous pouvez cliquer dessus et voir comment ça va ressembler. Bien sûr, vous pouvez probablement changer de succès. Vous auriez un bouton de réussite. Il y a également une documentation disponible ici en bas de la page. Cela vous donne une personnalisation hors de la scène. Eh bien, je n'irais pas. En effet, à peu près tous les jours de congé de la documentation, nous examinerions certainement certaines des options requises pour nous. Par exemple, quand j'ai pris cela, je veux poser une question au lieu de l'hôte local pour deux coffre-fort double zéro. Je veux dire que vous êtes sur le point de supprimer ce contact. Es-tu sûr ? Peut-être que je peux dire non. Alors je peux dire ici. Oui, sur. Je peux voir ça. Oui, j'en suis sûr. Mais ce n'est pas le bouton par défaut. Et annuler serait le de pour la Grande-Bretagne parce accidentelle. Si vous appuyez sur Ender, il ne devrait pas supprimer cet enregistrement. Donc, pour faire cette école du front de commande a ouvert une nouvelle ville, assurez-vous que l'obtention du répertoire de travail et dira NPM I pour installer doux avert. Donc, une fois l'installation terminée, nous devons dire à notre application qu'il y a un nouveau JavaScript et que cela se fait en allant tot. Angulaire, sombre Chaisson. Nous avons une section de script que nous avons spécifiant qu'il y a un nouveau fichier sous utilisation normale. Alerte douce dissed et vous voyez qu'ils sont de couleur douce dot mindo chase. C' est ce que nous devons préciser. Donc, il est cool ici, trouvé ni soulignement modèles slash ST alerte slash rue dist seul point chasse. Veuillez noter que l'alerte douce dépend généreusement de la requête G et assurez-vous qu'elle est incluse avant la bibliothèque d'alertes de rue elle-même. Alors, sauvegardez ça. Les modifications apportées à Jason angulaire nécessitent que le vendeur soit redémarré. Donc je vais aller au serveur, arrêter ce mot r et a commencé un petit. Quand ça commence, allons à notre maïs où nous avons les coordonnées. Donc SRC ab composants détails de contact. Maintenant, c'est l'endroit où nous faisons une confirmation juste pour tester comment ce monde laisse sortir de la fonction appelée le meilleur cygne. Andi. Nous reviendrons et remplacerons celui-ci par le noyau d'alerte douce. Mais pour le moment regardé celui-ci ici maintenant la houle est une fonction qui est globalement disponible, mais qui est seulement disponible dans le navigateur. Donc en ce moment, parce que nous sommes dans le manuscrit, nous n'avons toujours pas accès à cela depuis la portée de la fenêtre. Donc, pour que nous l'utilisions bien, continuons à déclarer une variable appelée const gonfler la fenêtre d'orteil des gens. Donc, quand il s'agit d'une variable globale ordonnée en raison de l'alerte de rue, cela peut être n'importe quoi parce que c'est une variable locale toe notre modèle. Alors maintenant, je peux utiliser ça ici. Mais commencez avec ça gonflé et dites bonjour. Puisque nous n'avons pas d'orteil bouton, appelez cette fonction. Allons au HTML correspondant d'aujourd'hui, puis appelons les testicules. Eh bien, je vais juste ajouter un bouton un paragraphe traité point important dans Bt et par défaut sur. Alors je vais être votre alerte suite de tests. Nous devons dire que l'événement de clic est égal à la meilleure fonction de houle de l'orteil. Donc, nous revenons à la plus proche Ici, nous avons une alerte juste trop douce avant coup de pied important sur lequel vous devriez voir qu'il ya une belle boîte de dialogue qui arrive. La bonne chose est maintenant c'est le même style qui apparaît même dans d'autres roses. Aussi. Par exemple, si je recharge cette page et que je clique sur l'alerte de la suite maître, vous pouvez voir que la boîte de dialogue est exactement dans le même état que dans Crume afin que nous puissions tester ou dans un autre processus. Aussi, c'est de l'opéra donc vous pouvez voir qu'il est rechargé monsieur. Vous savez, quand je clique sur cette alerte de lecture de tests, exactement la même boîte de dialogue apparaît. Alors sortons de ça. Retourne à notre cour et nous ajouterons plus d'options que la commande et puis je dis : Voici Slab. Je peux spécifier un titre en disant que l'annuaire téléphonique et je peux dire bonjour, mon ami. Et puis je peux préciser que c'est un succès. Sauvez-le maintenant. Quand tu retournes, ça se recharge. Cliquez sur le partenaire de test Street Alert, et vous verrez qu'il y a une icône animée pour le succès. C' est le fatal. C' est l'extra, et il y a un vieux Caperton par défaut. Mais si vous voulez modifier cette pièce et que vous pouvez la modifier si vous le souhaitez, vous pouvez cliquer ailleurs. Toe, sortez-le de ce cadran une boîte aussi, qui est égale et de cancer. Si vous avez une confirmation que beaucoup, revenons au lieu du succès, vous pouvez dire réchauffement. Nos infos sont autres. Ce sont les quatre options qui sont documentées ici. On va à la documentation d'alerte douce. Vous pouvez voir qu'il ya des icônes avertissement, erreur succès dans, car ce sont les quatre possibilités différentes. Donc, puisque j'ai sélectionné Avertissement, vous ne devriez pas voir une icône d'avertissement avec le même titre et le même texte. Alors cliquez sur OK pour sortir de la même chose maintenant. Nous pouvons également spécifier ceux-ci généralement comme cette houle avec l'objet de configuration sur l'objet configuration peut avoir quelque chose comme le titre que je peux dire annuaire téléphonique Uh, je peux spécifier. Je vais dire, par exemple, dans quatre je peux dire votre texte, qui est la deuxième partie, quel que soit le texte donné pour que ce texte puisse être comme vous êtes dans les coordonnées. Sauvez-la. Retournez sur l'application recharges coup de pied sur ce test à alerte douce et nous voyons la boîte de dialogue similaire qui est à venir afin que nous puissions également avoir des boîtes de dialogue de confirmation. Et c'est exactement ce que nous voulons faire en cas de retard. Donc pour le moment, je n'ai plus besoin de ça. Quelqu' un qui l'enlève, sauve le. Retirez ce bouton en particulier bientôt. Cela revient à mon cœur sur C'est là que je veux spécifier ce qu'il faut faire maintenant. Lorsque les urnes de confirmation affichées, nous devrons fardeaux et nous pouvons définir la valeur pour ces boutons particuliers. Par exemple, le premier ne serait peut-être pas la vérité. Deuxième bouton, peut-être tombe ou il peut être 1234 etcetera. Lorsque vous appelez ce dysfonctionnement, il renvoie cette promesse Onda, nous devons appeler cette fonction de contact de suppression. Quand les promesses seront faites, nous n'aurons plus cela. On va dire ici, Suad, sur un objet de configuration et on dit que quand il y a une guerre, on obtient la valeur du bouton. C' est le résultat des qualités sur Puis, en utilisant ce résultat, nous disons que si le résultat est égal à la vérité des orteils, alors nous aimerions faire cette partie. Quelqu' un a coupé ça et coller ici. Donc, fondamentalement, nous avons maintenant la promesse. Lorsque les promesses résultent, nous vérifions quel bouton a été cliqué. C' était le vrai Burton ou le faux bouton ? Si le faux bouton nous ne faisons rien, peut-être que vous pouvez simplement dire que l'enregistrement n'est pas supprimé, mais sinon c'est ce que nous voulons faire. Et la configuration peut maintenant avoir quelque chose comme titre. Nous pouvons dire que vous êtes un vote pour supprimer ce conflit. Suivant sera placé sur à partir de maintenant. Ensuite, je peux dire l'importance, qui est un ari sur le premier bouton, est censé être comme, Oui, je veux supprimer cela. Donc, ce ne sera pas le D Pour seulement le dernier bouton sera la valeur par défaut, donc je peux spécifier le prochain sur le bouton se trouve être comme, Oui, Je suis sûr Andi, Alors si vous restez visible, est vrai . La valeur est également vraie. Donc, c'est celui que nous obtenons en fait comme une valeur de résultat ici une fois que j'obtiens la valeur de résultat en tant que vrai Sarette essayant de supprimer cela. De même, je vais également vous en donner un autre, qui est un récupéré, vous pouvez dire annuler et la vérité visible, ce qui n'est pas nécessaire pour le deuxième bouton, puis la valeur East Falls. Donc, lorsque vous cliquez sur le deuxième bouton, c'est comme si vous étiez cliqué sur le bouton Annuler et le résultat est faux. Par conséquent, cette condition est ignorée et l'enregistrement n'est pas supprimé. boîte de dialogue se ferme de toute façon, alors sauvegardons ceci. Revenez pour Rosa sur il y a un bouton de suppression. Cliquez sur le bouton Supprimer. Ça va dire que vous êtes sur le point de supprimer ce contact, s'il vous plaît. Confirmez S. Je suis sûr annulé. L' annulation supprimera simplement la boîte Della et vous resterez ici. Mais si je clique sur supprimer et dire oui, je suis sûr que l'action réelle qui est la suppression du contact aura lieu. Et après le début, nous ne serons plus dans cet espace, mais il va l'emmener à la liste de contacts sur vous pouvez voir qu'il a été supprimé maintenant. Alors revenons aux orteils. Encore un contact. Quand j'ai dit village, je voudrais peut-être préciser qu'il s'agit d'un avertissement ou d'une erreur. Avertissement serait mieux. Donc, je peux dire ici que, avec l'importance du texte du titre, je peux aussi dire Icône est avertissement sur. Mettez une virgule. Sauvegardez ça. Retourne. Si je clique sur le bouton de suppression maintenant, vous verrez qu'il y a un avertissement. Vous êtes sur le point de supprimer ce Contact police Confirmer ? Oui, j'en suis sûr. Annuler Annuler le village de lecture. Oui. Je suis sûr va supprimer l'enregistrement. 35. Créer et déployer: notre application d'annuaire téléphonique est maintenant prête. Et regardons le dossier que nous avons, donc c'est sur mon bureau. Sur ce est l'application de l'annuaire téléphonique et sur McElroy Zika Press Space Bar. J' obtiens des informations sur le répertoire, et vous pouvez voir qu'il est 302.4 et être avec 10 éléments. Ce dossier particulier se compose de plusieurs fichiers, suggère Jason Files. J' ai des fichiers de script ni des modèles avec des paquets de représentation installés en externe, ce qui occupait le gros morceau de notre espace de travail d'application. Afin d'exécuter cette application, nous ouvrons un front d'homme sur l'espace de travail. Je vais ouvrir un nouveau terminal. Ils ont été la ville l'annuaire téléphonique et ensuite l'ONG. Donc, il y a aussi un message d'avertissement indiquant qu'il s'agit d'un serveur simple utilisé pour les tests. RT. Réserver des applications angulaires localement sur elle ne peut pas être notre ne devrait pas être utilisé dans la production. Il a également généré un tas de fichiers Charles can qui ne sont pas encore physiquement disponibles . Mais si je vais navigateur et ouvrir local qui est prédit d'un zéro appelé la préoccupation du développeur , vous verrez que dans le réseau il ya beaucoup de fichiers qui seraient venus donc Tous ces amis sont maintenant disponibles ici, mais pas physiquement disponibles n'importe où, donc ces fichiers doivent être requis. Lorsque nous poussons cela dans remorquer un serveur de production. En outre, si vous verrez le score source réel HTML, vous verrez qu'il y a une barre oblique déracinée, qui est là aussi dans notre application, donc vous pouvez voir que sous l'index SRC, HTML a approuvé une barre oblique déraciner. Mais entre le déracinement de la barre oblique et le corps de la barre oblique, vous pouvez voir qu'il y a beaucoup d'injection de script qui a eu lieu. Donc, en réalité, nous avons besoin de cet index html sur pas ils ont assiégé Mel ce que nous avons dans notre répertoire d'application . Donc, afin de convertir cette application dans un format qui peut être donné à un serveur de production , nous avons Toe compiler tous nos fichiers PS en remorque. Approprié. HTM et l'enfant était tipsy comme une épice, et ce processus est appelé nous construire. Andi. C' est très simple car angulaire est livré avec ses propres outils de construction. Donc, si un bon du paquet Doc Jason ici, vous pouvez voir qu'il y a une commande appelée Build qui représente n g build onda. Nous pouvons également exécuter la facture d'énergie qui directement Alors allons jeter un coup d'oeil à cela dans l'invite de commande. Alors je vais arrêter. Les développements valent la peine en appuyant sur le contrôle Z, puis tapez n g construire a tenu beaucoup d' options ici. Nous ne les utilisons peut-être pas du tout. La première chose que vous devez regarder est l'utilisation. Il dit n g build, qui est un espace de travail de projet sur, puis les options. Maintenant, si vous omettez le projet, quel espace ? Il va supposer que vous êtes dans les travaux avec lui-même. Il y a peu d'autres options, comme un Woody, qui est appelé compilation à l'avance. Nous en discuterons dans une vidéo séparée. Ensuite, vous avez quelque chose appelé basé A true si l'Ural hors de l'application en cours de construction. Nous allons également jeter un coup d'oeil à ce sujet lorsque nous nous appuierons sur. Si vous rencontrez un problème, comment cela peut nous aider ? Il y a quelques autres options. L' un d'eux est le s corbeille prod. Lorsque true définit la configuration de la facture sur la cible de production, sont les deux seules options que nous pourrions enregistrer pour utiliser Dash es Kort. Et c'est juste le produit qui va essayer ça comme off. Maintenant, si vous voyez qu'il n'y a pas de liste de coin de dossier, lorsque vous terminez le processus de construction, ce dossier est créé automatiquement qui démarre construction énergétique. C' est juste faux là-dessus. Juste une pression de corps entrée, en fonction de la vitesse de la taille de l'ordinateur de l'application. Cela peut prendre un certain temps, donc dans mon cas, cela a pris presque 35 secondes, ce qui est un certain temps. Il y a peu de fichiers que vous pouvez voir point d'exécution Js, qui est des mangeurs de 1,41 kilo-octets, ce qui est seulement de 388 kilo-octets sur. peu près tous sont incubés, et vous pouvez également voir que le bootstrap que nous avons ajouté a été externalisé dans les styles sur un numéro de hachage, dit Garcia. Ainsi, le style, par exemple, est un 136 kilo-octets. Mais si vous voulez comparer cela avec celui que nous avons généré au cours, les développements sont des travaux. Donc, si je fais défiler, vous pouvez voir que les styles Js est que sur un point 09 MB. etcetera de Wender Jay sont 4.0 toe MBI, qui est tout en mégaoctets et entendre tout est en kilo-octets. Si vous voyez également la nouvelle structure du directeur, il y a ce dossier que je peux voir. Qu' est-ce qu'il y a dans ce dossier de test. Il se compose de directeur de l'application de l'annuaire téléphonique. C' est ainsi que le projet de construction d'un répertoire a des fichiers de licence, tous les actifs que nous avions, tels que les images. Ils sont tous gardés ici un D pour Fair Wycombe. Mais on peut changer. n'y a qu'un seul HTML, même si nous en avons créé un. HTM. Et pour chacun des quatre composants, tout est livré dans le remorquage. Chaises de porte principale. Il n'y a pas de fichiers HTML supplémentaires, donc cela est appelé comme un contenu statique de votre application. Donc, lorsque cela est déployé et l'accès par un poseur, alors cette application s'exécute sur le navigateur du client. Donc, il n'y a pas de service, une exigence hors cours. Nous avons toujours notre exigence de point de terminaison de repos. Mais après le déploiement américain, sont les fichiers que nous devons déployer sur un serveur de production pour le déploiement. Il y a beaucoup d'options que nous avons numéro une option serait un CD dans lequel stand pour le réseau de diffusion de contenu . Il y a un hébergement partagé comme celui que j'utilise sur Go Daddy il y a des plates-formes inférieures comme Google Cloud ou Amazon Cloudwatch. Et il y a beaucoup, beaucoup d'options que vous avez pour nous. Concept plus proche. L' un des Syriens que nous pouvons explorer est ce que l'école a cherché notre message. Ceci est un Syrien pour héberger des sites web statiques avec certains sous-domaines ainsi que des mines passées . Si vous allez à la tarification, vous pouvez voir qu'il y a une utilisation gratuite de niveau qui a des options de publication illimitées . Cast sape le SSL de base. Tout ce que vous avez à faire est de commencer à l'utiliser. y a absolument pas de chaînes qui testent. Il y avait aussi 30$ par mois options qui a obtenu des projets illimités, éditeur illimité, domaine personnalisé personnalisé, SSL sur et de nombreuses autres fonctionnalités. Bien sûr, des fins de démonstration, nous allons utiliser cette option gratuite sur la façon dont vous pouvez commencer à travailler avec. C' est très simple. Permettez-moi de démontrer la même chose. La première chose à faire est de remorquer. Installez ceci sur votre ordinateur en utilisant N b. M. installé ce chef tout global sur anti recherche. Donc, j'ai rencontré ce problème lors de l'installation parce que sur Mac, pour installer un paquet global, nous devons exécuter avec les commandes sudo lorsque vous entendez ce pseudo en temps réel et nous avons été affamés Death G, et puis ils recherchent dans le et cette fois il ne devrait pas y avoir de problème et il a été installé avec succès. Et si je prends votre recherche que la santé cachée, il me donnera quelques options que la commande ici orteil mieux qui j'ai aimé en nous. Et si je l'ai aimé, je peux verrouiller. Je peux me connecter à l'arrière. Je peux répertorier tous les projets que j'ai déployés. Je peux limousiner un projet. Je vois aussi quel genre de plan est le mien. Donc, il est très, très simple avis que je n'ai pas encore créé de compte, donc je vais devoir faire est de remorquer Exécuter la commande de recherche, et il va me demander Quel est l'avis e-mail qu'il va se connecter orteil si mon email existe déjà, ou il effacera le nouveau compte de recherche en entrant le nouvel e-mail sur le mot de passe. Donc je suis loué mes emails. Andi, il me demandera, quel est le mot de passe dans le mot de passe ? Il peut s'agir d'un nouveau mot de passe. Si vous êtes un utilisateur pour la première fois a terminé et qu'il vous demandera de regarder l'emplacement du projet. En ce moment, il est de trouver à mon travail directement, qui est sur l'arrêt pour regarder vers le haut. Mais celui que je veux déployer est là dans le meilleur annuaire téléphonique de Et puis j'étais tendre . Ça me dure. Qu' est-ce que c'est ? Oh, mon nom. Ça te donne des noms drôles. Ajouts, comme dans ce cas apporté opérettes. Je ne veux pas de ça. Je vais dire l'annuaire N g 7 sur J'ai appuyé sur Entrée. Dans le cas où ce bien que mon nom N G sept annuaire téléphonique a déjà haricot utilisé par quelqu'un d'autre, il me donnera un autre dicton que vous n'avez pas accès à ce divin particulier. Mais si c'est votre propre esprit et que vous essayez de spécifier mon nom, il écrasera simplement sans demander. Donc soyez prudent avec cela, parce que Ender ressemble à Engy sept waas de répertoire téléphonique disponibles. Et maintenant, il a été publié avec succès remorquer n g sept annuaire téléphonique. Allons à l'Ural et ensuite jeter un oeil à ce que cela ressemble pour que je puisse aller à un navigateur ouvert. Et toi, ce numéro de l'annuaire G 7 dit que tu es une telle presse. Entrez et vous pouvez voir que mon application est maintenant servie à partir d'un serveur Web distant, pas de local atop. Mais il y a un petit problème ici parce que lorsque je vais à une liste de contacts ici, la liste de contacts est la plus adaptée à partir d'un point de terminaison de repos local. Par exemple, Si je vais à la console du développeur et regarde l'onglet Réseau, par exemple, requêtes http kick sur la liste des contacts. Vous verrez qu'il revient avec un pour pas pour mieux afin que vous puissiez jeter un oeil à cela. J' ai eu un message ici. Il dit que la page de contact locale 43 double zéro barre oblique numéro un en cas d'échec. Donc, évidemment, nous devons nous assurer que notre point de repos fonctionne. Donc, je vais retourner à l'avant de la commande, NPM exécuter Jason a servi Ender et puis retourner au navigateur Goto à la maison et revenir à liste des contacts, et maintenant nous pouvons voir notre liste de contacts est disponible. Maintenant, vous devez comprendre angulaire est seulement sur le front, et donc nous sommes en mesure de déployer avec succès l'ami et l'application sur un serveur de production . Cependant, si vous êtes angulaire, l'application dépend de certains meilleurs points de terminaison. Vous devez indiquer une adresse de point de terminaison de repos valide. Pour le moment, nous n'avons pas ceci, mais si vous avez accès à un point de terminaison de repos distant, veuillez le mettre à jour. Donc, dans notre demande, il sera donné dans SRC aux annuaires téléphoniques de service que nous commençons ici. C' est donc l'emplacement que nous devons changer pour accéder à ce point de restaurant à partir d'un point de terminaison. Une autre option de déploiement que nous avons consiste à déployer sur un serveur d'hébergement partagé. Laissez-moi ouvrir mes options de tableau de bord GoDaddy ici. Mes produits ont-ils entendu une options d'hébergement ? Je pense que sur gérer ici j'ai Ah, gestionnaire de fichiers. J' entends un nouveau dossier avec le nom de la cabine N G 7. Si. D' accord. Et que quatre il y a été créé ici, donc j'ai ouvert la même chose. Il n'y a absolument aucun fichier dedans maintenant. Tout ce que j'ai à faire est d'aller orteil le dossier de test annuaire à sélectionner tous ces fichiers Dragon ivre ici. Onda. Une fois qu'il est téléchargé, nous avons maintenant accès toe notre application à partir d'un hébergement partagé afin que je puisse aller orteil afin de faire face slash n g sept ender de l'annuaire téléphonique. Vous pouvez voir qu'il semble y avoir une erreur. Allons jeter un oeil au mieux. Les éditeurs sont tous liés réseau toe. Si vous voyez qu'il y a un éditeur grognant Js Polly Villages. Maintenant, la raison en est l'emplacement de chacun des fichiers générés. Donc, par exemple, si vous déplacez juste le plus sous les taters Reagan, nous savons que le hachage de point principal sombre cool slash numéroté R J s alors qu'il était censé venir de n g sept slash annuaire signifie maintenant que c'est là que la basse le shérif en chef entre en photo. Si je vois la source de la plage ici, vous pouvez voir que là que cette nature appelée basée de égale deux barre oblique qui était censé être slash n g sept slash de l'annuaire téléphonique Cela peut être abordé de deux façons. Maintenant, l'un de la façon va index des orteils html Ici, éditer cette dérive égale barre oblique de l'orteil n g sept slash de l'annuaire téléphonique Enregistrer. Et quand je reviendrai ici pour recharger, vous ne devriez pas voir qu'il n'y a pas de problème avec ça sur. Nous sommes en mesure d'accéder à la liste de contacts ont été en mesure de les afficher ont été en mesure de les modifier sur. Nous serons en mesure de supprimer toutes ces choses que nous sommes en mesure de faire sans aucun problème. La deuxième méthode est dans les options de construction que nous avions vues plus tôt. Il y avait une option appelée shérif de haie basé. Donc, tout en se construisant, nous aurions pu spécifier Dash Dash Basij of Equals deux slash n g sept livres étrangers barre oblique. Donc, c'est à quel point il est facile de construire votre application angulaire et déployé sur orteil soit syrien comme un message de chirurgie ou un hébergement de partage comme Go Daddy. 36. Compilation JIT et AOT: puisque nous développons une application angulaire en utilisant typescript par Non, vous devriez être conscient que angulaire utilise un compilateur pour transformer sur les types. Se faire appeler dans un emploi comme bon ancien qui ferme peut comprendre. Angular est livré avec deux types de compilateurs. L' un est appelé JT sont juste dans le compilateur 10. L' autre est un corps sont en avance sur le temps. Combinez ER, la construction de développement par défaut utilise un compilateur jit. Donc, lorsque nous exécutons NJ Star Command par défaut, le développement, construction est généré. Et donc le compilateur Jit est utilisé pour comprendre la même chose. Allons construire notre application. Il était dans la publicité à Djibouti, qui utilisait auparavant les options de construction de développement. Donc, quand j'ai appuyé sur Entrée, il a généré le calice requis pourrait trouver. L' un des fichiers ici est le RJ rendu, qui comprend le compilateur angulaire hors et le framework angulaire. Nous voyons également une carte bien pour chacun des JavaScript. Cela peut être utilisé pour explorer le contenu d'un JavaScript particulier et de ses dépendances . Pour cela, nous devons installer un outil source Caldas. Map Explorer et installons le même NPM. Je trouve mon explorateur. Maintenant, nous avons une commande appel source map Explorer dans le dossier Slash North Modules Dark bin pour explorer le RJ rendu Let's taper dans la commande sombre slash North modules dot étant Slash source Slash Explorateur Map, suivi par les charges fournisseur qui est là dans le dossier de disque Phonebook à Render Chase. Alors j'appuie sur nous envoyer. Cela ouvre une joie dans le navigateur, explorant divers aspects hors IGs rendus, vous pouvez voir la fille dit que le rendu poursuit 3.8 nb, ou en moyenne plus de 50% de rabais qui est occupé par le cadre angulaire et l'angulaire compilateur. Donc, si nous utilisons cette construction, combattons et exécutons l'application, chaque composant diamant doit être chargé. Le compilateur vient dans l'image, se plaint que l'Inde JavaScript pour la première fois et sert ensuite au Broza. Les exigences suivantes utiliseront les fichiers Get Charles générés. Maintenant, nous pouvons explorer ce qui se passe lorsque vous utilisez le démarrage de production en arrêtant cette application et en reconstruisant notre application à l'aide de l'option large tiret. Donc, je peux dire Engy Build Broad, qui inclut le compilateur Woody A. Il y a deux choses que vous pouvez observer. Le premier est qu'il n'y a pas de fichiers de carte générés, avec les combats JavaScript et c'est simple. Nous pouvons ajouter un autre flak ou pointillé notre carte source. Mais surtout, il n'y a pas de RJ rendu lui-même. Et c'est de la famille, parce que la majeure partie de la poursuite des fournisseurs était le framework dans le compilateur lui-même, qui ne sont plus là sur. Donc, il est combiné avec les églises principales où il se trouve afin que nous puissions explorer le point principal Js sur. Nous pouvons également générer les torches de fenêtre explicitement en ajoutant un autre vol. Alors émettons la commande N g sera. C' est juste un problème. bord. Tellement intelligent. Et c'est juste quand le morceau pas d'autre Window GS, qui est seulement 349 kilo-octets par rapport à 3,8 nb de la partie précédente. Nous allons donc explorer le même jour Slash foncé ni modules, source de slash sombre. Mon explorateur porte slash liste slash répertoire ab slash ami ordre Js Et maintenant vous pouvez voir qu'il n'y a pas de compilateur ainsi que le cadre angulaire ont été inclus dans celui-ci. C' était le précédent qui occupait 3.8 et être plus de 50% est le framework dans le compilateur et il n'y a pas de compilateur ici, ce qui signifie que toute notre cour de saisie est convertie en JavaScript pendant le processus de construction lui-même. Donc, s'il y a des erreurs, telles que des erreurs de liaison de modèle, elles seront signalées lors de la construction elle-même. Mais comme dans le développement de Washington, la compilation arrive temps Darren. Donc, à moins qu'il n'y ait un éditeur pendant le temps, il ne sera pas signalé du tout. Comprenons la même chose en commettant une erreur d'ébullition de modèle explicitement et voyons si l' autre est signalé au mauvais moment ou au moment du constructeur. Alors, je vais au noyau. Je vais à l'un des composants. Allons à l'autre composant de contact dans les DIA. C' est clair qu'une fonction nous a appelés. Obtenir détective retourne exactement une chaîne sur un nouveau contact et appelons cette fonction dans notre HTML en utilisant un double live comme il obtenir titré juste pour nous assurer que nous avons un modèle de planification autre, donnons délibérément get Titre de soulignement en tant que fonction appelée Save This. Revenons à l'invite de commande. Arrêtez l'explorateur de carte source et utilisez la commande dans l'âme, qui utilise par défaut la facture de développement. Quand j'ai appuyé sur Entrée, vous pouvez voir qu'il n'y avait pas d'autre et il a dit, compilé avec succès. Il a gagné l'autre modèle de liaison ensemble. Alors allons au navigateur. Andi, ouvrez l'hôte local 47 0 et vous pouvez voir que l'application est en cours d'exécution avec succès. Je devrais pouvoir aller à d'autres composants, mais quand je vais à notre nouveau contact, vous verrez qu'il n'y a pas de titre et c'est principalement parce que maintenant que le composant de contact art est chargé, le compilateur Jit tente de compiler que les visages, une liaison de modèle mieux. Et cet autre est rapporté sur la console disant Get underscore Title n'est pas une fonction, donc il n'y a pas d'erreur pendant le processus de construction, mais en même temps, nous avons une erreur. Maintenant, regardons ce qui se passe avec une option Woody. Laisse-moi fermer. Cette fois, je reviens à la commande. Demander la confiance contrôle il pour arrêter cela, effacer le type de cri le Commandement Engy servi avec un drapeau sur un corps qui est inclus. Si vous faites un produit de tirets de construction Engy et c'est ender, vous devriez voir qu'il n'y a pas mieux d'indiquer une liaison de modèle, et vous pouvez voir que la facture a échoué et je ne peux pas ouvrir une nouvelle attaque, locale d'abord pour un double zéro parce que les bâtiments complets ont échoué à ce stade, et juste pour s'assurer que cela est fait avec succès. S' il n'y a pas de modification, enregistrez-le. Retourne la commande. Contrôle rapide, Voir pour arrêter cela valent la peine sur le même venir. Et de plus cette fois, nous n'avons aucune sorte d'exaltation de combat, d'autres à cause de laquelle nos bâtiments réussis sur l'application peuvent être ouverts sans aucun problème aussi. 37. Conclu: règlement sur la fin de ce cours. Ce cours se termine ici pour l'apprentissage continue. J' espère que vous avez bénéficié des scores et que vous apprécierez l'apprentissage. Angulaire. Même si j'ai aimé créer ce cours, je vous remercie sincèrement d'avoir produit le discours et je vous souhaite plein succès dans votre avenir. Si vous avez des doutes en dehors de mes conférences ou démonstrations, n'hésitez pas à revenir. Vos commentaires m'ont aidé à utiliser mes futurs cours. Encore une fois. Merci et je vous souhaite tout le meilleur.