Angular

4 min readJul 1, 2018

Définition

Angular est un framework MVC / MVVM côté client, développé en JavaScript, par Google libre et open-source qui permet d’améliorer, au même titre que JQUERY, la syntaxe de javascript ainsi que la productivité du développeur. Angular en basé sur la logique MVC. (modèle vue controller). Crée en 2009 par Google ce framewok est devenu incontournable pour les applications web.

Modèle MVC

Le modèle MVC décrit une manière d’architecturer une application informatique en la décomposant en trois sous-parties :

La partie Modèle: La couche Model représente la partie de l’application qui exécute la logique métier. Cela signifie qu’elle est responsable de récupérer les données, de les convertir selon des concepts chargés de sens pour votre application, tels que le traitement, la validation, l’association et beaucoup d’autres tâches concernant la manipulation des données.
La partie Vue: La Vue retourne une présentation des données venant du model. Etant séparée par les Objets Model, elle est responsable de l’utilisation des informations dont elle dispose pour produire une interface de présentation de votre application. Par exemple, de la même manière que la couche Model retourne un ensemble de données, la Vue utilise ces données pour fournir une page HTML les contenant.
La partie Contrôleur: La couche Controller gère les requêtes des utilisateurs. Elle est responsable de retourner une réponse avec l’aide mutuelle des couches Model et Vue.

Versions

Juin 2012: Angular v1
Septembre 2016: Angular v2
Mars 2017: Angular v4

Utilité d’Angular

AngularJS vous permet de mieux organiser votre code Javascript, en vue de créer des sites web dynamiques (bien qu’à la base, AngularJS n’avait pas été pensé pour du contenu dynamique). Basé du côté client, il vous permet de créer de l’HTML interactif. A part la librairie d’AngularJS, il n’est pas nécessaire de créer du Javascript.

L’une des principales raisons d’utiliser AngularJS c’est de pouvoir construire un projet en gardant à l’esprit les tests. L’approche test est l’une des notions les plus importantes puisqu’il permet de conserver un code maintenable, compréhensible et sans bug. Une bonne suite de tests peut aider à trouver les problèmes avant que votre projet ne soit en production. Cela rendra votre logiciel plus fiable, peut être plus amusant et cela vous aidera à dormir sur vos deux oreilles la nuit. AngularJS s’annonce indispensable pour les projets ambitieux puisqu’il vous propose une organisation très bien conçu de base. Alors bien évidemment on parle de projet un peu plus complexe qu’un simple site web, comme celui-ci par exemple qui demande que très peu de connaissance en javascript/jquery. On utilise AngularJS plus des web applications bien entendu.

Concepts

À la différence de jQuery, AngularJS est un véritable framework, il “impose” donc une certaine structure dans le code. C’est un framework MVC (Model View Controlleur) et aussi parfois appelé un framework MVW (Model View Wathever), votre logique doit être englobée dans des contrôleurs et des directives.

L’application: Une application est une collection de contrôleurs et de directives. L’attribut ng-app permet de spécifier quelle partie de la page HTML AngularJS doit gérer.

HTML
<!DOCTYPE html>
<html ng-app="tuto">
     <head>
     </head>
     <body>

     </body>
</html>JAVA SCRIPT
var app = angular.module('tuto', []);

Le contrôleur: Le contrôleur va permettre d’écrire son code et sa logique et il est relié à une partie du DOM, et tous les contrôleurs sont reliés à une application.

HTML
<div ng-controller="MainController">

</div>JAVA SCRIPT
app.controller('MainController',[]){}

Le Scope: Le scope est le modèle de l’application. Il va contenir les variables et les fonctions qui peuvent être utilisées. L’objet $scope est automatiquement fourni au contrôleur via le mécanisme d’injection de dépendances utilisé par AngularJS.

HTML
<div ng-controller="MainController">
    {{username}}
</div>JAVA SCRIPT
app.controller('MainController',['$scope', function($scope){
    $scope.username = "Toto";
}]);

Data-binding

Le data-binding est l’une des fortes particularités d’AngularJS. Elle permet la synchronisation entre le modèle et la vue. La vue est donc le reflet en temps réel du modèle. Quand le modèle change, la vue reflète le changement et vice et versa.

On parle de MVVM chez AngularJS, car l’ensemble des actions touchant le contrôleur est séparé des actions effectuées par le modèle et la vue. Celui-ci devient dès lors parfaitement testable unitairement. Etant donné que la vue est une simple projection du modèle, lorsque vous développerez un site à l’aide de ce Framework, vous vous focaliserez essentiellement sur ces deux aspects.

Avantages

AngularJS est un framework, ce qui signifie qu’il met à disposition un grand nombre d’options et de fonctionnalités natives
AngularJS permet d’utiliser un certain nombre d’options directement, ce qui permet de démarrer plus rapidement un projet sans être intimidé par les choix à faire au démarrage. Cette standardisation permet d’ailleurs de changer de développeur très facilement puisque les projets reposent sur des composants embarqués et de fait standards, facilitant également le travail d’équipe.
La conception de AngularJS 2 respecte les standards des Web Components. En quelques mots, les composants que vous construirez en AngularJS 2 devraient être beaucoup plus facile à convertir en composants purs que ceux produits en ReactJS. Le support des navigateurs reste limité, mais cela pourrait être un accélérateur à long terme lors de vos migrations par exemple.
Le TypeScript permet une meilleure organisation du code avec les interfaces, le typage et les annotations
Un getting started proposant une introduction simple à AngularJS2

Inconvénients

Une documentation pas encore complète
Le TypeScript peut être déstabilisant et rend le framework plus complexe à appréhender
Beaucoup de concept à comprendre avant d’être efficace