À travers un retour d'éxpérience, je vous propose de découvrir les outils, les nouveautés d'Angular 1.5 et quelques tips & tricks qui vous aideront dans la réussite de votre projet Angular.

1. Comment réussir son
projet en Angular 1.5 ?
Maxime BERNARD
Lead Dev @ WeStud.io

2. Qui suis-je ?

3. Lead Dev

4. Disclaimer

5. Disclaimer
Interactivité Subjectivité

6. Prérequis ?

7. Contexte

8. Contexte
Meetings & Events
by ClubMed
www.meetings-events-clubmed.fr
Angular 1.3
Projet NB
[confidentiel]
Angular 1.5.5

9. Part I
Les outils

10. Part I
Les outils
Avant de démarrer le
développement, il faut des
bons outils
=> Gain de temps
=> Réduire les taches
fastidieuses et/ou
répétitives
=> Facilité

11. Quels outils utilisez-vous ?

12. Pour démarrer votre projet, il existe un outil
bien pratique appelé...

13. Outils
Yeoman
-> Générateur de projet
(outil de scaffolding)
- Structure des fichiers
- Scripts de compilation
- Minification des feuilles de
styles
et tellement plus encore...

14. Exemple

15. Scaffolding

16. Outils
Yeoman
-> Des centaines de
générateurs différents
disponibles
-> Mon préféré: gulp-angular

17. Et c’est quoi tous ces fichiers créés par le
générateur ?

18. Scaffolding

19. À quoi sert le fichier `package.json` ?

20. Outils
NPM
-> Le Package Manager de
Javascript
-> Gère vos outils (et
leur version &
dépendances)
-> `npm install -g yo`
-> Fichier de
configuration par projet:
package.json

21. Pourquoi c’est bien ?

22. Outils
NPM
-> C’est facile
-> S’occupe des versions
et des dépendances
-> Le package.json permet
d’avoir les mêmes outils
et mêmes versions quelque
soit la machine

23. Scaffolding

24. À quoi sert le fichier `bower.json` ?

25. Outils
Bower
-> Le Package Manager de
...

26. Euh… C’est pas déjà NPM ça ?

28. Outils
Bower
-> Package Manager du Web
- Pas propre à Javascript
- Pas le même job
- Fichier de configuration
bower.json

29. Outils
Bower
Installer jQuery
Avant:
- Aller jquery.com
- Télécharger la dernière
version de jQuery.js
- Déplacer le fichier
dans votre projet
- Et pareil pour mettre à
jour

30. Outils
Bower
Installer jQuery
Grace à Bower:
- `bower install jquery`
(`--save`)
- Et pour mettre à jour…
`bower update`

31. Quelle est la différence avec NPM ?

32. NPM
-> gère vos dépendances
“outils”
ex:
`npm install yo`
`npm install bower`
-> gère vos dépendances
“applicatives”
ex:
`bower install angular`
`bower install jquery`
`bower install bootstrap`
Bower

33. Scaffolding

34. À quoi sert le fichier `gulpfile.js` ?

35. Outils
Gulp
-> “Automatiseur de tâches”
(Concurrent de Grunt)
- Asynchrone
- StreamBased

36. Outils
Gulp - serve
Besoin de compiler vos
fichiers et les servir en
local ?
=> `gulp serve`
Par défaut, BrowserSync
activé par défaut (gulp-
angular).

37. Outils
Gulp - dépendances
Gulp gère les dépendances
`gulp serve`
`gulp build`

38. Exemple
gulp.task('html', function (done) {
// Compiler vos templates
});
gulp.task('styles', function (done) {
// Compiler vos CSS
});
gulp.task('build', ['html', 'styles'], function(done) {
// Ce que vous voulez faire en plus (facultatif)
});
gulp.task('serve', ['build']);

39. Comment faites-vous vos sprites ?

40. Outils
Gulp - spritesmith
gulp.spritesmith
-> Dans un dossier `foo`,
./foo/bar.png
./foo/baz.png
=> sprite.css & sprite.png
- gère le @2x
- génère lui-même vos classes .bar
& .baz
=> `gulp sprite`

41. gulp-bower
=> `gulp bower`
- lit vos dépendances
dans le bower.json
- les injecte
automatiquement dans
votre application
Outils
Gulp <3 Bower

42. Outils
Gulp
Des centaines de plugins
Gulp sont déjà disponibles
D’autres exemples ?
- `gulp deploy`
- `gulp test`
- `gulp watch`

43. T’en as encore combien des outils… ?

44. Outils
conclusion
- NPM & Bower sont des
“must-have”
- Pour Gulp
=> Utilisez les outils
qui vous servent

45. Part II
AngularJS 1.5

46. Nouveautés AngularJS 1.5 ?

47. AngularJS 1.5
Quelles sont les
nouveautés ?
- Components
- Amélioration des
Classes ES6
- Plein de petites
améliorations sympas
=> Plus d’infos sur:
http://angularjs.blogspot.fr/2016/02/angular-
150-ennoblement-facilitation.html

48. Qui connait déjà les Components ?

49. Components
Qu’est-ce que c’est ?
C’est comme une directive…
mais en plus simple et
moins puissant.

50. Rien ne vaut un petit exemple :)

51. Avant
(Directives)
Après
(Components)
.directive('counter', function counter()
{
return {
restrict: 'E',
scope: {},
bindToController: {
count: '='
},
controller: function () {
function increment() {
this.count++;
}
this.increment = increment;
}
};
});
.component('counter', {
bindings: {
count: '='
},
controller: function () {
function increment() {
this.count++;
}
this.increment = increment;
}
});

52. Euh… C’est tout ?

53. bindings
bindToController
compile
controller
controllerAs
link
multiElement
priority
require
restrict
scope
template
templateNamespace
templateUrl
terminal
transclude
(Elements only)
(Isolate only)
Directives Components
Comparatif

54. Components
Lifecycle Hooks
/! Angular 1.5.5
- $onInit()
- $postLink()
- $onChanges()
- $onDestroy()
=> Plus besoin de $scope :)
(ou presque)

55. Components
$onChanges
Avant
$scope.$watch(‘name’, function(n, o) {
// Traitement
});
Après
this.$onChanges = function(changesObj) {
if (changesObj.name) {
// Traitement
}
}

56. Components
$onDestroy
Avant
var timer = $timeout(function () {
// Traitement
}, 100);
$scope.$on(‘destroy’, function() {
$timeout.cancel(timer);
});
Après
var timer = $timeout(function () {
// Traitement
}, 100);
this.$onDestroy = function() {
$timeout.cancel(timer);
};

57. Quels sont les avantages ?

58. Components
Avantages
- Facilité
d’implémentation
- Moins de pouvoir
implique moins de
responsabilités
- Les Components en
Angular 2.0 sont très
similaires

59. Quels sont les inconvénients ?

60. Components
Inconvénients
- Limitations techniques

61. Comment choisir ?

62. Components
Comment choisir ?
- Les Components ne
remplacent pas les
Directives
- Utilise un Component…
sauf quand tu n’as pas
le choix.

63. Part III
Component-Based Architecture

64. Qui a déjà entendu de “Component-Based
Achitecture” ?

65. Component
Based
Architecture
La théorie
=> Approche modulaire
(chaque module remplit sa
fonctionnalité):
- meilleure lisibilité
- maintenance et
évolutions facilitées
- problèmes isolés
- effets de bord réduits

66. Component
Based
Architecture
La théorie appliquée au
Web
=> “Extend the Web”
Simple standard HTML tags:
-> <button>, <table>,
<input>, ...
Créons nos propres
composants !
-> <your-super-feature>

67. <votre-super-header>
<article>
<votre-super-footer>
<article> <article>
<article> <article>
Component
Based
Architecture
Petit schéma explicatif

68. En pratique, ça donne quoi ?

69. Scaffolding

70. Components
Based
Architecture
La pratique
├── app
│ ├── common
│ │ ├── components
│ │ ├── entities
│ │ ├── filters
│ │ └── services
│ ├── config
│ │ ├── config.js
│ │ ├── env.json
│ │ └── global.json
│ ├── index.js
│ ├── index.scss
│ ├── layout
│ │ ├── _10_fonts.scss
│ │ ├── _20_colors.scss
│ │ ├── _30_mixins.scss
│ │ ├── _layout.scss
│ ├── pages
│ │ ├── articles
│ │ ├── dashboard
│ │ ├── home
│ │ ├── profile
│ │ ├── signup
App file structure

71. Components
Based
Architecture
La pratique
src/app/common/components
├── nb-badge
│ ├── nb-badge.html
│ ├── nb-badge.js
│ └── nb-badge.scss
├── nb-bubble-tag
│ ├── nb-bubble-tag.html
│ ├── nb-bubble-tag.js
│ └── nb-bubble-tag.scss
├── nb-footer
│ ├── nb-footer.html
│ ├── nb-footer.js
│ └── nb-footer.scss
├── nb-header
│ ├── nb-header.html
│ ├── nb-header.js
│ └── nb-header.scss
├── nb-logo
│ ├── nb-logo.html
│ ├── nb-logo.js
│ └── nb-logo.scss
├── nb-small-article
│ ├── nb-small-article.html
│ ├── nb-small-article.js
│ └── nb-small-article.scss
├── nb-star-rating
│ ├── nb-star-rating.html
│ ├── nb-star-rating.js
│ └── nb-star-rating.scss
Components file structure
ProjetNB
BestPractice;)

72. Components
Based
Architecture
La pratique
Chaque Component a:
- sa structure (HTML)
- son affichage (CSS)
- son comportement (JS)

73. Components
Based
Architecture
Avantages
- meilleure lisibilité
-> chaque chose à sa place
- maintenance et évolutions
facilitées
-> le code est à un seul
endroit qu’on retrouve
facilement
- problèmes isolés
-> idem
- effets de bord réduits
-> le Component a un scope
isolé
-> chaque Component a son CSS

74. Components
Based
Architecture
Inconvénients
- plus de réflexion
-> Est-ce que je fais un
Component pour cette
fonctionnalité ou pas ?
- plus de dév
-> 3 fichiers de plus par
Component
- => Plus de temps
-> plus d’argent

75. Components
Based
Architecture
Conclusion
Le code est bien plus
- lisible
- maintenable
- évolutif
À utiliser sur des projets à long
terme.
Bonne introduction à Angular 2.0

76. Epilogue
1 Tip & 1 Trick

77. Connaissez-vous $resource ?

78. Exemple $resource
.factory('Users', function (API, $resource) {
return $resource(API + '/users/:id', { id: '@id' });
});
Users.get({ id: 123 }); [GET]
Users.save(); [POST]
Users.query(); [GET] // sans :id
Users.delete(); [DELETE]
-- Object Style --
var user = new Users();
user.firstname = ‘Tom’;
user.$save();

79. Exemple $resource avec méthodes supérieures
.factory('Users', function (API, $resource) {
var Users = $resource(API + '/users/:id/:action', { id: '@id' }, {
orders: { params: { action: 'orders' }, isArray: true },
invoices: { params: { action: 'invoices' }, isArray: true },
});
return Users;
});

80. 1 Tip
$resource, c’est la vie !
Si vous utilisez une API
RESTful pour vos données,
utilisez $resource
-> gain de temps
-> simplicité
-> maintenabilité

81. À quoi sert $timeout ?

82. 1 Trick
$timeout comme vous ne
l’avez jamais utilisé !
- $apply ? $digest ?
- “$digest is already in
progress” => :(
- $timeout :)

83. Exemple
angular.module('app', []).controller('TestController', ['$scope', function($scope){
$scope.name = 'Tom';
setTimeout(function(){
$scope.name = 'Bob';
}, 2000);
}]);
angular.module('app', []).controller('TestController', ['$scope', '$timeout',
function($scope, $timeout){
$scope.name = 'Tom';
$timeout(function(){
$scope.name = 'Bob';
}, 2000);
}]);

84. Utiliser $timeout avec/sans `delay` permet
de notifier Angular de vérifier ses `bindings`

85. Des questions ?
Des suggestions ?
Partagez votre expérience !

86. Merci :)
Vous pourrez retrouver ces slides sur
SlideShare.