Comment dois-je traiter la page rafraîchissant avec un AngularJS Seule Page de l'Application

La solution dépend de la SessionService classe indiquée ci-dessous. La syntaxe est coffeescript.

SessionService Classe

class SessionService
    scopes:[]

    setStorage:(key, value) ->
        scope[key] = value for scope in @scopes
        value =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, value

    getStorage:(key)->
        sessionValue = sessionStorage.getItem key
        if sessionValue == "undefined"
            return null
        JSON.parse sessionValue

    register:(scope)->
        for key, value of sessionStorage
            scope[key] = if value? and value != "undefined" then JSON.parse(value) else null
        @scopes.push scope
        scope.$on '$destroy', =>
            @scopes = @scopes.filter (s) -> s.$id != scope.$id

    clear: ->
        @setStorage(key, null) for key of sessionStorage

    isAuthenticated: ->
        @accessor 'isAuthenticated', value

    user:(value=null) ->
        @accessor 'user', value

    # other storage items go here 

    accessor:(name, value)->
        return @getStorage name unless value?
        @setStorage name, value

angular
.module 'app.Services'
.service 'sessionService', SessionService

La SessionService classe définit les isAuthenticated propriété (simple bool) et le user propriété d'un objet complexe) . Les valeurs de ces propriétés sont automatiquement stringified /analysée comme ils sont stockés /récupérées à l'aide du côté client local sessionStorage objet fourni par le javascript.

Vous ajoutez plus de propriétés, comme l'exige. Comme $rootScope vous ajoutez des propriétés de parcimonie. Contrairement à $rootScope les valeurs de propriété sont encore disponibles après un rafraichissement de la page ou à l'arrière de clic de bouton.

Le service permet à n'importe quel nombre de champs à être inscrit. Lorsqu'un champ est enregistré toutes les valeurs stockées dans sessionStorage sont automatiquement affectés à cette portée. De cette façon, tous les étendues de toujours avoir accès à toutes les propriétés de session.

Lorsque la valeur d'une propriété est mise à jour, tous les étendues ont leurs valeurs correspondantes à jour.

Quand angulaire détruit un champ d'application il est automatiquement supprimé de la liste des inscrits étendues pour enregistrer le gaspillage des ressources.

Si un utilisateur actualise la page ou frappe le dos, puis sur le bouton angulaire de l'application est obligé de redémarrer. Normalement, cela signifierait que vous auriez à reconstruire votre état actuel. Le SessionService fait cela pour vous automatiquement que chaque application a ses valeurs restauré à partir de locaux de stockage lorsqu'ils sont enregistrés pendant l'initialisation de l'application.

Alors maintenant, il est facile de résoudre le problème de l'échange de données entre les étendues ainsi que la restauration des valeurs lors de l'actualisation de l'utilisateur ou clique sur le bouton précédent.

Voici quelques exemples angulaire de code qui montre comment utiliser la SessionService classe.

Enregistrer une portée avec SessionService dans certains Contrôleur

angular
.module 'app'
.controller 'mainCtrl', ($scope, $state, session, security) ->
    #register the scope with the session service
    session.register $scope

    #hook up the 'login' method (see security service)
    $scope.login = security.login

    # check the value of a session property
    # it may well be true if the page has been refreshed
    if session.isAuthenticated
        $state.go('home')
    else
        $state.go('login')

Ensemble de valeurs de Session dans un service

 class SecurityService
    @$inject:['$http','sessionService', 'api']
    constructor:(@http, @session, @api) ->

    login:(username, password) =>
        @http.get "#{@api.base}/security/login/credentials/#{username}/#{password}"
        .success (user)=>
            @session.isAuthenticated = true
            @session.user = user
        .error (ex)=>
            # process error

angular
.module 'app'
.service 'securityService', SecurityService

Utiliser les valeurs de Session dans l'INTERFACE utilisateur (modèle Jade)

div(ng-show="isAuthenticated")
    div Hello {{user.Name}}

OriginalL'auteur biofractal

Il existe une solution simple lorsque vous utilisez Node.js pour configurer votre serveur. Vous devez organiser votre routage du côté client dans une manière qui rend votre route des liens uniques avec les expressions régulières. Dans app.js vous aurez:

(function () {
var app = angular.module('dataCollector', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider',

    function ($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'mainController'
        })

        .when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutController'
            })

        .when('/login', {
            templateUrl: 'login.html',
            controller: 'loginController'
        });

    $locationProvider.html5Mode(true);
}]);

app.controller('mainController', ['$scope', function ($scope) {
}]);

})();

Dans cet exemple, toutes les routes, à l'exception de '/', peut être écrite dans une expression régulière schéma [A-Za-z]. Considérant ceci, la server.js le fichier comme ceci:

 var express = require('express');
 var http = require('http');
 var fs = require('fs');
 var path = require('path');

 var app = express();
 app.use(express.static('public'));

 app.get(/[A-Za-z]/, function (req, res) {
     res.sendFile(path.join(__dirname + '/index.html'));
 });


 http.createServer(app).listen(80);

Maintenant, chaque GET demande qui correspond à l'expression rationnelle [A-Za-z] fera une réponse avec index.html (qui sont nos itinéraires appelé lors de l'actualisation d'une page par exemple /about). Toute autre GET demande de réponse avec un fichier à partir de la /public répertoire (ici chaque fichier avec l'extension *.html). Cela permet de rafraîchir la AngularJS SPA d'une manière appropriée.

OriginalL'auteur D Wal