Étiquette : ui-router

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