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

 

Installer NodeJS, NPM et Bower sous Debian

node.js-bower

Pour une installation d’un environnement de développement sous Debian.

Installer les dépendances

sudo apt-get update 
sudo apt-get install git-core curl build-essential openssl libssl-dev

Télécharger NodeJS

Et lancer la compilation

tar xvf node-v5.4.0.tar.gz
cd node-v5.4.0
configure
make

Editer le fichier /etc/profiles ou ~/.profile

# PATH
NODEJS_HOME=$HOME/prgm/node-v5.4.0-linux-x64

PATH="$NODEJS_HOME/bin:$PATH"

Tester l’installation

node -v
npm -v

Installer Bower

npm install -g bower

Installer Grunt

npm install -g grunt

Let’s Hack !