60

我正在使用 AngularJS 框架进行项目。我对使用这个框架很陌生；过去我只使用纯 JavaScript 和 jQuery。该项目是一种针对利基市场的网页设计师应用程序。

当用户在设计时在页面之间移动时，我想维护他们所做的所有更改的会话。

现在，如果用户登录，我们将使用数据库中的数据加载会话。当用户单击保存按钮时，我们使用会话数据更新数据库。有人告诉我，我可以在 Angular 中维护会话，类似于骨干网。这可能吗？如果是的话，你能指导我看一个不关注指令或 UI 的教程吗？如果这是不可能的，还有其他可行的选择吗？

4

5 回答 5

58

这是给你的一种片段：

app.factory('Session', function($http) {
  var Session = {
    data: {},
    saveSession: function() { /* save session data to db */ },
    updateSession: function() { 
      /* load data from db */
      $http.get('session.json').then(function(r) { return Session.data = r.data;});
    }
  };
  Session.updateSession();
  return Session; 
});

这是 Plunker 示例如何使用它： http ://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview

于 2013-02-19T14:11:02.453 回答
9

因为答案对于更稳定的 Angular 版本不再有效，所以我发布了一个更新的解决方案。

PHP 页面：session.php

if (!isset($_SESSION))
{    
    session_start();
}    

$_SESSION['variable'] = "hello world";

$sessions = array();

$sessions['variable'] = $_SESSION['variable'];

header('Content-Type: application/json');
echo json_encode($sessions);

仅在 Angular 中发回您想要的会话变​​量，并非所有变量都不想公开超出所需的内容。

JS 在一起

var app = angular.module('StarterApp', []);
app.controller("AppCtrl", ['$rootScope', 'Session', function($rootScope, Session) {      
    Session.then(function(response){
        $rootScope.session = response;
    });
}]);

 app.factory('Session', function($http) {    
    return $http.get('/session.php').then(function(result) {       
        return result.data; 
    });
});
  • 使用工厂做一个简单的获取会话。
  • 如果您想让它发布以使您在浏览器中转到它时页面不可见，您可以，我只是简化它
  • 将工厂添加到控制器
  • 我使用 rootScope 因为它是我在所有代码中都使用的会话变量。

HTML

在您的 html 中，您可以引用您的会话

<html ng-app="StarterApp">

<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
于 2015-08-19T15:11:24.580 回答
8

您还可以尝试根据window.sessionStorage或window.localStorage保留页面重新加载之间的状态信息来提供服务。我在部分由 AngularJS 制作的 web 应用程序中使用它，并且页面 URL 在工作流的某些部分以“旧方式”更改。甚至 IE8 也支持 Web 存储。为方便起见，这里是angular-webstorage。

于 2013-08-23T14:08:09.483 回答
3

您将在 Angular 中为此使用服务。服务是您在 Angular 中注册的函数，该函数的工作是返回一个对象，该对象将一直存在，直到浏览器关闭/刷新。因此，这是一个存储状态的好地方，并在状态更改时将该状态与服务器异步同步。

于 2013-02-19T12:42:03.030 回答
0

通常对于涉及一系列页面的用例，在最后阶段或页面中，我们将数据发布到服务器。在这种情况下，我们需要维护状态。在下面的代码片段中，我们维护客户端的状态

正如上面的帖子中提到的。会话是使用工厂配方创建的。

客户端会话也可以使用价值提供者配方来维护。

有关完整的详细信息，请参阅我的帖子。 angularjs中的会话跟踪

让我们举一个购物车的例子，我们需要在不同的页面/angularjs 控制器中维护它。

在典型的购物车中，我们在各种产品/类别页面上购买产品并不断更新购物车。以下是步骤。

在这里，我们使用“价值提供者配方”创建了包含购物车的自定义可注入服务。

'use strict';
function Cart() {
    return {
        'cartId': '',
        'cartItem': []
    };
}
// custom service maintains the cart along with its behavior to clear itself , create new , delete Item or update cart 

app.value('sessionService', {
    cart: new Cart(),
    clear: function () {
        this.cart = new Cart();
        // mechanism to create the cart id 
        this.cart.cartId = 1;
    },
    save: function (session) {
        this.cart = session.cart;
    },
    updateCart: function (productId, productQty) {
        this.cart.cartItem.push({
            'productId': productId,
            'productQty': productQty
        });
    },
    //deleteItem and other cart operations function goes here...
});
于 2015-11-24T19:04:37.950 回答