Défilement pleine page dynamique avec AngularJS 1.x

Sur ma station météo j’ai voulu implémenter un défilement pleine page (FullPage scrolling ou snap scroll).  La difficulté était de charger et de rafraichir dynamiquement les éléments affichés. Il existe probablement des solutions plus élégantes. Mais celle-ci répond à mon besoin.

Défilement pleine page

Pour le réaliser j’ai utilisé angular-snapscroll couplé à ses dépendances.

<div ng-controller="SnapCtrl as snapCtrl">
    <div ng-init="snapIndex=0" snapscroll="" fit-window-height="" snap-index="snapIndex" ng-swipe-up="snapIndex=snapIndex+1" ng-swipe-down="snapIndex=snapIndex-1" before-snap="snapCtrl.beforeSnap(snapIndex)">
      <div class="container">
        vue 1
      </div>

      <div class="container">
        vue 2
      </div>
    </div>
  </div>

Je maintiens un index qui sera récupéré par mon contrôleur. Voici le code, pour le moment, qui affiche l’index :

'use strict';

/**
 * @ngdoc function
 * @name App.controller:SnapCtrl
 * @description
 * # SnapCtrl
 * Controller of fullPage Scrolling
 */
angular.module('App')
  .controller('SnapCtrl', function($window, $location, $state) {

    var vm = this;

    vm.beforeSnap = function(snapIndex) {
      console.log('snapping to', snapIndex);
    };

  });

Routage des vues

Pour le routage j’utilise ui.router  et les vues multiples.

Nommage des vues :

  <div ng-controller="SnapCtrl as snapCtrl">
    <div ng-init="snapIndex=0" snapscroll="" fit-window-height="" snap-index="snapIndex" ng-swipe-up="snapIndex=snapIndex+1" ng-swipe-down="snapIndex=snapIndex-1" before-snap="snapCtrl.beforeSnap(snapIndex)">
      <div class="container">
        <div ui-view="vue1"></div>
      </div>

      <div class="container">
        <div ui-view="vue2"></div>
      </div>
    </div>
  </div>

Maintenant passons au routage :

angular.module('App')
  .config(function($routeProvider) {
    $routeProvider
      .otherwise({
      redirectTo: '/'
    });
  });

angular.module('App')
  .config(function($stateProvider) {
    $stateProvider
      .state('vue1', {
        url: "/",
        views: {
          "vue1": {
            templateUrl: 'views/vue1.html'
          },
          "vue2": {
            template: ''
          }
        }
      })
      .state('vue2', {
        url: "/vue2",
        views: {
          "vue1": {
            template: ''
          },
          "vue2": {
            templateUrl: 'views/vue2.html'
          }
        }
      });
  });

On affiche donc les vues 1 et 2 en fonction de la position du scroll.

Voici donc le contrôleur  qui va forcer la navigation.

'use strict';

/**
 * @ngdoc function
 * @name weathergFrontApp.controller:SnapCtrl
 * @description
 * # SnapCtrl
 * Controller of the App
 */
angular.module('App')
  .controller('SnapCtrl', function($window, $location, $state) {

    var vm = this;

    vm.sections = ['vue1', 'vue2']; //routes to load (vue1.html, etc)

    vm.beforeSnap = function(snapIndex) {
      console.log('snapping to', snapIndex);
      
      $state.go(vm.sections[snapIndex]);
    };


  });

Sources

Documentation angular-snapscroll

Documentation ui-router

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

 

Chargement dynamique d’environnements avec AngularJs

Afin de pouvoir automatiser le passage de l’environnement de développement à l’environnent déployé. J’ai utilisé quelques astuces afin de gagner du temps lors de la production de version.

La solution consiste à générer un fichier env.js contenant les variables de déploiement. C’est Grunt qui fera le travail de configuration.

Installation de grunt-ng-constant

npm install --save-dev

Ecriture des configurations

Dans un répertoire config, on placera le template. Ce template sera utilisé pour générer le fichier de configuration. Dans ce script on stockera les différentes variables dans comme variable d’environnements (window.__env).

/**** DO NOT MODIFY DIRECLTY - THIS FILE IS AUTO GENERATED ***/ 
'use strict'; 


(function (window) {
  window.__env = window.__env || {};

  {% constants.forEach(function (constant){ %}
  window.__env.{%- constant.name %}={%= constant.value %};
  {% }) %}

}(this));



Et les fichiers de configurations…

Pour le développement :

{
  "APIEndpoint": {
    "protocol": null,
    "host": null,
    "port": null
  }
}

Pour la production :

{
  "APIEndpoint": {
    "protocol": "http",
    "host": "api.host.fr",
    "port": 80
  }
}

Chargement de la configuration

Maintenant nous allons configurer notre module. En chargeant les variables d’environnement (window.__env) .

/**
 * Configuration for module.
 */
'use strict';

angular.module('MyModule')
   .constant('Config', {
    API: {
      useMocks: true,
      fakeDelay: 2000,
      protocol: window.__env.APIEndpoint.protocol || window.location.protocol
        .split(':')[0],
      host: window.__env.APIEndpoint.host || window.location.hostname,
      //port: String(window.location.port || 80),
      port: window.__env.APIEndpoint.port || 3000
    }
  });

On n’oubliera pas d’inclure le fichier env.js à nos scripts.

Script de production

On enregistre une tache ngConstant chargée de générer le fichier env.js

// Automatically load required Grunt tasks
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn',
    ngconstant: 'grunt-ng-constant'
  });

/* ... */ 

 ngconstant: {
      options: {
        // Name of our Angular module with configuration data.
        name: 'env',
        // Place where we need to create new file with our config module.
        dest: '<%= yeoman.app %>/scripts/env.js',
        // This object will be merged to all config files.
        constants: 'config/default.json',
        // Template to create config module.
        template: grunt.file.read('config/env-template.ejs')
      },
      // Environments
      development: {
        constants: 'config/development.json'
      },
      production: {
        constants: 'config/production.json'
      }
    }

/* ... */

  grunt.registerTask('build', function(target) {
    var ngconstantTask = 'ngconstant:development';

    if (target === 'production') {
      ngconstantTask = 'ngconstant:production';
    }

    grunt.task.run([
      ngconstantTask,
      'clean:dist',
      'wiredep',
      'useminPrepare',
      'concurrent:dist',
      'postcss',
      'ngtemplates',
      'concat',
      'ngAnnotate',
      'copy:dist',
      'cdnify',
      'cssmin',
      'uglify',
      'filerev',
      'usemin',
      'htmlmin'
    ]);
  });

  grunt.registerTask('default', [
    'newer:jshint',
    'newer:jscs',
    'test',
    'build'
  ]);

Sources :

http://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/

http://cayugasoft.com/configuring-multiple-environments-angular-js-using-grunt-ng-constant/

ng-pluralize et les nombres négatifs

Dans le cadre du développement du front-end de la station météo, je suis confronté à l’affichage des minutes d’ensoleillement gagnées ou perdues.

Pour cela, j’utilise la directive ng-pluralize  d’Angular :

<ng-pluralize count="main.suntimeDiff"
              when="main.suntimeDiff >=0 ? main.sunTimeLabel : main.negSunTimeLabel" >
</ng-pluralize>
    vm.negSunTimeLabel = {
      'other': '{} minutes de soleil'
    };

    vm.sunTimeLabel = {
      '0': 'pas de minute de soleil gagnée ou perdue',
      'other': '+{} minutes de soleil'
    };

J’ai donc deux tableaux de labels en fonction de l’état de ma variable.

Matomo encountered an error: Uncaught Error: Class "Piwik\Plugins\CustomVariables\CustomVariables" not found in /var/www/piwik/core/Tracker/TrackerCodeGenerator.php:98 Stack trace: #0 /var/www/piwik/plugins/SitesManager/API.php(159): Piwik\Tracker\TrackerCodeGenerator->generate() #1 [internal function]: Piwik\Plugins\SitesManager\API->getJavascriptTag() #2 /var/www/piwik/core/API/Proxy.php(255): call_user_func_array() #3 /var/www/piwik/core/Context.php(28): Piwik\API\Proxy->Piwik\API\{closure}() #4 /var/www/piwik/core/API/Proxy.php(158): Piwik\Context::executeWithQueryParameters() #5 /var/www/piwik/core/API/Request.php(272): Piwik\API\Proxy->call() #6 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik/Request/Php.php(46): Piwik\API\Request->process() #7 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik/Request/Php.php(18): WP_Piwik\Request\Php->call() #8 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik/Request.php(63): WP_Piwik\Request\Php->request() #9 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik.php(1038): WP_Piwik\Request->perform() #10 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik.php(1205): WP_Piwik->request() #11 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik/TrackingCode.php(16): WP_Piwik->updateTrackingCode() #12 /var/www/thegtricks/wp-content/plugins/wp-piwik/classes/WP_Piwik.php(296): WP_Piwik\TrackingCode->__construct() #13 /var/www/thegtricks/wp-includes/class-wp-hook.php(324): WP_Piwik->addJavascriptCode() #14 /var/www/thegtricks/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #15 /var/www/thegtricks/wp-includes/plugin.php(517): WP_Hook->do_action() #16 /var/www/thegtricks/wp-includes/general-template.php(3068): do_action() #17 /var/www/thegtricks/wp-content/themes/twentyfifteen-child/footer.php(45): wp_footer() #18 /var/www/thegtricks/wp-includes/template.php(790): require_once('...') #19 /var/www/thegtricks/wp-includes/template.php(725): load_template() #20 /var/www/thegtricks/wp-includes/general-template.php(92): locate_template() #21 /var/www/thegtricks/wp-content/themes/twentyfifteen/archive.php(68): get_footer() #22 /var/www/thegtricks/wp-includes/template-loader.php(106): include('...') #23 /var/www/thegtricks/wp-blog-header.php(19): require_once('...') #24 /var/www/thegtricks/index.php(17): require('...') #25 {main} thrown (which lead to: Session must be started before any output has been sent to the browser; output started in /var/www/thegtricks/wp-includes/script-loader.php/2925)