Télécharger en tant que PDF, PPTX
![I. AngularJS ● Powered by Google ● Framework Javascript OpenSource MVC ● Releases https://github.com/angular/angular.js/blob/master/CHANGELOG.md ■ 85 actuellement, 22 depuis 2014 (3-4 par mois) ■ la première : v0.9.0 [Dragon-breath] (20 oct 2010) ■ la première stable : 1.0.0 [Temporal-domination] (13 juin 2012) ■ la dernière : 1.3.0beta11 [Excessive-clarification] (06 juin 2014)](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-7-2048.jpg)
![[ { index: 0, used: “true”, name: “DUALPLAY”, type: “Symbol”, description: “Lorem ipsum sit amet”, expression: “” }, { index: 1, ... ] http://plnkr.co/edit/74JBq2MDACBnmnUgTG0k? p=preview I. AngularJS](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-9-2048.jpg)
![Sass ● Définition de variables ● Définition de fonctions ● Imbrication input[type=text] { @include droid-inputs($color-grey); &:hover, &:focus { @include droid-inputs($color-blue); } &.error { @include droid-inputs($color-dark-red) } }](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-18-2048.jpg)
![Sass ● Définition de variables ● Définition de fonctions ● Imbrication input[type=text] { … } input[type=text]::hover, input[type=text]::focus { … } input[type=text].error { … }](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-19-2048.jpg)
![Grunt sass: { files: { '/styles/css/style.css' : '/styles/main/style.scss' } }, watch: { sass-compile: { files: ['/styles/{,*/}*.{scss,sass}'], tasks: [sass] } } > grunt watch](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-23-2048.jpg)
![Karma angular.filter('nl2br', function() { | <div> return function(text) { | {{ variable.description | nl2br }} return text.replace(/n/g, '<br/>'); | </div> }; | }); | -------------------------------------------------------------------------------------------------------- - describe("Test for nl2br filter", function() { it('should replace n by <br/>', inject(function(nl2brFilter) { var scenario = { input : [ '', 'n', 'nn', 'a linenanother'], output : [ '', '<br/>', '<br/><br/>', 'a line<br/>another'] }; for (var i = 0 ; i < scenario.input.length ; i++) { expect(nl2brFilter(scenario.input[i])).toEqual(scenario.output[i]); } })); });](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-29-2048.jpg)
![Protractor it('should display an error when try to create an account with an existing email', function() { $httpBackend .when(API.USER_CREATE.method, API.USER_CREATE.url) .respond(HTTP.UNPROCESSABLE_ENTITY, { message: 'Validation failed', status: HTTP.UNPROCESSABLE_ENTITY, errors: [ { resource: 'User', field: 'email' , code: 'already_exists' }, { resource: 'User', field: 'password', code: 'invalid' } ] }) ; ...](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-30-2048.jpg)
![Protractor // enter email/password element(by.input('username')).sendKeys('Sylvain'); element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com'); element(by.input('password')).sendKeys('s'); // create account element(page.form.signup).findElement(by.css('button[type=submit]')).click(); // text expectations expect(ptor.getCurrentUrl()).toMatch('#/login'); expect(element(by.input('email')).getAttribute('class')).toContain('error'); expect(element(by.input('password')).getAttribute('class')).toContain('error'); });](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-31-2048.jpg)
![Protractor // enter email/password element(by.input('username')).sendKeys('Sylvain'); element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com'); element(by.input('password')).sendKeys('s'); // create account element(page.form.signup).findElement(by.css('button[type=submit]')).click(); // text expectations expect(ptor.getCurrentUrl()).toMatch('#/login'); expect(element(by.input('email')).getAttribute('class')).toContain('error'); expect(element(by.input('password')).getAttribute('class')).toContain('error'); });](https://image.slidesharecdn.com/volume7-lemondemerveilleuxdudveloppeurfrontend-140613030414-phpapp01/75/AngularJS-et-autres-techno-frontend-32-2048.jpg)
Téléchargé paryllieth
AngularJS et autres techno frontend
Le document présente un aperçu des technologies et outils utilisés dans le développement frontend, notamment AngularJS, JavaScript, Sass, et les frameworks associés comme Grunt et Foundation. Il fournit des statistiques sur le dépôt GitHub d'AngularJS et aborde des concepts tels que la manipulation du DOM, la testabilité, et la compilation de styles. Des exemples de code et des références aux meilleures pratiques de développement sont également inclus.
AngularJS et autres techno frontend
- 1.
- 2.
- 3. ng-PLAN I. AngularJS II. Lereste … le tout à la sauce PredicSis + ng-route ng-cookie ng-translate ng-mocks JavaScript HTML CSS JQuery Sass Grunt Bower Foundation Karma Protractor
- 4.
- 5. ngularJS ● Powered byGoogle Statistiques du repo GitHub : 87 releases 837 contributeurs 1096 bugs ouverts 6666 bugs fermés dernière mise à jour : 1 heures 8550 forks
- 6. I. AngularJS ● Poweredby Google ● Framework Javascript OpenSource MVC ■ Bibliothèque javascript (104ko) ■ Open source : https://github.com/angular/angular.js ■ MVC … oui, même en html - javascript !! ■ Entièrement exécutée dans un navigateur
- 7. I. AngularJS ● Poweredby Google ● Framework Javascript OpenSource MVC ● Releases https://github.com/angular/angular.js/blob/master/CHANGELOG.md ■ 85 actuellement, 22 depuis 2014 (3-4 par mois) ■ la première : v0.9.0 [Dragon-breath] (20 oct 2010) ■ la première stable : 1.0.0 [Temporal-domination] (13 juin 2012) ■ la dernière : 1.3.0beta11 [Excessive-clarification] (06 juin 2014)
- 8. I. AngularJS ● SP A complexes Single-Page Applications ● Manipulation du D O M Document Object Model ● Améliore la testabilité (MVC, modules) ● Isole le front et le backend ● Utilise les dernières technos (DOM templates, binding attributes, promises, ...)
- 9. [ { index: 0, used: “true”, name:“DUALPLAY”, type: “Symbol”, description: “Lorem ipsum sit amet”, expression: “” }, { index: 1, ... ] http://plnkr.co/edit/74JBq2MDACBnmnUgTG0k? p=preview I. AngularJS
- 10. ● MSNBC.com ● Vevo(player video) ● Plunker ● The guardian ● ... https://builtwith.angularjs.org/ I. AngularJS
- 11.
- 12. Javascript ● Créé en1995 par Brendan Eich (Netscape) ● Intégré au navigateur netscape en 1996 ● Standardisé en 1997 par ECMA intl ● Actuellement : ECMAScript 5 (12-2009) ■ Adobe : ActionScript ■ Microsoft : JScript ■ Google : V8 http://fr.wikipedia.org/wiki/ECMAScript
- 13. Javascript Navigateurs “normaux” el.addEventListener('click', modifieTexte,false); Internet Explorer el.attachEvent('onclick', modifieTexte);
- 14. JQuery ● Première versionen 2006 ● LA bibliothèque JS la plus répandue ● Simplifier les fonctions usuelles de JS ■ Modification du DOM et du CSS ■ Évènements, animations, AJAX ■ Plugins
- 15.
- 16. Sass ● Définition devariables ■ $color-dark-blue: #004466; ■ $color-border: #C6C6C6; ■ $size-width-page: 980px; ■ $size-width-sidebar: $size-width-page / 2; ■ $color-light-blue: lighten($color-dark-blue, 30%); Surcharge de variables précédemment définies : $fi-path: "../../vendor/foundation-icon-fonts";
- 17. Sass ● Définition devariables ● Définition de fonctions @mixin android-inputs($color) { box-shadow: none; background: bottom left linear-gradient($color, $color) no-repeat, bottom center linear-gradient($color, $color) repeat-x, bottom right linear-gradient($color, $color) no-repeat; background-size: 1px 6px, 1px 1px, 1px 6px; }
- 18. Sass ● Définition devariables ● Définition de fonctions ● Imbrication input[type=text] { @include droid-inputs($color-grey); &:hover, &:focus { @include droid-inputs($color-blue); } &.error { @include droid-inputs($color-dark-red) } }
- 19. Sass ● Définition devariables ● Définition de fonctions ● Imbrication input[type=text] { … } input[type=text]::hover, input[type=text]::focus { … } input[type=text].error { … }
- 20. Sass ● Définition devariables ● Définition de fonctions ● Imbrication ● Nécessite une compilation avant le rendu
- 21.
- 22. Grunt sass: { files: {'/styles/css/style.css' : '/styles/main/style.scss' } } > grunt sass Fichier SASS Fichier CSS
- 23. Grunt sass: { files: {'/styles/css/style.css' : '/styles/main/style.scss' } }, watch: { sass-compile: { files: ['/styles/{,*/}*.{scss,sass}'], tasks: [sass] } } > grunt watch
- 24.
- 25. Zurb foundation ● “Bienvenuedans la grille”
- 26. Zurb foundation ● “Bienvenuedans la grille” ● L’approche mobile first <div class="large-4 medium-6"></div> ● Prévoir la version mobile ● Identifier tôt les contenus essentiels
- 27. Zurb foundation ● “Bienvenuedans la grille” ● L’approche mobile first ● C’est un framework … ■ row, radius, large-centered, breadcrumbs, … ■ définit un grand nombre de variables ■ documentation : http://foundation.zurb.com/docs/index.html
- 28.
- 29. Karma angular.filter('nl2br', function() {| <div> return function(text) { | {{ variable.description | nl2br }} return text.replace(/n/g, '<br/>'); | </div> }; | }); | -------------------------------------------------------------------------------------------------------- - describe("Test for nl2br filter", function() { it('should replace n by <br/>', inject(function(nl2brFilter) { var scenario = { input : [ '', 'n', 'nn', 'a linenanother'], output : [ '', '<br/>', '<br/><br/>', 'a line<br/>another'] }; for (var i = 0 ; i < scenario.input.length ; i++) { expect(nl2brFilter(scenario.input[i])).toEqual(scenario.output[i]); } })); });
- 30. Protractor it('should display anerror when try to create an account with an existing email', function() { $httpBackend .when(API.USER_CREATE.method, API.USER_CREATE.url) .respond(HTTP.UNPROCESSABLE_ENTITY, { message: 'Validation failed', status: HTTP.UNPROCESSABLE_ENTITY, errors: [ { resource: 'User', field: 'email' , code: 'already_exists' }, { resource: 'User', field: 'password', code: 'invalid' } ] }) ; ...
- 31. Protractor // enter email/password element(by.input('username')).sendKeys('Sylvain'); element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com'); element(by.input('password')).sendKeys('s'); //create account element(page.form.signup).findElement(by.css('button[type=submit]')).click(); // text expectations expect(ptor.getCurrentUrl()).toMatch('#/login'); expect(element(by.input('email')).getAttribute('class')).toContain('error'); expect(element(by.input('password')).getAttribute('class')).toContain('error'); });
- 32. Protractor // enter email/password element(by.input('username')).sendKeys('Sylvain'); element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com'); element(by.input('password')).sendKeys('s'); //create account element(page.form.signup).findElement(by.css('button[type=submit]')).click(); // text expectations expect(ptor.getCurrentUrl()).toMatch('#/login'); expect(element(by.input('email')).getAttribute('class')).toContain('error'); expect(element(by.input('password')).getAttribute('class')).toContain('error'); });
- 33.