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.

1. Défilement pleine page

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

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

2. Routage des vues

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

Nommage des vues :

Maintenant passons au routage :

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.

3. 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.

1. Installation de grunt-ng-constant

2. 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).

Et les fichiers de configurations…

Pour le développement :

Pour la production :

3. Chargement de la configuration

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

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

4. Script de production

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

5. 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 :

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