Поддержание сеанса через угловой.js

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

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

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

5 59
angularjs session

5 ответов:

вот своего рода фрагмент для вас:

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

поскольку ответ больше не действителен с более стабильной версией angular, я публикую более новое решение.

PHP страница: сессия.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>
9

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

7

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

3

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

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

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

пожалуйста, обратитесь к моему сообщению для полного подробности. session-tracking-in-angularjs

давайте возьмем пример корзины покупок, которую нам нужно поддерживать на разных страницах / AngularJS controller.

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

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

'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