Поддержание сессии через Angular.js

Я работаю над проектом с использованием рамки AngularJS. Я новичок в использовании этой структуры; в прошлом я работал только с чистым JavaScript и jQuery. Проект представляет собой своего рода приложение для веб-дизайнеров для нишевого рынка.

Когда пользователь перемещается между страницами во время проектирования, я хочу сохранить сеанс всех изменений, которые они создают.

Теперь, если пользователь подписывается, мы загружаем сеанс, используя данные из базы данных. Когда пользователь нажимает кнопку "Сохранить", мы обновляем базу данных с данными сеанса. Кто-то сказал мне, что я могу поддерживать сеанс в Angular, подобный основному. Это возможно? Если да, можете ли вы направить меня в учебник, который не фокусируется на директивах или пользовательском интерфейсе? Если это невозможно, существуют ли другие жизнеспособные варианты?

Ответы

Ответ 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

Ответ 2

Вы также можете попытаться сделать сервис на основе window.sessionStorage или window.localStorage, чтобы сохранить информацию о состоянии между перезагрузкой страницы. Я использую его в веб-приложении, которое частично выполняется в AngularJS, а URL-адрес страницы изменен в "старом" для некоторых частей рабочего процесса. Веб-хранилище поддерживается даже IE8. Здесь angular-webstorage для удобства.

Ответ 3

Поскольку ответ более недействителен с более стабильной версией 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; 
    });
});
  • Сделайте простой доступ к сеансам, используя factory.
  • Если вы хотите сделать это, чтобы страница не была видна, когда вы просто переходите к ней в браузере, вы можете просто упростить ее.
  • Добавьте factory в контроллер
  • Я использую rootScope, потому что это переменная сеанса, которую я использую во всем моем коде.

HTML

Внутри вашего html вы можете ссылаться на свою сессию

<html ng-app="StarterApp">

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

Ответ 4

Вы использовали бы службу для Angular. Служба - это функция, которую вы регистрируете с помощью Angular, и это задание функций - вернуть объект, который будет жить, пока браузер не будет закрыт/обновлен. Таким образом, это хорошее место для хранения состояния и синхронизация этого состояния с сервером асинхронно по мере изменения этого состояния.

Ответ 5

Обычно для случая использования, который включает в себя последовательность страниц, а на заключительном этапе или странице мы отправляем данные на сервер. В этом сценарии нам нужно поддерживать состояние. В приведенном ниже фрагменте мы поддерживаем состояние на стороне клиента.

Как упоминалось в вышеприведенном сообщении. Сеанс создается с помощью factory рецепта.

Сессия на стороне клиента может поддерживаться также с помощью рецепта поставщика значений.

Пожалуйста, обратитесь к моему сообщению за подробной информацией. session-tracking-in-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...
});