Le document traite des meilleures pratiques pour réussir un projet en Angular 1.5, en mettant l'accent sur l'importance d'utiliser des outils comme Yeoman, npm et Bower pour optimiser le développement. Il présente également les nouveautés d'Angular 1.5, notamment les components, et évoque une architecture basée sur des components pour améliorer la lisibilité et la maintenabilité du code. Enfin, il partage des astuces sur l'utilisation de $resource et $timeout pour simplifier le développement.

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.