Développer avec AngularJS
Présentation du framework AngularJS et des bonnes pratiques associées
Installation de l’environnement
01-node-v4.4.2-x64
===== Bibliothèques =====
==== Node ====
Fonctionne avec des streams
==== Gulp ====
Doc: https://github.com/gulpjs/gulp/blob/master/docs/API.md
==== Bower ====
Gestionnaire de package front avec gestion des dépendances
==== Yeoman ====
Generateur de trucs
==== HotTowel ====
Generateur de machin pour visual studio
Guide des Bonnes Pratiques de John Papa
https://github.com/johnpapa/angular-styleguide
==== Npm ====
--save => sauvegarde dans les dépendances
--save-dev => sauvegarde dans les dépendances de v
-g => niveau global
===== Création du projet et installation des dépendances =====
Se positionner dans le répertoire ou l’on souhaite créer la solution et saisir la commande ;
Npm init
Dependencies vs Dev Dependies tout est dans le titre
Puis installer les dependances globales
npm -g install bower gulp-cli
Installer les modules complémentaires pour installer le serveur de développement léger
npm install --save-dev gulp gulp-connect
A la racine créer un répertoire app dans lequel on va créer un fichier html qui sera la racine de notre site :
<code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formation AngularJS</title>
</head>
<body>
<h1>My new genial app</h1>
</body>
</html>
</code>
Creer ensuite a la racine du projet un fichier de définition gulp pour paramétrer le service de fourniture de fichiers html statiques :
<code>
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('serve', function () {
connect.server({
root: 'app',
livereload: true
});
});
</code>
Il est ensuite possible de lancer le serveur gulp dans cmd avec la commande
> gulp serve
on peut ensuite consulter le resultat sur http://localhost:8080
Installation de AngularJS
> bower init
Creer un fichier test.bowerrc, l'ouvrir avec notepad puis l'enregistrer sous .bowerrc avec le contenu suivant a la racine du projet :
{
"directory": "app/vendor"
}
Installer GIT via https://git-scm.com/download/win
relancer la commande windows suite au rafraichissement du PATH
et taper la commande suivante :
> bower install angularjs --save
Créer un fichier app.js a la racine de l'application :
<code>
(function() {
'use strict';
angular
.module('Circular', [])
.run(checkIfBootstrapped);
function checkIfBootstrapped() {
console.log('App Bootstrapped !');
}
}) ();
</code>
Inclure les composants dans la page html mise à jour :
Secouer, aller sur la page, faire F12 pour afficher la console et constater qu'on est géniaux.
===== Concepts Angular JS =====
==== Controleur ====
Fonction js qui contient les données et la logique d'affichhagee relative a un scope
==== Service ====
: ensemble cohérent de fonctionnalités fx, metier ou techniques.; service instanciés lors du premier appel, et l'injecteur ne fournira qu'une seule instance. Les services natifs angularjs sont prefixes par un $ (bonne pratique).
==== Directive ====
permettent de constuire des fragments réexploitables, d'isoler les opérations effectuées sur le dom de la logique
==== Filtre ====
Composant permettant d'appliquer des transformations de données de maniree declarative (fomattage monétaire, de date...). Injection possible. Chainage possible.
==== Module ====
Regroupements logique d'éléments
==== Template ====
: portion de cod ehtml compilée par angular
==== Scope ====
: represente le omdele attaché à un élément DOM. Contexte d'executino des expressions. Scopes organisés de facon hiérarchique ngApp est l'élément racine. Scope est l'intermediaure etntre le controle et lavue
==== Expressions ====
: pseudo code js evalues dans un contexte (scope) et placées dans un element de bindin {{expression}}
==== Routeur ====
le module ngRoute permet en fonction de la requete envoyée au navigateur de changer la vue courante
cette vue courante est affichée dans le gabarit de la page à l'aide de la directive ngView et sera dynamiquement remplacée par le contenu déduit de la résolution de la requete
c'est le service natif $route qui sera chargé de cette résolution. Le service observe $location.url()
2 mode du service de location
Hashbang mode #
HTML5
Installer ngRoute
bower install angular-route --save
Puis dans le html ajouter le script :
<script src="vendor/angular-route/angular-route.js"></script>
Puis dans app.js ajouter le boostrapping du module en tant que dépendance :
.module('Circular', ['ngRoute'])
Configurer ngRoute
grace au service provider $routeProvider, declarer de nouvelles routes dans la table de routage. L'ajout de règle se fait via la méthode when. Otherwise c'est le routing par défault.
Configurer les routes dans app.js
sur le module angular ajouter
.config(configureRoutes)
qui appelle la fonction
function configureRoutes($routeProvider) {
$routeProvider
.when('/router/:param1/:param2', {
templateUrl: 'chapters/router/router.html'
})
.otherwise('/router/test/1');
}
Ajouter une page de contenu router.html au bon endroit
Ajouter la balise ng-view dans une div de index.html
Evenements : descendants ou ascendants. utile lors du changement de route par exemple (routechangestartup, routechangesuccess...)
Le routing peut se faire également via le module ui-router, plus complet et plus complexe.
Ajout d'un Controller
Declarer le controlleur dans app.js
.controller('BindingExampleController', bindingExampleController);
Definir le controlleur
function bindingExampleController() {
console.log('Controller wad called !');
}
Brancher une route sur le chose et associer un controlleur
.when('/first-steps/binding', {
controller: 'BindingExampleController',
controllerAs : 'bindExCtl',
templateUrl : 'chapters/firstSteps/controllerExample.html'
})
Le controller est défini , aliasé et templatisé.
Binding
Il suffit de passer le scope global au controleur et d'utiliser une expression pour lire.
On passe $scope au controlleur :
<code>
function bindingExampleController($scope) {
console.log('Controller wad called !');
$scope.userName = 'Mickey Mouse';
console.log('User is ' + $scope.userName);
}
</code>
Puis dans le template html on lit en accedant à l'aide d'une expression double accolade:
<div>Welcome {{userName}}</div>
On peut utiliser ngCLoak pour cloacker les bindings en attente de rendering.
Utilisation de $sce pour afficher du html
<code>
function bindingExampleController($scope, $sce) {
console.log('Controller wad called !');
$scope.userName = 'Mickey Mouse';
$scope.userNameLover = 'Minnie Mouse';
$scope.htmlText = '<strong>Dingo you\'re a genius</strong>';
$scope.trustedHtml = $sce.trustAsHtml($scope.htmlText);
console.log('Controller says user is ' + $scope.userName);
}
</code>
Modele
<code>
<p>
<strong>Test du two way je crois</strong>
<span ng-init="myFavoriteColor = 'blue'"></span>
</p>
<p>
<input ng-model="myFavoriteFruit" placeholder="my Favorite Color"></span>
</p>
<pre>{{ [myFavoriteColor, myFavoriteFruit] |json }}</pre>
</code>
One Time Binding
desactive le listener une fois que le modele est devenu différent de undefined
Liste avec FIltering
<p>Selected model is {{bindExCtl.selectedModel}}</p>
<p>Filter list to : <input ng-model="modelFilter" placeholder="Filter query"></p>
<ul><li ng-repeat="name in allUsers | filter:modelFilter"><a href="" ng-click="bindExCtl.selectedModel = name">{{name}}</a></li></ul>
ATTENTION AUX PROBLEMATIQUES DE SCOPE QUI DESCENDENT MAIS NE REMONTENT PAS SI ON SAIT PAS ASPPELLER SA MERE AKA CONTROLLERAS
=== Evènements ===
broadcast / emit / on
Pour s'abonner :
// registering an event, and as i'm clean i get a ref to unsubscribedHanlder
$rootScope.unsubscribedHanlder = $rootScope.$on('$routeChangeSuccess', function(event, current) { // see doc for information on fx arguments
if(angular.isDefined(current.$$route) && angular.isDefined(current.$$route.controller)) { //used to avoid otherwise case
$log.log('Loading controller ' + current.$$route.controller);
}
});
Pour nettoyer :
unsubscribedHanlder();
http://jsonplaceholder.typicode.com/
Installation de l’environnement
01-node-v4.4.2-x64
===== Bibliothèques =====
==== Node ====
Fonctionne avec des streams
==== Gulp ====
Doc: https://github.com/gulpjs/gulp/blob/master/docs/API.md
==== Bower ====
Gestionnaire de package front avec gestion des dépendances
==== Yeoman ====
Generateur de trucs
==== HotTowel ====
Generateur de machin pour visual studio
Guide des Bonnes Pratiques de John Papa
https://github.com/johnpapa/angular-styleguide
==== Npm ====
--save => sauvegarde dans les dépendances
--save-dev => sauvegarde dans les dépendances de v
-g => niveau global
===== Création du projet et installation des dépendances =====
Se positionner dans le répertoire ou l’on souhaite créer la solution et saisir la commande ;
Npm init
Dependencies vs Dev Dependies tout est dans le titre
Puis installer les dependances globales
npm -g install bower gulp-cli
Installer les modules complémentaires pour installer le serveur de développement léger
npm install --save-dev gulp gulp-connect
A la racine créer un répertoire app dans lequel on va créer un fichier html qui sera la racine de notre site :
<code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formation AngularJS</title>
</head>
<body>
<h1>My new genial app</h1>
</body>
</html>
</code>
Creer ensuite a la racine du projet un fichier de définition gulp pour paramétrer le service de fourniture de fichiers html statiques :
<code>
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('serve', function () {
connect.server({
root: 'app',
livereload: true
});
});
</code>
Il est ensuite possible de lancer le serveur gulp dans cmd avec la commande
> gulp serve
on peut ensuite consulter le resultat sur http://localhost:8080
Installation de AngularJS
> bower init
Creer un fichier test.bowerrc, l'ouvrir avec notepad puis l'enregistrer sous .bowerrc avec le contenu suivant a la racine du projet :
{
"directory": "app/vendor"
}
Installer GIT via https://git-scm.com/download/win
relancer la commande windows suite au rafraichissement du PATH
et taper la commande suivante :
> bower install angularjs --save
Créer un fichier app.js a la racine de l'application :
<code>
(function() {
'use strict';
angular
.module('Circular', [])
.run(checkIfBootstrapped);
function checkIfBootstrapped() {
console.log('App Bootstrapped !');
}
}) ();
</code>
Inclure les composants dans la page html mise à jour :
Secouer, aller sur la page, faire F12 pour afficher la console et constater qu'on est géniaux.
===== Concepts Angular JS =====
==== Controleur ====
Fonction js qui contient les données et la logique d'affichhagee relative a un scope
==== Service ====
: ensemble cohérent de fonctionnalités fx, metier ou techniques.; service instanciés lors du premier appel, et l'injecteur ne fournira qu'une seule instance. Les services natifs angularjs sont prefixes par un $ (bonne pratique).
==== Directive ====
permettent de constuire des fragments réexploitables, d'isoler les opérations effectuées sur le dom de la logique
==== Filtre ====
Composant permettant d'appliquer des transformations de données de maniree declarative (fomattage monétaire, de date...). Injection possible. Chainage possible.
==== Module ====
Regroupements logique d'éléments
==== Template ====
: portion de cod ehtml compilée par angular
==== Scope ====
: represente le omdele attaché à un élément DOM. Contexte d'executino des expressions. Scopes organisés de facon hiérarchique ngApp est l'élément racine. Scope est l'intermediaure etntre le controle et lavue
==== Expressions ====
: pseudo code js evalues dans un contexte (scope) et placées dans un element de bindin {{expression}}
==== Routeur ====
le module ngRoute permet en fonction de la requete envoyée au navigateur de changer la vue courante
cette vue courante est affichée dans le gabarit de la page à l'aide de la directive ngView et sera dynamiquement remplacée par le contenu déduit de la résolution de la requete
c'est le service natif $route qui sera chargé de cette résolution. Le service observe $location.url()
2 mode du service de location
Hashbang mode #
HTML5
Installer ngRoute
bower install angular-route --save
Puis dans le html ajouter le script :
<script src="vendor/angular-route/angular-route.js"></script>
Puis dans app.js ajouter le boostrapping du module en tant que dépendance :
.module('Circular', ['ngRoute'])
Configurer ngRoute
grace au service provider $routeProvider, declarer de nouvelles routes dans la table de routage. L'ajout de règle se fait via la méthode when. Otherwise c'est le routing par défault.
Configurer les routes dans app.js
sur le module angular ajouter
.config(configureRoutes)
qui appelle la fonction
function configureRoutes($routeProvider) {
$routeProvider
.when('/router/:param1/:param2', {
templateUrl: 'chapters/router/router.html'
})
.otherwise('/router/test/1');
}
Ajouter une page de contenu router.html au bon endroit
Ajouter la balise ng-view dans une div de index.html
Evenements : descendants ou ascendants. utile lors du changement de route par exemple (routechangestartup, routechangesuccess...)
Le routing peut se faire également via le module ui-router, plus complet et plus complexe.
Ajout d'un Controller
Declarer le controlleur dans app.js
.controller('BindingExampleController', bindingExampleController);
Definir le controlleur
function bindingExampleController() {
console.log('Controller wad called !');
}
Brancher une route sur le chose et associer un controlleur
.when('/first-steps/binding', {
controller: 'BindingExampleController',
controllerAs : 'bindExCtl',
templateUrl : 'chapters/firstSteps/controllerExample.html'
})
Le controller est défini , aliasé et templatisé.
Binding
Il suffit de passer le scope global au controleur et d'utiliser une expression pour lire.
On passe $scope au controlleur :
<code>
function bindingExampleController($scope) {
console.log('Controller wad called !');
$scope.userName = 'Mickey Mouse';
console.log('User is ' + $scope.userName);
}
</code>
Puis dans le template html on lit en accedant à l'aide d'une expression double accolade:
<div>Welcome {{userName}}</div>
On peut utiliser ngCLoak pour cloacker les bindings en attente de rendering.
Utilisation de $sce pour afficher du html
<code>
function bindingExampleController($scope, $sce) {
console.log('Controller wad called !');
$scope.userName = 'Mickey Mouse';
$scope.userNameLover = 'Minnie Mouse';
$scope.htmlText = '<strong>Dingo you\'re a genius</strong>';
$scope.trustedHtml = $sce.trustAsHtml($scope.htmlText);
console.log('Controller says user is ' + $scope.userName);
}
</code>
Modele
<code>
<p>
<strong>Test du two way je crois</strong>
<span ng-init="myFavoriteColor = 'blue'"></span>
</p>
<p>
<input ng-model="myFavoriteFruit" placeholder="my Favorite Color"></span>
</p>
<pre>{{ [myFavoriteColor, myFavoriteFruit] |json }}</pre>
</code>
One Time Binding
desactive le listener une fois que le modele est devenu différent de undefined
Liste avec FIltering
<p>Selected model is {{bindExCtl.selectedModel}}</p>
<p>Filter list to : <input ng-model="modelFilter" placeholder="Filter query"></p>
<ul><li ng-repeat="name in allUsers | filter:modelFilter"><a href="" ng-click="bindExCtl.selectedModel = name">{{name}}</a></li></ul>
ATTENTION AUX PROBLEMATIQUES DE SCOPE QUI DESCENDENT MAIS NE REMONTENT PAS SI ON SAIT PAS ASPPELLER SA MERE AKA CONTROLLERAS
=== Evènements ===
broadcast / emit / on
Pour s'abonner :
// registering an event, and as i'm clean i get a ref to unsubscribedHanlder
$rootScope.unsubscribedHanlder = $rootScope.$on('$routeChangeSuccess', function(event, current) { // see doc for information on fx arguments
if(angular.isDefined(current.$$route) && angular.isDefined(current.$$route.controller)) { //used to avoid otherwise case
$log.log('Loading controller ' + current.$$route.controller);
}
});
Pour nettoyer :
unsubscribedHanlder();
http://jsonplaceholder.typicode.com/
Commentaires
Enregistrer un commentaire