Episode 10 : Rajouter une barre de navigation 🏁

Episode 10 : Dans l’épisode précédent, nous avons vu comment mettre en pratique l’architecture Smart & Dumb pour le composant de notre page d’accueil. Cependant, nous avons un problème. Nous voulons mettre en place une barre de navigation sur l’ensemble de nos pages, et pas seulement sur la page d’accueil. Comment mettre en place ce composant « cross-page » pour notre barre de navigation ?

Nous savons comment découper nos pages en composants, de manière cohérente, grâce à l’architecture « Smart & Dumb » que nous avons vu à l’épisode 8. Nous allons maintenant mettre en place le composant de la barre de navigation. Il faudra qu’elle soit disponible sur toutes les pages de notre application, et pas seulement sur la page d’accueil. C’est ce que nous allons voir dans ce dernier épisode. Et oui, déjà !

Lire la suite → Episode 10 : Rajouter une barre de navigation 🏁

Episode 9 : Créer une page d’accueil 👐

Episode 9 : Dans l’épisode précédent, nous avons vu théoriquement comment organiser les nombreux composants qui constitueront notre application, grâce à l’architecture en composant Smart & Dumb. Maintenant, il nous reste « juste » à passer à la pratique, en mettant en application ces beaux principes théoriques. Par quoi commencer ? Quel composant créer en premier ? Comment les imbriquer entre eux ?

Nous savons théoriquement à quoi ressemble une architecture en composants « intelligents » et « stupides », mais nous ne l’avons jamais encore mis en place pour de vrai. Nous allons commencer par découper notre page d’accueil en différents composants, puis nous les générerons avec Angular CLI. Enfin, nous les assemblerons tous ensemble afin d’afficher une magnifique page d’accueil à nos futurs utilisateurs.

Lire la suite → Episode 9 : Créer une page d’accueil 👐

Episode 8 : Organiser l’arborescence des composants 🎶

Episode 8 : Dans l’épisode précédent, nous avons ajouté des classes TypeScript ayant pour rôle de modéliser les entités métiers de notre application. Nous avons donc assez d’éléments pour mettre en place nos premiers composants. Cependant dans une « vraie » application, il y a beaucoup, beaucoup de composants différents qui interagissent entre eux. Comment organiser l’ensemble des composants de son projet ? Comment est-il recommandé de découper ses composants ? Combien faut-il en créer ?

Nous avons mis en place tout le socle nécessaire à notre projet, et nous allons pouvoir commencer à ajouter nos premiers composants. Mais comme notre application fera une certaine taille, nous savons déjà que nous aurons de nombreux composants à gérer. Nous allons donc voir comment organiser l’arborescence de tous ces nouveaux composants. Pour cela, je vais vous présenter une des architectures les plus populaires, c’est l’architecture en composants Smart et Dumb.

Lire la suite → Episode 8 : Organiser l’arborescence des composants 🎶

Episode 7 : Modéliser ses entités métiers avec TypeScript 🌟

Episode 7 : Nous avons mis en place le style globale de notre application dans l’épisode précédent, et nous allons attaquer la partie plus métier de nos développements. En effet, dans notre application, nous ne voulons pas travailler avec de simple JSON venant du backend, nous voulons travailler avec des entités métiers : des utilisateurs, des tâches, etc. Nous pourrons également profiter de la puissance de TypeScript pour typer fortement nos méthodes et propriétés. Mais comment mettre en place des classes TypeScript capables de modéliser nos entités métiers, également appelées modèles ?

Nous avons déjà ajouté tous les éléments de style dont nous aurons besoin. Maintenant, nous allons attaquer les développements plus métier de notre application, en ajoutant des classes TypeScript capables de modéliser nos entités métiers : un Utilisateur, une Tâche, etc. Ces entités métiers sont également appelées des modèles.

Lire la suite → Episode 7 : Modéliser ses entités métiers avec TypeScript 🌟

Episode 6 : Embellir avec des icônes 🌷

Episode 6 : Nous avons mis en place le style global de notre application dans l’épisode précédent, grâce à la célèbre librairie Bootstrap. Cependant, cette librairie ne fournit pas d’icônes par défaut. Il s’agit de petits indicateurs très utiles pour l’utilisateur, lui permettant d’indiquer la page d’accueil avec une petite icône de maison, ou encore une roue indentée pour indiquer la page des paramètres. Mais comment ajouter ces icônes dans notre projet généré avec Angular CLI ?

Nous avons déjà ajouté la librairie Bootstrap à notre application, afin de définir un style global simplement pour notre interface. Maintenant, il nous reste encore à affiner tout cela, en ajoutant quelques indicateurs visuels .

Lire la suite → Episode 6 : Embellir avec des icônes 🌷