2013-02-19 4 views
56

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

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

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

ответ

56

Вот вид сниппета для вас:

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

+0

Могут ли данные сеанса храниться в локальном хранилище? В случае, если пользователь закрывает браузер и возвращается ... –

+5

Имейте в виду, что локальное хранилище совместно используется в субдоменах, поэтому немного не так безопасно. –

+0

так что в случае ур, если пользователь закрывает свой браузер, он все равно выйдет из системы? –

2

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

7

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

+1

Я использовал localStorage в другом проекте. И я должен сказать, что мне было очень полезно. Я рад, что у нас есть жизнеспособная замена файлов cookie.Он быстрый и имеет достаточно места для хранения, в отличие от файлов cookie, которые были медленными, поскольку мы должны были прочитать файл cookie из файла, и количество данных на файл cookie было очень ограниченным. Другим плюсом является то, что данные localStorage недоступны для междоменного доступа. Таким образом, ни один другой домен не может читать ваши данные и не конфликтует с именами переменных. Единственная проблема, которую я обнаружил, заключалась в том, что мы не могли указать срок действия. Надеюсь, они будут включены в будущие обновления. –

+0

@ Интернет-хранилище Jehanzeb.Malik дает вам возможность определить свой собственный срок действия. Просто добавьте ключевое значение с меткой времени и реализуйте свою собственную логику для перезаписи данных или просто 'window.localStorage.clear()', который вытирает все. – gertas

+0

В этом суть. Мы должны создать логику для истечения чего-либо из веб-хранилища. И наша логика будет работать только в том случае, если наш код (веб-страница) запущен в браузере, и в течение этого времени кодированный планировщик решает истечь и удалить данные. Мне требуется истечение срока действия данных в большинстве веб-приложений, которые я разрабатываю. «Если« большинство общих приложений, разработанных для Интернета, требуют функциональности, чем должны быть реализованы и стандартизованы браузерами. Эти мелочи экономят много времени для разработчиков. –

8

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

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); 

Отправить обратно только сеансовую переменные, которые вы хотите в Угловом не все из них не хочет, чтобы выставить больше, чем необходимо.

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> 
0

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

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

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

Для получения более подробной информации, пожалуйста, обратитесь к моему сообщению. 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... 
}); 
Смежные вопросы