Angular

Comment apprendre rapidement Angular en 8 étapes?

Nous nous retrouvons pour parler des 8 piliers d’Angular. Ceci vous aideront à apprendre Angular tranquillement et rapidement.

Nous allons commencer tout d’abord par Angular CLI qui est pour moi la base de la rapidité sur Angular.

Apprendre Angular avec Angular CLI

Angular CLI est un outil fourni pour le framework Angular. Je ne vais pas rentrer dans le détails d’Angular CLI pour le moment.

Il est import de savoir qu’Angular CLI sert à :

  • Initialiser un projet
  • Développer rapidement des composants, services ,…
  • Maintenir facilement un projet par le linter et les tests unitaires

Je vous rappelle qu’un linter est un outils permettant de faire de la review de code automatique. Les tests unitaires quant à eux permettent de tester votre application et d’assurer son maintien dans le temps.

Vous l’aurez compris Angular CLI est un indispensable.

Pour aller plus loin : https://cli.angular.io/

Visual studio code

Je vous conseille d’utiliser Visual studio code en tant qu’IDE pour développer vos projets en Angular. Un IDE est un environnement de développement, un éditeur de texte amélioré.

Visual studio code en quelques points :

  • Léger et rapide
  • Propose beaucoup de plugins
  • Le plus utilisé

Pour aller plus loin : https://code.visualstudio.com/

Les themes / le design

Nous allons nous intéresser aux differents design qu’il est possible d’appliquer rapidement.

NgBootstrap

Vous connaissez surement Bootstrap. Bootstrap est un framework CSS utiliser dans de nombreux projets et simplifiant la vie de nombreux développeurs.

Vous pouvez avoir un aperçu : https://getbootstrap.com/

A noter qu’il existe une version Angular de Bootstrap appelé ngBootstrap : https://ng-bootstrap.github.io/#/home. Il fournit des composants Angular prêt à l’emploi.

Apprendre Angular Material

Tout comme Bootstrap, Material est un framework CSS qui a été designé par Google : https://material.io/design/.

Google a également créé les composants en Angular permettant d’utiliser le framework CSS Material facilement : https://material.angular.io/.

NgPrime

Il est tout à fait possible que pour des composants un peu plus compliqués que des simples boutons, vous ne trouviez pas votre bonheur dans Angular Material ou dans NgBootstrap.

Si c’est le cas vous pouvez aller chercher du côté de ngPrime qui fournit des composants poussés comme un treeview : https://primefaces.org/primeng/#/.

Ionic et NativeScript

Ionic et NativeScript permettent de faire des applications mobiles à partir du framework Angular.

Pour en savoir plus sur NativeScript : https://www.nativescript.org/nativescript-is-how-you-build-native-mobile-apps-with-angular

Pour en savoir plus sur Ionic : https://ionicframework.com/docs/installation/cli

TypeScript

Le TypeScript est vraiment essentiel à connaître pour bien développer avec le framework Angular. J’y consacre des articles entiers à son sujet.

Webpack

Webpack permet de créer des bundles dans ton projet Angular. Il va prendre tous tes fichiers (.ts, .js, .sass, .css, .less, …etc) et va les minifier et les mettre dans deux trois fichiers .js et un fichier .css.

Pour en savoir plus : https://webpack.js.org/

Jasmine/Karma

Jasmine et Karma sont vos meilleurs amis pour écrire des tests unitaires dans votre projet Angular. Je vous conseille fortement de les utiliser

Pour en savoir plus sur Jasmine : https://jasmine.github.io/

Pour en savoir plus sur Karma : https://karma-runner.github.io/latest/index.html

Compodoc

Compodoc est un outil permettant de générer automatiquement une documentation (super bien faites) à partir de commentaire que vous écrivez en JavaScript. Un outil très pratique surtout si comme moi vous détester écrire dans la doc.

Pour en savoir plus : https://compodoc.app/

Conclusion

Cet article touche à sa fin :). J’espère avoir un peu demystifier  l’incomprehension entre ces deux notions.

Partagez l’article si vous l’avez aimé! A la prochaine.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *