Ajout exo Karma

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;
+  };
+
+}]);

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
+  });
+};

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"
+  }
+}

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);
+
+
+    });
+
+  });
+
+});

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;
+  };
+
+}]);

javascript/angular/exercices/todos/.solution/index.html

@@ -37,7 +37,7 @@
         </table>
       </div>
     </div>
-    <script src="../node_modules/angular/angular.js"></script>
+    <script src="../../node_modules/angular/angular.js"></script>
     <script src="todos.js"></script>
   </body>
 </html>

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'
       ];

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

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`

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
+                          |...
+```

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[
+
+  <img src="img/ng_inspector.png" style="max-width: 100%" />
+
+  [Disponible sur le Chromium Store](https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj/related)
+]

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[
+  <img src="img/karma.png" style="max-width: 100%" />
+]

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[

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.