Was ist der AngularJS Weg Cookies zugreifen? Ich habe Referenzen zu einem Service und einem Modul für Cookies gesehen, aber keine Beispiele.Wie kann ich in AngularJS auf Cookies zugreifen?
Gibt es oder gibt es keine AngularJS kanonischen Ansatz?
aktualisiert Diese Antwort wurde bisher letzte stabile Version AngularJS zu reflektieren. Ein wichtiger Hinweis ist, dass $cookieStore ist eine dünne Hülle umgibt $cookies. Sie sind in etwa so, dass sie nur mit Session-Cookies arbeiten. Obwohl dies die ursprüngliche Frage beantwortet, gibt es andere Lösungen, die Sie wie die Verwendung von localstorage betrachten wollen, oder jquery.cookie-Plugin (das Sie mehr feinkörnige Kontrolle geben würde und serverseitige Cookies tun. Natürlich so in AngularJS tun bedeutet, dass Sie wahrscheinlich würde wollen, dass sie in einem Dienst wickeln und $scope.apply zu Modelle Winkel von Änderungen zu informieren verwenden (in einigen Fällen).
ein weiterer Hinweis und das ist, dass es einen kleinen Unterschied zwischen den beiden ist, wenn Daten herausziehen, je nach wenn Sie $cookie zu speichern Wert verwendet oder $cookieStore. natürlich würden Sie wirklich wollen, das eine oder andere verwenden.
Zusätzlich Bezug auf die js auf das Hinzufügen Datei, die Sieinjizieren müssen 10 in Ihre App Definition wie:
angular.module('myApp', ['ngCookies']);
sollten Sie dann gut zu gehen.
ist hier eine funktionelle minimal Beispiel, wo ich zeigen, dass cookieStore um Cookies eine dünne Hülle ist:
<!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>
Die Schritte sind:
angular.jsangular-cookies.jsngCookies in Ihr App-Modul (und stellen Sie sicher, dass Sie dieses Modul in der verweisen . OR - -cookieStore PUT/get Methodenng-app Attribut)
$cookies oder $cookieStore Parameter an die SteuerungDanke, ich habe meine Frage bearbeitet, zeige ein voll funktionsfähiges Beispiel. –
Diese Antwort funktioniert nicht mehr, Sie müssen stattdessen $ cookieStore verwenden, wie in einer anderen Antwort beschrieben. – Bill
Danke @Bill, du hast wahrscheinlich Recht, mit 1.2 Sachen hast sich höchstwahrscheinlich geändert. Ich werde es aktualisieren. –
http://docs.angularjs.org/api/ngCookies.$cookieStore
Händigen Sie http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js es zu benutzen.
Könnten Sie mir einen Hinweis geben, wie man darauf zugreifen kann, oder einen Link zu welcher Dokumentation, um das herauszufinden? Nachdem ich die angular-cookies.js-Datei in meinen HTML-Code eingefügt hatte, fügte ich der Signatur meines Controllers '$ cookieStore' hinzu (zB' function AccountCtrl ($ scope, $ cookieStore) '), aber dann folgende Fehlermeldung: Unbekannter Provider : $ cookieStoreProvider <- $ cookieStore –
Leider habe ich es nie benutzt, ich weiß nur, dass es existiert. Vielleicht sollten Sie auf der Google-Gruppe Angular nach einer schnelleren Antwort fragen. https://groups.google.com/forum/#!forum/angular –
Es stellt sich heraus, dass '$ cookieStore' anscheinend hauptsächlich für clientgenerierte Cookies gedacht ist. Um auf servergenerierte Cookies zugreifen zu können, musste ich stattdessen '$ cookies' verwenden. –
Dies ist, wie Sie festlegen und Cookie-Werte erhalten. Das war, was ich ursprünglich suchte, als ich diese Frage fand.
Hinweis wir $cookieStore statt $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 verwenden, habe ich zusammen eine JSFiddle dieser die $cookieStore, zwei Controllern, ein $rootScope und AngularJS 1.0.6. Es ist auf JSFifddle als http://jsfiddle.net/krimple/9dSb2/ als Basis, wenn Sie damit herumspielen ...
Der Kern ist:
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>
Angular veraltet$cookieStore in Version 1.4.x, so verwenden $cookies statt, wenn yo Sie verwenden die neueste Version von eckig. Syntax bleibt gleich für $cookieStore & $cookies:
$cookies.put("key", "value");
var value = $cookies.get("key");
die Docs für eine API-Übersicht. Beachten Sie auch, dass der Cookie-Service mit einigen neuen wichtigen Funktionen wie der Einstellung des Ablaufdatums (siehe this answer) und der Domain (siehe CookiesProvider Docs) erweitert wurde.
anzumerken, dass in der Version 1.3.x oder unten, $ Cookies als über eine andere Syntax hat:
$cookies.key = "value";
var value = $cookies.value;
Auch wenn Sie Bower verwenden, stellen Sie sicher, dass die korrekte Schreibweise Ihrer Paketnamen eingeben:
bower install [email protected]
wo XYZ ist die AngularJS-Version, die Sie ausführen. Es gibt ein anderes Paket in der Ecke "eckiger Keks" (ohne das "s"), das nicht das offizielle eckige Paket ist.
AngularJS bietet ngCookies Modul und $ cookieStore Service Browser-Cookies zu verwenden.
Wir brauchen Winkel cookies.min.js Datei hinzufügen Cookie-Funktion zu verwenden.
Hier ist eine Methode von AngularJS Cookie.
erhalten (Schlüssel); // Diese Methode gibt den Wert des angegebenen Cookie-Schlüssels zurück.
getObject (key); // Diese Methode gibt den deserialisierten Wert von Cookie-Schlüssel zurück.
getAll(); // Diese Methode gibt ein Schlüsselwertobjekt mit allen Cookies zurück.
put (key, value, [Optionen]); // Diese Methode legt einen Wert für den angegebenen Cookie-Schlüssel fest.
remove (Taste [Optionen]); // Diese Methode entfernt das angegebene Cookie.
Beispiel
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'); }]);
I Referenz vongenommen haben.
Die ursprüngliche akzeptierte Antwort erwähnt jquery.cookie plugin. Vor ein paar Monaten wurde es jedoch in js-cookie umbenannt und die jQuery-Abhängigkeit entfernt. Einer der Gründe war, einfach in andere Frameworks wie Angular zu integrieren.
Nun, wenn Sie mit Winkeln integrieren js-cookie wollen, ist es so einfach, wie so etwas wie:
module.factory("cookies", function() {
return Cookies.noConflict();
});
Und das ist es. Keine jQuery. Keine ngCookies.
Sie können auch benutzerdefinierte Instanzen erstellen, um bestimmte serverseitige Cookies zu behandeln, die anders geschrieben sind. Nehmen Sie zum Beispiel PHP, dass die Räume in der Server-Seite zu einem Pluszeichen + statt auch Prozent kodieren konvertieren es:
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, ' ')
});
});
Die Verwendung für einen benutzerdefinierten Provider wäre so etwas wie dieses:
module.service("customDataStore", [ "phpCookies", function(phpCookies) {
this.storeData = function(data) {
phpCookies.set("data", data);
};
this.containsStoredData = function() {
return phpCookies.get("data");
}
}]);
Ich hoffe, das hilft jedem.
Detaillierte Informationen in dieser Ausgabe: https://github.com/js-cookie/js-cookie/issues/103
Ausführliche Dokumentationen zu, wie mit Server-Seite zu integrieren, finden Sie hier: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md
hinzufügen Winkel Cookie lib: Winkel cookies.js
Sie können $ cookies - oder $ cookieStore - Parameter für den entsprechenden Controller verwenden.
Hauptcontroller fügen Sie diese inject 'ngCookies' hinzu:
angular.module("myApp", ['ngCookies']);
Cookies verwenden in Ihrem Controller wie auf diese Weise:
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'); }
Hier ist ein einfaches Beispiel $ Cookies. Nach dem Klicken auf die Schaltfläche wird der Cookie gespeichert und nach dem erneuten Laden der Seite wiederhergestellt.
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>
App.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");
};
}]);
})();
Das große Ding über angularjs ist wegen der Abhängigkeit injectiong Aspekt davon, können Sie Dinge wie ngCookies für Komponententests verspotten. Danke, dass du deine Schritte gemacht hast. –
@DanDoyon Ich versuche, die gleiche Sache aber in app.js innerhalb Config zu implementieren. aber ich bekomme "Uncaught Error: Unbekannter Provider: $ cookies" keine Ahnung. –
@ sutikshan-dubey nur Ihre Frage sehen, können Sie Codebeispiel bereitstellen? –