AngularJS
Single Page Applications
Emmanuel DEMEY
Consultant & Formateur Web
Zenika Lille
@EmmanuelDemey
Web / Domotique
Présentation Générale
- Développé par Google
- Versions:
- 1.2.x (stable) support à partir de IE8
- 1.3.x / 1.4.x (stable) support à partir de IE9
- 1.5.0 (release candidate) support à partir de IE9
- 2.0 (beta) support à partir de IE9
- Site : https://angularjs.org
- Code : https://github.com/angular/angular.js
- Documentation
- API : https://docs.angularjs.org/api
- Blog : http://blog.angularjs.org
Présentation Générale
- AngularJS est un framework "full stack" : il intègre l'ensemble des composants nécessaires à la réalisation d'applications riches
- Routage par URL
- Contrôleurs Javascript
- Templates HTML
- Directives (composants personnalisés)
- Gestion des ressources REST
- IOC
- Tests unitaires et de bout en bout
- ...
Points Forts
- JavaScrit Pur
- Framework Complet
- Testabilité
- Binding Automatique
- Bonne Documentation
- Énorme Communauté
- Architecture
Points Faibles
- Routage
- Internationnalisation
- Certaines API un peu complexe
- Problèmes de performance possible
- Navigateurs supportés (pas IE8)
- Angular 2
Controller
Fonction Javascript contenant les données et la logique d'affichage
<div ng-controller='MainCtrl'>
{{ hello }}
<button ng-click="addToBasket()">
Add To Basket
</button>
</div>
app.controller('MainCtrl', function($scope){
$scope.hello = 'Hello World';
$scope.addToBasket = function(){
alert('clicked')
}
});Service
Un service représente un ensemble cohérent de fonctionnalités
app.controller('MainCtrl',
function($scope, BtwinService){
$scope.hello = 'Hello World';
$scope.addToBasket = function(){
BtwinService.addToBasket();
}
});
app.service('BtwinService', function($http){
this.addToBasket = function(){
return $http.post('/api/basket'):
}
});Directive
Élément pour surcharger les templates de votre application
<button ng-click="addToBasket()">
Add To Basket
</button>Directive
Plus de 50 directives dans le framework :
- Gestion des évènements
- ngStyle / ngClass
- Validateurs
- ngRepeat / ngIf / ngShow
- Gestion des formulaires
Directive
app.directive('productItem', function(){
return {
scope: {
'product': '='
},
template: '<article>' +
'<h2>{{product.name}}</h2>' +
'<button ng-click="addToBasket()">Add To Basket</button>'
'</article',
controller: function($scope){
$scope.addToBasket = function(){
...
}
}
}
});<product-item product="{name: 'bike'}"></product>Filter
Élément permettant de formatter une donnée directement depuis le template
{{ variable | filter }}
<ul ng-controller="SampleCtrl">
<li ng-repeat="product in products | filter:'sold' | orderBy:'name' | limitTo:5 ">
{{product}}
</li>
</ul>app.controller('SampleCtrl', function($scope){
$scope.products = [
{ name: 'bike', tags: ['sold'] },
{ name: 'shoes', tags: [] },
{ name: 'tshirt', tags: [] },
{ name: 'jacket', tags: ['sold'] },
{ name: 'jersey', tags: ['sold'] },
];
});Filter
//{{ value | case:true }}
app.filter('case', function(){
return function(value, upper){
if(upper) return value.toUpperCase();
return value.toLowerCase();
}
});Module
Groupement logique de services, contrôleurs, directives et filtres
var app = angular.module('app', ['btwin'])
app.controller('MainCtrl',
function($scope, BtwinService){
$scope.hello = 'Hello World';
$scope.addToBasket = function(){
BtwinService.addToBasket();
}
});var btwin = angular.module('btwin', []);
btwin.service('BtwinService', function($http){
this.addToBasket = function(){
return $http.post('/api/basket'):
}
});
Démo
Autres technos...
Des questions ?