Question

我正在做一个使用AngularJS的项目。我创建了部分页面，其中每个页面都有自己的不同控制器。

网站结构

/ProjectRoot
    /css
    /js
        angular.js
        jquery.js


    /partials
        login.html
        page1.html

    index.html

的index.html

<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
    scripts
</head>
<body ng-controller="maincontroller">   
     <ng-view></ng-view>
</body>
</html>

的login.html

<div class="main-page" ng-controller="logincontroller">
    --code---
</div>

因此完整登录页面呈现为：

<!DOCTYPE html>
    <html ng-app="demoapp" >
    <head>
        scripts
    </head>
    <body ng-controller="maincontroller">   
         <div class="main-page" ng-controller="logincontroller">
            --code---
         </div>
    </body>
    </html>

我需要在控制器之间共享数据。我尝试使用$scope.$parent.variablename但是当我刷新page1.html时，它包含一个空值。

我的问题是：

如何创建我可以在整个项目中使用的全局变量，即所有部分页面及其控制器（可能是$rootScope）？
是否使用缓存是更好的选择？（安全问题）

Answer 1

要在控制器之间共享状态，您应该使用Angular服务。服务易于定义和使用（参见下面的示例），因为它们是单例，所以它们是存储共享状态信息的好地方。不需要缓存或任何复杂的东西。

但是你还说：

我尝试使用$scope.$parent.variablename但是当我刷新时 page1.html它包含空值。

刷新Angular应用程序总是一个问题。

这是因为您的典型Angular应用程序是单页应用程序（SPA）。只有应用程序的生命周期，您的状态信息才会持续存在，而SPA的生命周期则是该页面的生命周期。因此，如果您刷新页面，则重新启动应用程序，并且所有状态信息都将丢失。

要解决此问题，您可以使用sessionStorage。此技术为well supported across browsers，允许您在页面刷新之间保留状态数据。这在Angular应用程序中尤其重要，因为它们应该始终优雅地支持刷新页面的用户（包括单击后退和前进按钮）。

您可以将所有这些组合成一个简单的服务，将其数据保存到sessionStorage。这为您提供了控制器之间共享的状态数据，并在页面刷新之间保持不变。

这是一个存储名为userToken的状态数据的示例（在coffeescript中）：

<强>服务

angular
.module 'app'
.service 'storageService', StorageService

class StorageService

    setStorage:(key, value)->
        json =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, json

    getStorage:(key)->
        JSON.parse sessionStorage.getItem key

    userToken:(value=null)->
        if value is null
            @getStorage 'userToken'
        else
            @setStorage 'userToken', value

您可以根据需要为此服务添加任意数量的数据值，甚至可以存储复杂的对象

一旦定义了服务，就可以使用Angular的依赖注入来轻松获取服务实例。以下是一些示例控制器，显示正在注入和使用的storageService：

<强>控制器

angular
.module 'app'

.controller 'logincontroller', ($scope, storageService)->
    $scope.setUserToken = (token)-> storageService.userToken(token)

.controller 'maincontroller', ($scope, storageService)->
    $scope.userToken = storageService.userToken()

如何在AngularJS中的控制器之间共享数据？

1 个答案: