Durée : 10 minutes.

Angular est un framework développé par les équipes de Google, qui est sorti officiellement en Septembre 2016. Je vous propose un petit tour d’horizon pour voir ensemble de quoi il s’agit exactement.

Le commencement : AngularJS != Angular

La première chose que vous devez savoir est que AngularJS désigne la version 1.x du framework, et que à partir de la version 2, la nomination officiel du framework est Angular. Ce changement subtil dans le choix des noms a une importance capitale : AngularJS et Angular sont deux outils complétement différents.

Vous vous demandez donc pourquoi les équipes de Google n’ont pas simplement mis à jour AngularJS, plutôt que de développer un nouvel outil avec un nom quasi-identique à l’ancien. Et bien la réponse est : “place au neuf”.

Voici une liste des changements les plus importants entre les deux outils :

  • Le $scope et le système d’héritage associé a été simplifié, et il n’y a plus besoin d’injecter les scopes dans les contrôleurs.
  • La dépendance à jQLite a été retirée, tout simplement. On gagne en performance pour le coup !
  • Les contrôleurs et l’architecture MVC font maintenant place à une d’architecture dite réactive, à base d’un nouvel éléments du web : les composants web ou WebComponents. Nous verrons ce que c’est.
  • L’utilisation de ES6 et de TypeScript remplace beaucoup d’implémentations d’AngularJS devenues inutiles et contre-performante.
  • Par exemple, les modules ES6 sont venus remplacés les modules propres à AngularJS.

En résumé, les équipes de Google ont considéré, à juste titre il me semble, que les standards du web ont évolués et que AngularJS n’était plus adapté, et adaptable.

La philosophie de Angular

Ce framework est orienté composants web à 100%. Si vous ne savez pas exactement ce que c’est, j’en parle rapidement dans mon article suivant. Imaginez qu’il s’agit d’une petit brique de l’application, autonome, complétement indépendante du reste de l’application.

Vous me direz que c’est du vu et revu : la modularité, c’est ça les composants web ? Non, rassurez-vous. Les composants web reposent sur un standard du web très sérieux, sur lequel je ferai une série d’article dédié, d’ailleurs.

Ce standard est assez récent dans le monde du web, et il n’est pas encore supporté par tout les navigateurs, d’où la nécessité d’utiliser des poly-fills dans Angular actuellement. Ce standard permet d’appréhender une page web comme un assemblage de composants web indépendants, mais capable de communiquer entre eux. Par exemple, la barre de navigation ou une pop-up d’information peuvent être considérés comme deux composants web distincts.

Pour terminer, retenez ceci : Angular est le premier à mettre les bouchés doubles là-dessus, à 100%.

La brique élémentaire : Le Module

Un module permet de réunir au même endroit le code de toutes les éléments qui correspondent à la même fonctionnalité. Il existe des modules disponibles de base (Angular n’est rien d’autre qu’un assemblage de différents modules), et des modules que vous ajoutez vous-même au cours de vos développements.

Les modules peuvent avoir des dépendances entre eux, et vous aurez souvent besoin d’utiliser des modules disponibles de base pour vos propres modules. Pour importez un module, voici ce que vous aurez besoin d’écrire :

import { classeDuModule } from ’./chemin/dossier’;

Les modules vous servirons à encapsuler vos composants de manière claire et structurée.

Le petit frère du module : Le Composant

Les composants Angular sont similaires aux classes en Java, vous allez en développer tout le temps, et pour tout : traitement des formulaires, gestion des interactions utilisateurs, appels de services… Chaque composant a pour fonction de controller un petit bout de votre interface utilisateur. Par exemple, la barre de navigation de votre site, une boîte de discussion instantanée…

Chaque composant est donc composé d’une classe JavaScript (la logique du composant) et d’une vue, nommé template (l’apparence du composant pour l’utilisateur).

Par exemple, un composant UserProfilComponent pourrai avoir comme rôle de récupérer les données d’un l’utilisateur et de les afficher proprement dans son navigateur. Le tout serai encapsuler dans un seul composant.

Le Template

Le template est donc la partie “vue” du composant. Chaque composant a le droit à son petit template. 🙂

Une template est une forme spéciale de HTML qui dit à Angular comment afficher les données de votre composant. On avait déjà vu ça dans AngularJS avec les directives ng-repeat, ng-if, ng-bind

Pour des composants simplistes, le template peut aussi simplement contenir du HTML “basique”, mais ce sera rarement le cas, à moins que vous n’ayez un composant qui ne s’occupe que d’une partie vitrine dans votre application.

Les Annotations

Les annotations, aussi appelées méta-données, indiquent à Angular le rôle d’une classe JavaScript dans votre application. En effet, comment allez vous dire à Angular que cette classe est la classe d’un composant, et pas la classe d’un service par exemple ? Et bien grâce aux annotations !

Dans le cas d’un composant, qui est le cas le plus fréquent lorsqu’on développe, vous devrez utilisez l’annotation @component pour indiquer à Angular que telle classe est un composant :

@Component({
  selector: 'mon-composant',
  template: 'Ici le template de mon composant

'
})
export class AppComponent {
  // Cette classe est vide car le composant n'a pas de logique propre
}

Vous devez renseigner le template lui-même, ou alors un lien vers le fichier HTML qui contient votre template. (Cela permet d’ailleurs un meilleur découpage de votre code)

Le sélecteur est un identifiant unique à renseigner. Il indique à Angular de créer et d’insérer une instance de ce composant à chaque fois qu’il trouve une balise <mon-composant></mon-composant> dans le code HTML de votre application.

Vous venez de créez une balise HTML parfaitement valide, qui contient un composant web ! Vous pourrez essayer de passer le HTML d’une app au validateur W3C, votre code est parfaitement valide !

Alors ? Impressionnant, non ? 😛

tumblr_oc7tmwG69z1vayxj5o1_500

Conclusion

Je vous ai présenté un aperçu très rapide du monde Angular, et de ses principales différences avec AngularJS.  Il y a bien sûr beaucoup d’autres éléments qui peuvent constituer une application Angular, mais cela vous permet déjà d’avoir un aperçu du fonctionnement de base. Nous irons bien-sûr plus loin dans les futus articles de ce blog ! 😎

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s