Apprendre Angular en tant que développeur React

En tant que développeur front-end, on vous demande toujours si vous êtes spécialisé dans React ou Angular. Ces deux technologies courantes ont leurs forces et leurs faiblesses, et chacune est plus appropriée en fonction du projet, mais dans cet article, nous n’en discuterons pas. Je travaille actuellement chez Apiumhub, et j’ai récemment commencé à travailler dans Angular. Ceci est une feuille de triche rapide pour démarrer dans Angular en tant que développeur React.

Création d’un composant en angulaire

Imaginons que nous voulons créer un CustomButton composant. Lorsque nous créons ce composant dans React, il peut ressembler à ceci :

//imports

export const CustomButton = () => {
  const onClick= () => {}

  return (
<button    
        onClick={onClick}
            className=”button-class”>
         Click me
      </button>
  )
};

Où nous avons le nom du composant, son balisage et la logique qu’il peut gérer dans un JSX ou TSX si nous utilisons un fichier d’extension dactylographié.

Dans Angular, pour créer le même composant, nous pouvons utiliser la commande suivante :

ng generate component custom-button

La commande ci-dessus créera un dossier avec trois fichiers à l’intérieur : ustom-button.component.html, custom-button.component.scsset custom-button.component.ts. Comment Angular gère-t-il ces trois fichiers pour les utiliser comme un seul composant ? La configuration de ce composant se trouve dans le .component.ts dossier. Il a les @Component décorateur qui indique à Angular comment traiter et instancier le composant et où trouver chaque couche d’informations. Ce serait le même exemple qu’avant dans Angular :

//custom-button.component.html

<button
    class="button-class"
    (click)="onClick()">
    Click me
  </button>

 

//custom-button.component.ts
//imports 

@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  onClick = () => {}
}

Comme vous pouvez le constater, ils se ressemblent beaucoup, mais il existe des différences de syntaxe notables dues au fait que React utilise JSX et Angular utilise HTML pour le balisage :

Dans Angular, les classes sont définies par la classe d’attributs.
Les composants angulaires sont visibles dans l’inspecteur du navigateur. Dans cet exemple, nous verrions quelque chose de similaire à ceci :

<custom-button class=”button-class”><button>Click me</button><custom-button>

Notez que Angular crée une couche supplémentaire dans le balisage qui représente le composant lui-même. Dans React, vous verriez le bouton directement.

Ajouter des attributs à un composant

Dans React, nous utilisons des accessoires pour rendre les composants personnalisables et dynamiques. Par exemple, nous pourrions transmettre le property text=“Click me” pour rendre le bouton plus générique :

export const CustomButton = ({text}) => {
  const onClick= () => {}

  return (
<button ...>
         {text}
      </button>
  )
};

En Angular, nous devons utiliser le décorateur @Input() dans notre fichier .ts et initialisez-le :

@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  @Input() text = ‘’ //Note that it is mandatory to initialise it either here or in the class constructor
  onClick = () => {}
}

Et utilisez les doubles accolades dans le HTML :

<button
    class="button-class"
    (click)="onClick()">
    {{ text }}
  </button>

Appel d’une fonction de composant parent

Lors de l’utilisation d’un composant purement UI, nous pouvons souhaiter transmettre une fonction du composant parent au composant enfant. Dans React, cela ressemblerait à ceci dans le composant enfant :

export const CustomButton = ({onClick}) => {
  handleClick = () => {
      //some internal logic
    onClick();//function passed from the parent component
  }

  return (
<button    
        onClick={handleClick}
            className=”button-class”>
         Click me
      </button>
  )
};

Dans Angular, nous utiliserions le @Output() décorateur:

@Component({
  selector: 'custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
  @Output() onClick: new EventEmitter<any>();

  handleClick = () => {
    //some logic
    this.onClick.emit()//here we can also pass the event or other data that we want to receive in the parent component
  }
}

Créer un NgModule

Nous savons maintenant un peu comment créer un composant Angular, mais où se situe-t-il dans l’écosystème d’Angular ? Lorsque nous créons un composant dans Angular, il doit être déclaré dans un NgModule. Un NgModule est un bloc de code qui a sa propre configuration, son routage et ses dépendances spécifiés avec le @NgModule décorateur, qui peut être chargé par la route. Cela peut sembler un peu délicat au début lorsque vous venez de React, mais voyons-le avec un exemple. Lorsque nous démarrons un projet Angular, il est livré avec un module appelé app.module.ts qui contient les bases :

// imports

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

C’est le NgModule le plus basique :

Le tableau de déclarations indique les composants de présentation qu’il inclura, par exemple si nous chargeons notre bouton personnalisé dans ce module, nous l’inclurons ici.
Importations : modules nécessaires pour charger le module actuel. En interne, Angular ajoute la liste des fournisseurs de services des modules à l’injecteur racine de l’application. Dans ce cas, le BrowserModule dispose de services spécifiques au navigateur tels que le rendu DOM, le nettoyage et la localisation.
Fournisseurs : Liste des dépendances de service dont dispose le module actuel. Cela peut être un service qui charge des données ou un service qui gère l’authentification par exemple.
Exportations : ne s’affiche pas ici, mais il s’agit d’un tableau dans lequel vous pouvez exporter des composants du module actuel pour pouvoir les utiliser dans d’autres modules.
Bootstrap : le composant racine dans lequel Angular s’insérera index.html.

Pourquoi avons-nous besoin de ces modules ?

Les applications sont toujours divisées en blocs fonctionnels pour la maintenabilité. Dans React, cette division appartient aux développeurs et il n’y a pas de convention spécifique à suivre ; cependant, dans Angular, le code peut être divisé en NgModules. La @NgModule décorateur spécifie la configuration de ces parties de code, qui inclut ses dépendances externes, comment ses dépendances internes doivent être injectées et comment il doit être compilé. Cela crée des blocs de code cohérents avec leurs propres composants d’interface utilisateur et routage.

Tous les modules ne seront pas des composants de présentation à afficher par voie. Un exemple de module intégré de composant non présentationnel est le RouterModule, qui est un module très utilisé proposé par Angular pour définir les itinéraires existants et les composants qu’ils doivent charger. Il vous permet de savoir si la page en cours correspond à un itinéraire spécifique (RouterActiveLink) ou si une URL nécessite une condition pour être accessible (CanActivate).

L’équipe Angular travaille également sur la simplification de cette configuration pour éventuellement supprimer le besoin d’un NgModule et faire cette configuration par route, nous en discuterons dans la section suivante.

Nouvelles API pour réduire le besoin de NgModules

Pour améliorer l’arborescence et réduire la complexité, Angular travaille à la création de nouvelles API où :

L’injection de dépendances serait gérée directement avec les fournisseurs et les tableaux de fournisseurs. Au lieu de configurer le routeur angulaire via RouterModule.forRoot(routes, config) dans le NgModule, il pourrait être configuré dans le routeur.
L’amorçage – qui est actuellement configuré dans le NgModule – serait géré par un nouveau bootstrapApplication fonction.
importProvidersFrom permettrait la compatibilité avec les anciens NgModules.
Le chargement paresseux des composants serait possible non seulement pour les NgModules, mais aussi par des composants individuels et des routes enfants.
Les dépendances de chaque route pourraient être spécifiées individuellement plutôt que par module.

Prochaines étapes

Angular étant un framework, il offre beaucoup plus de fonctionnalités que React, comme la gestion des formulaires, le routage, la gestion des requêtes, etc., ce qui serait très intéressant à explorer ensuite si vous souhaitez en savoir plus sur Angular .

En tant que développeur React, apprendre Angular m’a donné la perspective de comprendre comment chaque technologie aborde un problème spécifique et le résout, et cela aide également à mieux comprendre les fondements de Javascript.