diff --git a/javascript/angular/exercices/karma/app/app.js b/javascript/angular/exercices/karma/app/app.js new file mode 100644 index 0000000..48acae9 --- /dev/null +++ b/javascript/angular/exercices/karma/app/app.js @@ -0,0 +1,12 @@ +var myApp = angular.module('myApp', []); + +myApp.controller('ExoCtrl', ['$scope', function($scope) { + + $scope.val1 = 1; + $scope.val2 = 2; + + $scope.add = function() { + $scope.result = $scope.val1 + $scope.val2; + }; + +}]); diff --git a/javascript/angular/exercices/karma/karma.conf.js b/javascript/angular/exercices/karma/karma.conf.js new file mode 100644 index 0000000..eb78d2e --- /dev/null +++ b/javascript/angular/exercices/karma/karma.conf.js @@ -0,0 +1,68 @@ +// Karma configuration +// Generated on Fri Apr 10 2015 00:15:38 GMT+0200 (CEST) + +module.exports = function(config) { + config.set({ + + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine'], + + + // list of files / patterns to load in the browser + files: [ + '../node_modules/angular/angular.js', + 'node_modules/angular-mocks/angular-mocks.js', + 'app/app.js', + 'test/**/*Spec.js' + ], + + + // list of files to exclude + exclude: [ + ], + + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, + + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], + + + // web server port + port: 9876, + + + // enable / disable colors in the output (reporters and logs) + colors: true, + + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: ['Firefox'], + + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: false + }); +}; diff --git a/javascript/angular/exercices/karma/package.json b/javascript/angular/exercices/karma/package.json new file mode 100644 index 0000000..ffe4c06 --- /dev/null +++ b/javascript/angular/exercices/karma/package.json @@ -0,0 +1,21 @@ +{ + "name": "karma-exercice", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "angular-mocks": "^1.3.15", + "karma": "^0.12.31" + }, + "devDependencies": { + "jasmine-core": "^2.2.0", + "karma-chrome-launcher": "^0.1.7", + "karma-firefox-launcher": "^0.1.4", + "karma-jasmine": "^0.3.5" + } +} diff --git a/javascript/angular/exercices/karma/test/ExoControllerSpec.js b/javascript/angular/exercices/karma/test/ExoControllerSpec.js new file mode 100644 index 0000000..e911bb6 --- /dev/null +++ b/javascript/angular/exercices/karma/test/ExoControllerSpec.js @@ -0,0 +1,29 @@ +describe('ExoController', function() { + + beforeEach(module('myApp')); + + var $controller; + + beforeEach(inject(function(_$controller_){ + $controller = _$controller_; + })); + + describe('$scope.add', function() { + + it('Il additionne les valeurs $scope.val1 et $scope.val2 et stocke le résultat dans $scope.result', function() { + + var $scope = {}; + var controller = $controller('ExoCtrl', {$scope: $scope}); + $scope.val1 = 2; + $scope.val2 = 4; + + $scope.add(); + + expect($scope.result).toEqual(6); + + + }); + + }); + +}); diff --git a/javascript/angular/exercices/protractor/app/app.js b/javascript/angular/exercices/protractor/app/app.js new file mode 100644 index 0000000..48acae9 --- /dev/null +++ b/javascript/angular/exercices/protractor/app/app.js @@ -0,0 +1,12 @@ +var myApp = angular.module('myApp', []); + +myApp.controller('ExoCtrl', ['$scope', function($scope) { + + $scope.val1 = 1; + $scope.val2 = 2; + + $scope.add = function() { + $scope.result = $scope.val1 + $scope.val2; + }; + +}]); diff --git a/javascript/angular/exercices/todos/.solution/index.html b/javascript/angular/exercices/todos/.solution/index.html index 04e01f2..5ad1309 100644 --- a/javascript/angular/exercices/todos/.solution/index.html +++ b/javascript/angular/exercices/todos/.solution/index.html @@ -37,7 +37,7 @@ - + diff --git a/javascript/angular/img/karma.png b/javascript/angular/img/karma.png new file mode 100644 index 0000000..0a331a6 Binary files /dev/null and b/javascript/angular/img/karma.png differ diff --git a/javascript/angular/img/ng_inspector.png b/javascript/angular/img/ng_inspector.png new file mode 100644 index 0000000..f20ef97 Binary files /dev/null and b/javascript/angular/img/ng_inspector.png differ diff --git a/javascript/angular/index.html b/javascript/angular/index.html index 4463c35..655d31d 100644 --- a/javascript/angular/index.html +++ b/javascript/angular/index.html @@ -38,6 +38,10 @@ 'routage-1', 'routage-2', 'routage-3', + 'projet-outils-1', + 'projet-outils-2', + 'projet-outils-3', + 'projet-outils-4', 'questions', 'licence' ]; diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md index f95c8b8..666872c 100644 --- a/javascript/angular/plan.md +++ b/javascript/angular/plan.md @@ -11,7 +11,7 @@ - Les filtres - Création de directives - Utilisation de modules -- Cycle de vie d'un projet et outillage +- Menée de projet et outils - Mise en pratique ??? @@ -38,7 +38,8 @@ - Utilisation de modules - Routage avec module ngRoute - API REST & ngResource -- Cycle de vie d'un projet et outillage +- Menée de projet et outils + - Structuration d'un projet - Batarang - Tests unitaires - Tests fonctionnels diff --git a/javascript/angular/projet-outils-1.md b/javascript/angular/projet-outils-1.md new file mode 100644 index 0000000..fdcdec3 --- /dev/null +++ b/javascript/angular/projet-outils-1.md @@ -0,0 +1,26 @@ +# .cadoles-slide-title[Menée de projet & outils (1/)] + +**Organisation d'un petit projet** +```text +myApp-client + |-> vendor | bower_components | node_modules - Répertoire des librairies tierces + |-> js + | |-> controllers + | |-> services + | |-> filters + | |-> directives + | |-> templates + | |-> app.js - Point d'amorçage de l'application + |-> assets - Images, ressources textuelles ou autres... + |-> css + |-> bower.json | package.json - Manifeste pour le gestionnaire de paquet + |-> .jshintrc - Règles spécifiques de mise en forme pour le projet + |-> Makefile | Gulpfile.js | Gruntfile.js - Tâches pour pipeline de développement + |-> index.html - Point d'entrée HTML + |-> README.md - Description du projet, avec "Getting started" + |-> LICENCE +``` + +- Un seul module Angular pour l'application +- Gestionnaire de paquets pour gérer les dépendances (avec inclusion ou non des dépendances dans le dépôt) +- Définir au plus tôt les règles de validation du code, et les fixer dans le fichier `.jshintrc` diff --git a/javascript/angular/projet-outils-2.md b/javascript/angular/projet-outils-2.md new file mode 100644 index 0000000..aa674bc --- /dev/null +++ b/javascript/angular/projet-outils-2.md @@ -0,0 +1,31 @@ +# .cadoles-slide-title[Menée de projet & outils (2/)] + +**Organisation d'un projet plus important** +```text +# Structure basée sur la même idée, mais avec une approche orientée composants, récursive + +myApp-client + |-> js + |-> main.js - Amorçage de l'application + |-> config.js - Configuration de l'application + |-> app.js - Définition du module principale + |-> shared - Fonctionnalités du module + | |-> controllers + | | |-> templates - Templates liés aux contrôleurs du module + | |-> directives + | | |-> templates - Templates liés aux directives du module + | |-> filters + |-> components - Sous modules + |-> module1 + | |-> module1.js + | |-> shared + | | |... + | |-> components + | |... + |-> module2 + |-> module2.js + |-> shared + | |... + |-> components + |... +``` diff --git a/javascript/angular/projet-outils-3.md b/javascript/angular/projet-outils-3.md new file mode 100644 index 0000000..e854587 --- /dev/null +++ b/javascript/angular/projet-outils-3.md @@ -0,0 +1,11 @@ +# .cadoles-slide-title[Menée de projet & outils (3/)] + +**Extension Chromium: ng-inspector** + + +.cadoles-center[ + + + + [Disponible sur le Chromium Store](https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj/related) +] diff --git a/javascript/angular/projet-outils-4.md b/javascript/angular/projet-outils-4.md new file mode 100644 index 0000000..a057501 --- /dev/null +++ b/javascript/angular/projet-outils-4.md @@ -0,0 +1,7 @@ +# .cadoles-slide-title[Menée de projet & outils (4/)] + +**Tests unitaires avec Karma & Jasmine** + +.cadoles-center[ + +] diff --git a/javascript/angular/routage-1.md b/javascript/angular/routage-1.md index e64c7ce..32529c5 100644 --- a/javascript/angular/routage-1.md +++ b/javascript/angular/routage-1.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Routage dans le navigateur (1/)] +# .cadoles-slide-title[Routage dans le navigateur (1/3)] **Différences entre la navigation classique et la navigation côté client** .cadoles-left-column[ diff --git a/javascript/angular/routage-2.md b/javascript/angular/routage-2.md index d6a5fb9..3d04de7 100644 --- a/javascript/angular/routage-2.md +++ b/javascript/angular/routage-2.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Routage dans le navigateur (2/)] +# .cadoles-slide-title[Routage dans le navigateur (2/3)] **Le module `ngRoute`** - Il permet de gérer l'association entre vue/contrôleur/route côté client.