Lorsqu’on suit certaines astuces sur stackoverflow, ou bien sur certains sites, ils oublient bien souvent de nous indiquer sur quelle version d’Angular ils proposent la solution. Un site pour apprendre à migrer d’une version à l’autre Angular (et donc Google) a pensé à nous ! Ils ont mis en place un site d’aide à la
Maintenant que l’on a une application qui fonctionne bien, si si, elle fonctionne bien, et en plus, elle est sexy, nous allons passer à la vitesse supérieure. Et oui, actuellement, nous avons utilisé un tableau sensé représenter tous les clones qui viennent de la base de l’étoile noire. C’est super, mais en vrai, on
Nous avons une approche où nous avons deux pages : une page qui liste, une page qui affiche. Or, nous pouvons aussi appeler un composant dans un autre. Allons-y profitons de cette puissance dans Angular, et vive le DRY ! S’inspirer du premier composant Initialement, nous avons un composant qui est appelé dans la page
Maintenant que tout parait être mis en place (en fait, il manque encore beaucoup de choses pour notre application de gestion des clones), on va organiser notre code.Avoir plusieurs modules, répartis en fonction des grandes fonctionnalités va aider notre code à être organisé. C’est parti voyons ensemble comment organiser mieux notre code ! Tout d’abord,
Nous souhaitons mettre en place un site avec plusieurs pages. En effet, il nous faut pouvoir consulter chaque clone, pour avoir le détail de leur état de santé, de leur fatigue, … Or, actuellement, nous n’avons qu’une seule page : celle qui liste les clones. Comment réussir à naviguer d’une page à l’autre ? Comment
Comment s’attacher à des composants HTML de la page et interagir avec eux ? C’est grâce aux directives que vous allez pouvoir le faire dans Angular. Chaque directive a un sélecteur css (enfin comme si c’était un sélecteur css). Trois types de directive : Les composants (Component) Les directives d’attribut Les directives structurelles (comme
Nous sommes en train de mettre en place une application Angular pour gérer la guerre des Clones. Après avoir vu les composants, le templateUrl, nous passons à l’interaction avec l’utilisateur. Gérer le clic sur un bouton Pour gérer le clic sur un bouton, rendez-vous dans la Vue définie via l’url du TemplateUrl. Ajouter un
Ca y est, notre composant est créé, et nous avons initialisé (grâce au ngOnInit) la liste des Clones pour notre application de la guerre des Clones. Attaquons-nous maintenant à la mise en place du contenu HTML pour le composant en cours. Pour rappel un Component = une classe Component + une Vue (un template).
Maintenant que tout est prêt, nous allons passés à la mise en place de notre premier Component et notre premier Module. Ok, mais c’est quoi un Component ? Un composant est rassemblé autour d’un Module : par exemple, on aura le module d’authentification, le module autour des Padawan, et tous les composants sont des blocs
Nous allons commencer sans Visual Studio pour ce premier projet Angular. Nous verrons dans de prochains articles comment le faire avec Visual Studio. Avant tout, configurons le tout. Pour suivre le projet, voici le projet github, en cours de développement. 1. Création du package.json > scripts “build” : tsc => compilateur Type Script. –p pour
| Cookie | Durée | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |