Comment réussir son projet en Angular 1.5 ?
-
Upload
maxime-bernard -
Category
Engineering
-
view
641 -
download
2
Transcript of Comment réussir son projet en Angular 1.5 ?
![Page 1: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/1.jpg)
Comment réussir son projet en Angular 1.5 ?
Maxime BERNARDLead Dev @ WeStud.io
![Page 2: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/2.jpg)
Qui suis-je ?
![Page 3: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/3.jpg)
Lead Dev
![Page 4: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/4.jpg)
Disclaimer
![Page 5: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/5.jpg)
Disclaimer
Interactivité Subjectivité
![Page 6: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/6.jpg)
Prérequis ?
![Page 7: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/7.jpg)
Contexte
![Page 8: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/8.jpg)
Contexte
Meetings & Eventsby ClubMed
www.meetings-events-clubmed.fr
Angular 1.3
Projet NB
[confidentiel]
Angular 1.5.5
![Page 9: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/9.jpg)
Part ILes outils
![Page 10: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/10.jpg)
Part ILes 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é
![Page 11: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/11.jpg)
Quels outils utilisez-vous ?
![Page 12: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/12.jpg)
Pour démarrer votre projet, il existe un outil bien pratique
appelé...
![Page 13: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/13.jpg)
OutilsYeoman
-> Générateur de projet(outil de scaffolding)
- Structure des fichiers
- Scripts de compilation
- Minification des feuilles de styles
et tellement plus encore...
![Page 14: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/14.jpg)
Exemple
![Page 15: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/15.jpg)
Scaffolding
![Page 16: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/16.jpg)
OutilsYeoman
-> Des centaines de générateurs différents disponibles
-> Mon préféré: gulp-angular
![Page 17: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/17.jpg)
Et c’est quoi tous ces fichiers créés par le générateur ?
![Page 18: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/18.jpg)
Scaffolding
![Page 19: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/19.jpg)
À quoi sert le fichier `package.json` ?
![Page 20: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/20.jpg)
OutilsNPM
-> 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
![Page 21: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/21.jpg)
Pourquoi c’est bien ?
![Page 22: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/22.jpg)
OutilsNPM
-> 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
![Page 23: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/23.jpg)
Scaffolding
![Page 24: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/24.jpg)
À quoi sert le fichier `bower.json` ?
![Page 25: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/25.jpg)
OutilsBower
-> Le Package Manager de ...
![Page 26: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/26.jpg)
Euh… C’est pas déjà NPM ça ?
![Page 27: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/27.jpg)
![Page 28: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/28.jpg)
OutilsBower
-> Package Manager du Web
- Pas propre à Javascript- Pas le même job- Fichier de configuration bower.json
![Page 29: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/29.jpg)
OutilsBower
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
![Page 30: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/30.jpg)
OutilsBower
Installer jQuery
Grace à Bower:
- `bower install jquery`(`--save`)
- Et pour mettre à jour… `bower update`
![Page 31: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/31.jpg)
Quelle est la différence avec NPM ?
![Page 32: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/32.jpg)
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
![Page 33: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/33.jpg)
Scaffolding
![Page 34: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/34.jpg)
À quoi sert le fichier `gulpfile.js` ?
![Page 35: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/35.jpg)
OutilsGulp
-> “Automatiseur de tâches”
(Concurrent de Grunt)
- Asynchrone
- StreamBased
![Page 36: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/36.jpg)
OutilsGulp - serve
Besoin de compiler vos fichiers et les servir en local ?
=> `gulp serve`
Par défaut, BrowserSync activé par défaut (gulp-angular).
![Page 37: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/37.jpg)
OutilsGulp - dépendances
Gulp gère les dépendances
`gulp serve`
`gulp build`
![Page 38: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/38.jpg)
Exemplegulp.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']);
![Page 39: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/39.jpg)
Comment faites-vous vos sprites ?
![Page 40: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/40.jpg)
OutilsGulp - 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`
![Page 41: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/41.jpg)
gulp-bower
=> `gulp bower`
- lit vos dépendances dans le bower.json
- les injecte automatiquement dans votre application
OutilsGulp <3 Bower
![Page 42: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/42.jpg)
OutilsGulp
Des centaines de plugins Gulp sont déjà disponibles
D’autres exemples ?
- `gulp deploy`
- `gulp test`
- `gulp watch`
![Page 43: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/43.jpg)
T’en as encore combien des outils… ?
![Page 44: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/44.jpg)
Outilsconclusion
- NPM & Bower sont des “must-have”
- Pour Gulp=> Utilisez les outils qui vous servent
![Page 45: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/45.jpg)
Part IIAngularJS 1.5
![Page 46: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/46.jpg)
Nouveautés AngularJS 1.5 ?
![Page 47: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/47.jpg)
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
![Page 48: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/48.jpg)
Qui connait déjà les Components ?
![Page 49: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/49.jpg)
ComponentsQu’est-ce que c’est ?
C’est comme une directive… mais en plus simple et moins puissant.
![Page 50: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/50.jpg)
Rien ne vaut un petit exemple :)
![Page 51: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/51.jpg)
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; }});
![Page 52: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/52.jpg)
Euh… C’est tout ?
![Page 53: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/53.jpg)
bindingsbindToController
compilecontrollercontrollerAs
linkmultiElementpriorityrequirerestrictscopetemplate
templateNamespacetemplateUrlterminaltransclude
(Elements only)(Isolate only)
Directives Components
Comparatif
![Page 54: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/54.jpg)
ComponentsLifecycle Hooks
/!\ Angular 1.5.5
- $onInit()
- $postLink()
- $onChanges()
- $onDestroy()
=> Plus besoin de $scope :)(ou presque)
![Page 55: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/55.jpg)
Components$onChanges
Avant$scope.$watch(‘name’, function(n, o) { // Traitement });
Aprèsthis.$onChanges = function(changesObj) { if (changesObj.name) {
// Traitement}
}
![Page 56: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/56.jpg)
Components$onDestroy
Avantvar timer = $timeout(function () {
// Traitement}, 100);
$scope.$on(‘destroy’, function() {$timeout.cancel(timer);
});
Aprèsvar timer = $timeout(function () {
// Traitement}, 100);
this.$onDestroy = function() {$timeout.cancel(timer);
};
![Page 57: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/57.jpg)
Quels sont les avantages ?
![Page 58: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/58.jpg)
ComponentsAvantages
- Facilité d’implémentation
- Moins de pouvoir implique moins de responsabilités
- Les Components en Angular 2.0 sont très similaires
![Page 59: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/59.jpg)
Quels sont les inconvénients ?
![Page 60: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/60.jpg)
ComponentsInconvénients
- Limitations techniques
![Page 61: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/61.jpg)
Comment choisir ?
![Page 62: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/62.jpg)
ComponentsComment choisir ?
- Les Components ne remplacent pas les Directives
- Utilise un Component…sauf quand tu n’as pas le choix.
![Page 63: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/63.jpg)
Part IIIComponent-Based
Architecture
![Page 64: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/64.jpg)
Qui a déjà entendu de “Component-Based Achitecture” ?
![Page 65: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/65.jpg)
Component Based
ArchitectureLa 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
![Page 66: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/66.jpg)
Component Based
ArchitectureLa théorie appliquée au
Web
=> “Extend the Web”
Simple standard HTML tags:-> <button>, <table>, <input>, ...
Créons nos propres composants !
-> <your-super-feature>
![Page 67: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/67.jpg)
<votre-super-header>
<article>
<votre-super-footer>
<article> <article>
<article> <article>
Component Based
ArchitecturePetit schéma explicatif
![Page 68: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/68.jpg)
En pratique, ça donne quoi ?
![Page 69: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/69.jpg)
Scaffolding
![Page 70: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/70.jpg)
ComponentsBased
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
![Page 71: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/71.jpg)
ComponentsBased
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
Proj
et N
B
Bes
t Pra
ctic
e ;)
![Page 72: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/72.jpg)
ComponentsBased
ArchitectureLa pratique
Chaque Component a:
- sa structure (HTML)
- son affichage (CSS)
- son comportement (JS)
![Page 73: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/73.jpg)
ComponentsBased
ArchitectureAvantages
- 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
![Page 74: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/74.jpg)
ComponentsBased
ArchitectureInconvé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
![Page 75: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/75.jpg)
ComponentsBased
ArchitectureConclusion
Le code est bien plus
- lisible
- maintenable
- évolutif
À utiliser sur des projets à long terme.
Bonne introduction à Angular 2.0
![Page 76: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/76.jpg)
Epilogue1 Tip & 1 Trick
![Page 77: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/77.jpg)
Connaissez-vous $resource ?
![Page 78: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/78.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 :idUsers.delete(); [DELETE]
-- Object Style --
var user = new Users();user.firstname = ‘Tom’;user.$save();
![Page 79: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/79.jpg)
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; });
![Page 80: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/80.jpg)
1 Tip$resource, c’est la vie !
Si vous utilisez une API RESTful pour vos données, utilisez $resource
-> gain de temps
-> simplicité
-> maintenabilité
![Page 81: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/81.jpg)
À quoi sert $timeout ?
![Page 82: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/82.jpg)
1 Trick$timeout comme vous ne l’avez jamais utilisé !
- $apply ? $digest ?
- “$digest is already in progress” => :(
- $timeout :)
![Page 83: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/83.jpg)
Exempleangular.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); }]);
![Page 84: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/84.jpg)
Utiliser $timeout avec/sans `delay` permet de notifier Angular
de vérifier ses `bindings`
![Page 85: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/85.jpg)
Des questions ?Des suggestions ?
Partagez votre expérience !
![Page 86: Comment réussir son projet en Angular 1.5 ?](https://reader031.fdocuments.us/reader031/viewer/2022030314/589ce60a1a28abf86d8b62fb/html5/thumbnails/86.jpg)
Merci :)Vous pourrez retrouver ces slides
sur SlideShare.