Comment puis-je gérer le rafraîchissement de la page avec une application D'une Page unique AngularJS?

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

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 catégorie SessionService définit la propriété isAuthenticated (simple bool) et la propriété user (un objet complexe) . Les valeurs de ces propriétés sont automatiquement stringifiées / parsed comme ils sont stockés / récupérés en utilisant le côté client local sessionStorage objet fourni par javascript.

vous ajoutez plus de propriétés comme requis . Comme $rootScope vous ajoutez des propriétés avec parcimonie. Contrairement à $rootScope les valeurs des propriétés sont toujours disponibles après un rafraîchissement de page ou un clic de bouton de retour.

le service permet à n'importe quel nombre de portées d'être enregistré avec lui. 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 portées enregistrées ont toujours accès à toutes les propriétés de la session.

Lorsqu'une valeur de propriété est mise à jour, toutes les portées enregistrées ont leurs valeurs correspondantes mises à jour.

quand angular détruit un scope, il est automatiquement retiré de la liste des scopes enregistrés pour éviter de gaspiller des ressources.

si un utilisateur rafraîchit la page ou appuie sur le bouton précédent, alors l'application angulaire est forcée de redémarrer. Normalement, ce signifierait que vous auriez à reconstruire votre état actuel. Le SessionService le fait pour vous automatiquement car chaque scope aura ses valeurs restaurées à partir du stockage local quand elles sont enregistrées lors de l'initialisation de l'application.

donc maintenant il est facile de résoudre le problème du partage des données entre les portées ainsi que la restauration des valeurs lorsque l'utilisateur rafraîchit ou appuie sur le bouton Précédent.

voici un exemple de code angulaire qui montre comment utiliser la classe SessionService .

enregistrer une portée avec SessionService dans quelque 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')

Définir les 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'UI (Jade template)

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