ANGULARJS

OU LE FABULEUX VOYAGES DANS LE MONDE DU NG-QUELQUECHOSE

PRÉSENTATION DU FRAMEWORK ANGULARJS

AngularJS est donc un framework developpé par Google qui se veut Model-View-Whatever ou,
pour simplifier, qui suit classiquement la logique MVC afin de séparer
la logique de présentation de la logique métier et de son état.

Ce que nous permet AngularJs

  • Routage par URL (deep-linking)
  • Controleur javascript
  • Template html
  • Directives (composants personnalisés)
  • Gestion des ressources REST
  • IOC (Injection de dépendance)
  • Test unitaires
  • Test E2E

La courbe d’apprentissage d’AngularJS est très bien représentée sur cette illustration trouvée sur Internet.

feelings_about_angularjs_over_time

VERSION / SUPPORT

  • 1.2.x - support à partir de IE8
  • 1.3.x / 1.4.x - support à partir de IE8
  • 1.5.x - support à partir de IE9
  • 2 - support à partir de IE9

INTÉGRATION DE LA LIBRAIRIE ANGULARJS

Nous utiliserons npm

npm install angular --save 
# ( --save pour enregistrer dans le package.json ) 
# ensuite ajouter la balise < script > à index.html: 
# <script src="/node_modules/angular/angular.js"></script>

BOOTSTRAPPER UNE APP AVEC ANGULAR

Une fois angular importé, il faut l’activer dans la page. Nous avons plusieurs cas possible d’utilisation d’angular.

Localement pour rendre dynamique un fragment de page, composants etc…

<div ng-app="myapp">...</div>

Globalement pour créer une single-page app

<html ng-app="myapp">...</html> 

AngularJS : en quelques mots

LES LIBRAIRIES INCONTOURNABLES

UI-Router
Angular-Bootstrap
Restangular
Toastr
SmartTable
UI-Select (select2)

MODÈLE, VUES ET CONTRÔLEURS

Le modèles
Les vues : templates
Les vues : expression
Les vues : directives
Les vues : filtres
Les contrôleurs : fonctionnement
Les contrôleurs : le $scope

LES DIRECTIVES

Directive API Design
trackBy avec la directive ngRepeat
Communication entre directives
Transclusion
Component design
Directive API Design
templateCache

LES SERVICES ANGULAR

Les services natifs
Les values et contants
Factory, Service et Provider
Le service « $http »
Le service « $resource »
L’API de promise

TESTS UNIT

Installation
Configuration
Karma
Jasmine
Mocks
Stubs