![Contexte
Meetings & Events
by ClubMed
www.meetings-events-clubmed.fr
Angular 1.3
Projet NB
[confidentiel]
Angular 1.5.5](https://image.slidesharecdn.com/commentreussirsonprojetenangular1-160426081914/85/Comment-reussir-son-projet-en-Angular-1-5-8-320.jpg)
![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']);](https://image.slidesharecdn.com/commentreussirsonprojetenangular1-160426081914/85/Comment-reussir-son-projet-en-Angular-1-5-38-320.jpg)
![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();](https://image.slidesharecdn.com/commentreussirsonprojetenangular1-160426081914/85/Comment-reussir-son-projet-en-Angular-1-5-78-320.jpg)
![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);
}]);](https://image.slidesharecdn.com/commentreussirsonprojetenangular1-160426081914/85/Comment-reussir-son-projet-en-Angular-1-5-83-320.jpg)
Comment réussir son projet en Angular 1.5 ?
- 1. Comment réussir son projet en Angular 1.5 ? Maxime BERNARD Lead Dev @ WeStud.io
- 3. Lead Dev
- 4. Disclaimer
- 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
- 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é
- 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
- 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 ?
- 62. Components Comment choisir ? - Les Components ne remplacent pas les Directives - Utilise un Component… sauf quand tu n’as pas le choix.
- 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
- 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.