3 bonnes pratiques d'Angular CLI

En lisant cet articles vous apprendrez 3 bonnes pratiques lorsqu'on utilise Angular CLI pour rendre votre code à la fois lisible et performant.

Commencer à développer des applications n'est jamais simple. Il faut réussir à organiser son code de façon à ce que ce soit agréable à la relecture, que d'autres développeurs qui vont potentiellement toucher à votre code, comprennent quelles fonctionnalités vous avez développé sans avoir besoin d'y passer 3 heures et que le tout soit performant.

Qu'est ce qu'Angular

Note: Je me base sur mon expérience personnelle en Angular 5 tout particulièrement pour rédiger cet article. Si vous n'avez pas lu le guide officiel: le Guide de Style Angulaire officiel , je vous suggère de le faire avant car il peut répondre à certaine de vos questions dont je ne répondrait pas dans cet article.

• C’est un framework front-end côté client;

• Il est utilisé pour créer des applications webs très puissantes;

• Angular est souvent considéré comme une sorte de langage HTML dynamique;

• Il a été créé et est toujours maintenu par Google.

Voyons pourquoi vous devriez l'utiliser :

• Il permet un développement plus rapide, étant un framework.

• Écrire du contenu dynamique directement à l’intérieur du HTML.

• Test Unitaires disponible et prêt à l’emploi.

Il est aussi utile de savoir , qu'Angular est créé pour être principalement utilisé avec TypeScript (bien que vous puissiez l'utiliser avec JavaScript simple mais je vous conseille quand même d'utiliser le langage pour quoi il a été créé), si vous voulez absolument coder en Javascript, ne vous inquiétez pas il y a un langage qui appelé AngularJS qui, comme son nom l'indique n'utilise pas du TypeScript mais du Javascript. Savez-vous pourquoi le TypeScript porte ce nom? Parce qu'il y a évidemment une raison a l'appelation du TYPEScript. Vous pouvez et devez ajouter des types à vos données.

1. Organisation des dossiers et des fichiers

Jetons maintenant un oeil à nos noms de fichiers et nos classes pour pouvoir organiser nos dossiers.

Nommage des fichiers

Quand vous crééez vos fichiers, vous devriez faire attention à vos nom de fichiers. En effet, les noms de vos fichiers doivent être cohérents avec le même modèle dans lequel nous mentionnons d'abord la fonction du fichier, puis le type, séparé par un point.

Par exemple channel.component.ts ou channel.component.html ou encore channel.service.ts …

Si vous voulez ajouter plus de description à nos noms de fichiers, nous devrions utiliser (-) pour séparer les mots: channel-list.component.ts

Nommage des classes

Quand vous ajoutez des noms à vos classes, vous devriez utiliser le style d'écriture "upper camel case" avec comme suffixe le type de votre fichier comme ci-dessous:

export class ChannelService

export class ChannelModule

Structure de vos fichiers

Vos fichiers doivent impérativement être stockés dans des dossiers nommées par l'entité qu'ils représentent comme ci-dessous:

2.Organisation du module

Les modules sont une les caractéristiques principales d'Angular.

Multi-modules dans l'application

Il est évident qu'une application développée avec Angular fonctionne très bien si nous ne créons qu'un seul module, cependant, il est tout de même chaudement recommandé de diviser notre application en plusieurs modules. Cela présente des avantages non-négligeable: Structure du projet mieux organisée, plus facile à maintenir dans le futur, lisible et réutilisable.

Module de routage

La meilleure pratique pour l'application Angular consiste à utiliser un module de routage séparé pour le routeur. Me direz vous : "Tu es très gentille mais à quoi sert un module de routage?". Justement, j'allais y venir! Un module de routage est un service qui présente une vue d'un composant particulier pour une Url donnée.. Cela ne fais pas parti @angular/core mais dans @angular/router. De toute façon vous finirez bien par l'apprendre en pratiquant angular. Je vous montre un exemple de Route ci-dessous:

const appRoutes: Route[] = [

{ path: 'home', component: HomeComponent },

{ path: '404', component: NotFoundComponent }]

@NgModule({ imports: [ CommonModule, RouterModule.forRoot(appRoutes) ],

exports: [RouterModule]})

export class ChannelRoutingModule { }

Et ensuite pour enregistrer ce nouveau module de routage dans notre module d'application:

import { ChannelRoutingModule } from './app-routing.module';

imports: [ ChannelRoutingModule ]

3. Composants

A présent expliquons comment structurer les fichiers dans ou les composants..

Création d'un nouveau module en ligne de commande:

ng generate new component channel-list

Séparation de fichiers de composants

Lors de la création de nos composants, il est fortement conseillé de séparer le typescript, l'html et le style dans des fichiers séparés.En plus de cela lors de la création d'un composant ces fichiers sont créés automatiquement (en plus du fichier spec.ts qui sert essentiellement pour les tests, si vous n'en avez pas l'utilité, vous pouvez le supprimer). Même si nous avons la possibilité de tout conserver dans le fichier des composants, ce n'est pas une bonne idée.

Voici le parfait exemple de ce qui ne faut PAS faire:

@Component({ selector: 'app-home', template: ` <div class="col-md-12"> <p class="homeText">{{homeText}}</p\> </div>`, styles: [` .homeText{ font-size: 35px; color: red; text-align: center; position: relative; top:30px; text-shadow: 2px 2px 2px gray;} `]})

Au lieu de cela, nous devrions séparer les styles et HTML dans leurs propres fichiers et les importer:

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']})