Что такое способ AngularJS для доступа к файлам cookie? Я видел ссылки как на службу, так и на модуль для куки-файлов, но примеров не было.Как получить доступ к файлам cookie в AngularJS?
Есть ли, или нет канонического подхода AngularJS?
Этот ответ был обновлен, чтобы отразить последнюю стабильную версию angularjs. Важно отметить, что $cookieStore - это тонкая обертка, окружающая $cookies. Они почти одинаковы, поскольку они работают только с сеансовыми файлами. Хотя, это отвечает на исходный вопрос, есть другие решения, которые вы, возможно, пожелаете рассмотреть, например, использование localstorage или jquery.cookie plugin (что даст вам более тонкий контроль и сделает cookie с серверами. Разумеется, это в angularjs означает, что вы вероятно, захочет обернуть их в службу и использовать $scope.apply, чтобы уведомить угловое изменение моделей (в некоторых случаях).
Еще одно замечание: между ними возникает небольшая разница при извлечении данных в зависимости от если вы использовали $cookie к стоимости магазина или $cookieStore. Конечно, вы действительно хотите использовать один или другой.
в дополнение к добавлению ссылки на JS файл, который нужно вводить ngCookies в определение вашего приложения, такое как:
angular.module('myApp', ['ngCookies']);
Вы должны быть добры идти.
Вот функциональный минимальный пример, где я показываю, что cookieStore тонкая оболочка вокруг печенья:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">
<h3>Cookies</h3>
<pre>{{usingCookies|json}}</pre>
<h3>Cookie Store</h3>
<pre>{{usingCookieStore|json}}</pre>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script>
angular.module('myApp', ['ngCookies']);
app.controller('MyController',['$scope','$cookies','$cookieStore',
function($scope,$cookies,$cookieStore) {
var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};
$cookies.dotobject = someSessionObj;
$scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };
$cookieStore.put('obj', someSessionObj);
$scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
}
</script>
</body>
</html>
Шаги:
angular.jsangular-cookies.jsngCookies в свой модуль приложения (и убедитесь, что вы ссылаетесь на этот модуль в ng-app атрибут)$cookies или $cookieStore параметра в контроллерcookieStore использованием пут/получить методыСпасибо, я редактировал мой вопрос, показывая полный рабочий пример. –
Этот ответ больше не работает, вам нужно использовать $ cookieStore, как описано в другом ответе. – Bill
Спасибо @Bill, вы, вероятно, правы, и 1.2 вещи, скорее всего, изменились. Я обновлю его. –
http://docs.angularjs.org/api/ngCookies.$cookieStore
Убедитесь, что Вы http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js использовать его.
Не могли бы вы дать подсказку о том, как получить к нему доступ, или ссылку на документацию, которая мне нужна, чтобы понять это? После включения файла angular-cookies.js в мой HTML я добавил '$ cookieStore' подпись моего контроллера (например,' function AccountCtrl ($ scope, $ cookieStore) '), но затем получите следующее сообщение об ошибке: Неизвестный поставщик : $ cookieStoreProvider <- $ cookieStore –
К сожалению, я никогда не использовал его, я просто знаю, что он существует. Возможно, вам нужно запросить у Angular google группу для более быстрого ответа. https://groups.google.com/forum/#!forum/angular –
Оказывается, что '$ cookieStore', по-видимому, в основном предназначен для файлов cookie, созданных клиентом. Чтобы получить доступ к файлам cookie, созданным сервером, вместо этого мне пришлось использовать '$ cookies'. –
Вот как вы можете установить и получить значения cookie. Это то, что я изначально искал, когда нашел этот вопрос.
Примечание мы используем $cookieStore вместо $cookies
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>
<script>
angular.module('myApp', ['ngCookies']);
function CookieCtrl($scope, $cookieStore) {
$scope.lastVal = $cookieStore.get('tab');
$scope.changeTab = function(tabName){
$scope.lastVal = tabName;
$cookieStore.put('tab', tabName);
};
}
</script>
</head>
<body ng-controller="CookieCtrl">
<!-- ... -->
</body>
</html>
FYI, я собрал JSFiddle это с помощью $cookieStore, два контроллера, а $rootScope и AngularjS 1.0.6. Это на JSFifddle как http://jsfiddle.net/krimple/9dSb2/ в качестве базы, если вы возитесь с этим ...
Суть его является:
Javascript
var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('CookieCtrl', function ($scope, $rootScope, $cookieStore) {
$scope.bump = function() {
var lastVal = $cookieStore.get('lastValue');
if (!lastVal) {
$rootScope.lastVal = 1;
} else {
$rootScope.lastVal = lastVal + 1;
}
$cookieStore.put('lastValue', $rootScope.lastVal);
}
});
myApp.controller('ShowerCtrl', function() {
});
HTML
<div ng-app="myApp">
<div id="lastVal" ng-controller="ShowerCtrl">{{ lastVal }}</div>
<div id="button-holder" ng-controller="CookieCtrl">
<button ng-click="bump()">Bump!</button>
</div>
</div>
Угловая осуждается$cookieStore в версии 1.4.x, поэтому используйте $cookies вместо этого, если Эй u использует последнюю версию углового. Синтаксис остается одинаковым для $cookieStore & $cookies:
$cookies.put("key", "value");
var value = $cookies.get("key");
Смотрите Docs для обзора API. Имейте в виду также, что служба cookie была усовершенствована некоторыми новыми важными функциями, такими как установка срока действия (см. this answer) и домен (см. CookiesProvider Docs).
Обратите внимание, что, в версии 1.3.x или ниже $ печенье имеет другой синтаксис, чем выше:
$cookies.key = "value";
var value = $cookies.value;
Кроме того, если вы используете беседку, убедитесь, правильно введите имя пакета:
bower install [email protected]
где XYZ - версия AngularJS, в которой вы работаете. В пакете «угловое печенье» (без «s») есть еще один пакет, который не является официальным угловым пакетом.
AngularJS предоставляет модуль ngCookies и службу cookieStore для использования Cookie-браузера.
Нам нужно добавить файл угловых файлов cookie.min.js, чтобы использовать функцию cookie.
Вот какой-то метод AngularJS Cookie.
get (ключ); // Этот метод возвращает значение данного ключа cookie.
getObject (ключ); // Этот метод возвращает десериализованное значение заданного файла cookie.
getAll(); // Этот метод возвращает объект значения ключа со всеми куками .
положить (ключ, значение, [опции]); // Этот метод устанавливает значение для заданного файла cookie.
удалить (ключ, [опции]); // Этот метод удаляет данный cookie.
Пример
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
</head>
<body ng-controller="MyController">
{{cookiesUserName}} loves {{cookietechnology}}.
</body>
</html>
JavaScript
var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', ['$scope', '$cookies', '$cookieStore', '$window', function($scope, $cookies, $cookieStore, $window) {
$cookies.userName = 'Max Joe';
$scope.cookiesUserName = $cookies.userName;
$cookieStore.put('technology', 'Web');
$scope.cookietechnology = $cookieStore.get('technology'); }]);
Я Взятые ссылку от http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php.
Оригинальный принятый ответ упоминает jquery.cookie plugin. Несколько месяцев назад, однако, он был переименован в js-cookie, а зависимость jQuery удалена. Одной из причин было просто упростить интеграцию с другими системами, такими как Angular.
Теперь, если вы хотите интегрировать js-cookie с угловатой, это так же просто, как что-то вроде:
module.factory("cookies", function() {
return Cookies.noConflict();
});
И это все. Нет jQuery. Нет ngCookies.
Вы также можете создавать собственные экземпляры для обработки конкретных файлов cookie на стороне сервера, которые написаны по-разному. Возьмем, к примеру PHP, который преобразует пробелы в стороне сервера в знак плюс + вместо также процентов закодировать его:
module.factory("phpCookies", function() {
return Cookies
.noConflict()
.withConverter(function(value, name) {
return value
// Decode all characters according to the "encodeURIComponent" spec
.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent)
// Decode the plus sign to spaces
.replace(/\+/g, ' ')
});
});
Использование для пользовательского поставщика будет что-то вроде этого:
module.service("customDataStore", [ "phpCookies", function(phpCookies) {
this.storeData = function(data) {
phpCookies.set("data", data);
};
this.containsStoredData = function() {
return phpCookies.get("data");
}
}]);
Я надеюсь, что это поможет кому угодно.
Показать подробную информацию в этом выпуске: https://github.com/js-cookie/js-cookie/issues/103
За подробными документы о том, как интегрировать с серверной стороной, смотрите здесь: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md
Добавить угловое печенье LIB: угловой-cookies.js
Вы можете использовать $ cookies или $ cookieStore для соответствующего контроллера.
Главный контроллер добавить это инъекционное «ngCookies»:
angular.module("myApp", ['ngCookies']);
Использование Cookies в контроллере, как таким образом:
app.controller('checkoutCtrl', function ($scope, $rootScope, $http, $state, $cookies) {
//store cookies
$cookies.putObject('final_total_price', $rootScope.fn_pro_per);
//Get cookies
$cookies.getObject('final_total_price'); }
Вот простой пример использования $ печенье. После нажатия на кнопку cookie сохраняется, а затем восстанавливается после перезагрузки страницы.
app.html:
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController as vm">
<input type="text" ng-model="vm.food" placeholder="Enter food" />
<p>My favorite food is {{vm.food}}.</p>
<p>Open new window, then press Back button.</p>
<button ng-click="vm.openUrl()">Open</button>
</body>
</html>
приложение.js:
(function() {
"use strict";
angular.module('app', ['ngCookies'])
.controller('appController', ['$cookies', '$window', function ($cookies, $window) {
var vm = this;
//get cookie
vm.food = $cookies.get('myFavorite');
vm.openUrl = function() {
//save cookie
$cookies.put('myFavorite', vm.food);
$window.open("http://www.google.com", "_self");
};
}]);
})();
Отличная вещь, связанная с угловыми углами, из-за ее зависимости от азартности, вы можете издеваться над такими вещами, как ngCookies для модульного тестирования. Спасибо, что поставили свои шаги. –
@DanDoyon Я пытаюсь внедрить то же самое, но в app.js внутри config. но я получаю сообщение «Uncaught Error: Unknown provider: $ cookies» любой подсказки. –
@ sutikshan-dubey просто видя ваш вопрос, можете ли вы предоставить образец кода? –