60

私はAngularJSフレームワークを使用してプロジェクトに取り組んでいます。私はこのフレームワークを使用するのはかなり新しいです。これまで、私は純粋なJavaScriptとjQueryのみを使用していました。このプロジェクトは、ニッチ市場向けの一種のWebデザイナーアプリケーションです。

ユーザーがデザイン中にページ間を移動するときに、ユーザーが行っているすべての変更のセッションを維持したいと思います。

ここで、ユーザーがサインインすると、データベースのデータを使用してセッションが読み込まれます。ユーザーが保存ボタンをクリックすると、セッションデータでデータベースが更新されます。バックボーンと同様に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 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>
于 2015-08-19T15:11:24.580 に答える
8

また、ページのリロード間で状態情報に基づいてサービスを作成したり、状態情報を保持しwindow.sessionStorageたりすることもできます。window.localStorage部分的にAngularJSで作成されたWebアプリで使用しており、ワークフローの一部で「古い方法」でページのURLが変更されています。WebストレージはIE8でもサポートされています。これが便利なangular-webstorageです。

于 2013-08-23T14:08:09.483 に答える
3

Angularではそのためのサービスを使用します。サービスはAngularに登録する関数であり、その関数のジョブは、ブラウザーが閉じられるか更新されるまで存続するオブジェクトを返すことです。したがって、状態を格納し、状態の変化に応じてその状態をサーバーと非同期に同期するのに適した場所です。

于 2013-02-19T12:42:03.030 に答える
0

通常、一連のページを含むユースケースの場合、最終段階またはページでデータをサーバーに送信します。このシナリオでは、状態を維持する必要があります。以下のスニペットでは、クライアント側の状態を維持しています

上記の投稿で述べたように。セッションは、ファクトリレシピを使用して作成されます。

クライアント側のセッションは、バリュープロバイダーのレシピを使用して維持することもできます。

詳細については、私の投稿を参照してください。 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...
});
于 2015-11-24T19:04:37.950 に答える