angularjs - 如何使用 AngularJS 单页应用程序处理页面刷新

Question

在我学习 Angular 时，有两个问题困扰着我:

当用户刷新页面或点击后退按钮时，如何恢复状态？

如何在属于不同 Controller 的范围之间共享数据？

下面我展示了一个使用客户端 session 存储的简单解决方案。它允许共享公共(public)数据和在用户刷新页面或点击后退按钮后自动恢复状态。

注意:事实证明，以下解决方案对于回答以下问题至关重要:

How do I get the Back Button to work with an AngularJS ui-router state machine?

Answer 1

解决方案取决于 SessionService类如下所示。语法是 CoffeeScript 。

session 服务类

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

SessionService类定义 isAuthenticated属性(简单 bool )和 user属性(一个复杂的对象)。这些属性的值在使用客户端本地 sessionStorage 存储/检索时自动进行字符串化/解析。由 javascript 提供的对象。

您可以根据需要添加更多属性。点赞 $rootScope您谨慎地添加属性。不像 $rootScope在页面刷新或后退按钮单击后，属性值仍然可用。

该服务允许向其注册任意数量的范围。注册范围时， sessionStorage 中的所有存储值自动分配给该范围。这样，所有注册的范围始终可以访问所有 session 属性。

当属性值更新时，所有注册的范围都会更新其对应的值。

当 Angular 销毁一个范围时，它会自动从注册范围列表中删除，以节省资源浪费。

如果用户刷新页面或点击后退按钮，则 Angular 应用程序将被迫重新启动。通常这意味着你必须重建你当前的状态。 SessionService自动为您执行此操作，因为在应用程序初始化期间注册每个范围时，它们的值将从本地存储中恢复。

所以现在很容易解决在范围之间共享数据以及在用户刷新或点击返回按钮时恢复值的问题。

这是一些示例 Angular 代码，显示如何使用 SessionService类(class)。

在某个 Controller 中使用 SessionService 注册范围

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')

在服务中设置 session 值

 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

在 UI 中使用 session 值(Jade 模板)

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