Question

我正在使用AngularJS框架工作。我很擅长使用这个框架;在过去，我只使用纯JavaScript和jQuery。该项目是一种适用于利基市场的网页设计师应用程序。

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

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

Answer 1

以下是一种代码片段：

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

Answer 2

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

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 All Together

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>

Answer 3

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

Answer 4

您将在Angular中使用该服务。服务是您向Angular注册的函数，该函数的作用是返回一个对象，该对象将一直存在，直到浏览器关闭/刷新为止。因此，它是一个存储状态的好地方，并且可以在状态发生变化时异步地将该状态与服务器同步。

Answer 5

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

如上文所述。会话使用工厂配方创建。

客户端会话也可以使用值提供程序配方进行维护。

请参阅我的帖子了解完整的详细信息。 session-tracking-in-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...
});

通过Angular.js维护会话

5 个答案: