Page 2 sur 7

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 🌷

Episode 5 : Intégrer Bootstrap avec Angular 🌻

Episode 5 : L’architecture modulaire que nous avons mis en place précédemment est prête à encaisser nos futurs développement. Il nous reste encore un peu de socle à mettre en place, avant de se lancer dans les développements plus tard. Il faut ajouter un peu de style dans notre application. Mais quelle librairie choisir, et comment l’intégrer dans notre projet généré avec Angular CLI ?

Nous avons déjà ajouté la structure modulaire de notre application qui est en place. Maintenant, il nous reste encore à intégrer un certains nombre d’éléments indispensable dans toute application, à savoir le style. Nous allons voir comment choisir et intégrer une librairie de design dans notre application.

Lire la suite → Episode 5 : Intégrer Bootstrap avec Angular 🌻