web-dev-qa-db-ja.com

Angular.jsによるセッションの維持

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

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

ユーザーがサインインすると、データベースのデータを使用してセッションがロードされます。ユーザーが[保存]ボタンをクリックすると、セッションデータでデータベースが更新されます。誰かがバックボーンに似たAngularでセッションを維持できると私に言った。これは可能ですか？はいの場合、ディレクティブまたはUIに焦点を当てていないチュートリアルに私を向けてください。これが不可能な場合、他に実行可能なオプションはありますか？

sessionangularjs
60
Jehanzeb.Malik

以下がスニペットです。

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

58
Valentyn Shybanov

アンギュラーのより安定したバージョンでは答えがもはや有効ではないため、新しいソリューションを投稿しています。

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は、すべてのコードで使用するセッション変数であるため、rootScopeを使用します。

HTML

Html内でセッションを参照できます

<html ng-app="StarterApp">

<body ng-controller="AppCtrl">
{{ session.variable }}
</body>
9
Demodave

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

8
gertas

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

3
Anders Ekdahl

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

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

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

完全な詳細については私の投稿を参照してください。 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...
});
0
Yogesh