W jaki sposób AngularJS ma dostęp do plików cookie? Widziałem odniesienia do usługi i modułu do plików cookie, ale nie ma przykładów.
Czy istnieje, czy nie istnieje podejście kanoniczne AngularJS?
angularjs
angular-cookies
Ellis Whitehead
źródło
źródło
Odpowiedzi:
Ta odpowiedź została zaktualizowana, aby odzwierciedlić najnowszą stabilną wersję angularjs. Jedną ważną uwagą jest to, że
$cookieStore
otoczka jest cienka$cookies
. Są prawie takie same, ponieważ działają tylko z sesyjnymi plikami cookie. Chociaż odpowiada to na pierwotne pytanie, istnieją inne rozwiązania, które warto rozważyć, takie jak użycie localstorage lub wtyczki jquery.cookie (co dałoby ci bardziej szczegółową kontrolę i robienie ciasteczek na serwerach. Oczywiście robiąc to w angularjs oznacza to, że prawdopodobnie chciałby zawinąć je w usługę i użyć$scope.apply
do powiadomienia kątowego o zmianach w modelach (w niektórych przypadkach).Jeszcze jedna uwaga, a mianowicie, że istnieje niewielka różnica między nimi podczas wyciągania danych, w zależności od tego, czy użyłeś
$cookie
do przechowywania wartości lub$cookieStore
. Oczywiście, naprawdę chcesz użyć jednego lub drugiego.Oprócz dodania odwołania do pliku js musisz wprowadzić
ngCookies
do definicji aplikacji, na przykład:powinieneś być gotowy do drogi.
Oto funkcjonalny minimalny przykład, w którym pokazuję, że
cookieStore
jest to cienkie opakowanie wokół plików cookie:Kroki są następujące:
angular.js
angular-cookies.js
ngCookies
do modułu aplikacji (i upewnij się, że odwołujesz się do tego modułu wng-app
atrybucie)$cookies
lub$cookieStore
do kontroleracookieStore
przy użyciu metod put / getźródło
W ten sposób można ustawić i uzyskać wartości plików cookie. Właśnie tego szukałem, kiedy znalazłem to pytanie.
Uwaga: używamy
$cookieStore
zamiast$cookies
źródło
Angular przestarzałe
$cookieStore
w wersji 1.4.x, więc użyj go,$cookies
jeśli używasz najnowszej wersji angular. Składnia pozostaje taka sama dla$cookieStore
&$cookies
:Omówienie interfejsu API można znaleźć w Dokumentach . Pamiętaj również, że usługa plików cookie została ulepszona o kilka nowych ważnych funkcji, takich jak ustawianie daty ważności (zobacz tę odpowiedź ) i domeny (patrz Dokumenty CookiesProvider ).
Pamiętaj, że w wersji 1.3.x lub niższej pliki cookie $ mają inną składnię niż wyżej:
Również jeśli używasz altany, upewnij się, że poprawnie wpisałeś nazwę swojej paczki:
gdzie XYZ jest uruchomioną wersją AngularJS. Jest jeszcze jeden pakiet w „angular-cookie” altany (bez „s”), który nie jest oficjalnym pakietem kątowym.
źródło
Do twojej wiadomości, JA przygotowałem JIDiddle tego, używając
$cookieStore
dwóch kontrolerów, a$rootScope
i AngularjS 1.0.6. Jest na JSFifddle jako http://jsfiddle.net/krimple/9dSb2/ jako baza, jeśli masz do czynienia z tym ...Jego istotą jest:
JavaScript
HTML
źródło
http://docs.angularjs.org/api/ngCookies.$cookieStore
Upewnij się, że podałeś http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js, aby go użyć.
źródło
$cookieStore
do podpisu mojego kontrolera (tj.function AccountCtrl($scope, $cookieStore)
), Ale następnie otrzymałem następujący komunikat o błędzie: Nieznany dostawca: $ cookieStoreProvider <- $ cookieStore$cookieStore
najwyraźniej jest przeznaczony głównie do plików cookie generowanych przez klientów. Aby uzyskać dostęp do plików cookie generowanych przez serwer, musiałem$cookies
zamiast tego użyć .https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js
) Zobacz wpis na blogu: blog.angularjs.org /AngularJS zapewnia moduł ngCookies i usługę $ cookieStore do korzystania z plików cookie przeglądarki.
Musimy dodać plik angular-cookies.min.js, aby móc korzystać z funkcji plików cookie.
Oto niektóre metody AngularJS Cookie.
Weź klucz); // Ta metoda zwraca wartość podanego klucza cookie.
getObject (klucz); // Ta metoda zwraca zdejrializowaną wartość danego klucza cookie.
getAll (); // Ta metoda zwraca obiekt wartości klucza ze wszystkimi ciasteczkami.
put (klucz, wartość, [opcje]); // Ta metoda ustawia wartość dla danego klucza cookie.
usuń (klucz, [opcje]); // Ta metoda usuwa podane ciasteczko.
Przykład
HTML
JavaScript
Wziąłem odniesienie z http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .
źródło
Dodaj plik cookie kątowy lib: angular-cookies.js
Możesz użyć parametru $ cookies lub $ cookieStore do odpowiedniego kontrolera
Główny kontroler dodaje nastrzyk „ngCookies”:
Używaj plików cookie w kontrolerze w następujący sposób:
źródło
Oryginalna zaakceptowana odpowiedź wspomina o wtyczce jquery.cookie . Kilka miesięcy temu zmieniono jego nazwę na js-cookie i usunięto zależność jQuery. Jednym z powodów było po prostu ułatwienie integracji z innymi frameworkami, takimi jak Angular.
Teraz, jeśli chcesz zintegrować plik cookie js z aplikacją kątową, jest to tak proste jak:
I to wszystko. Brak jQuery. Brak ciasteczek.
Możesz także tworzyć niestandardowe instancje do obsługi określonych po stronie serwera plików cookie, które są zapisywane inaczej. Weźmy na przykład PHP, który konwertuje spacje
po stronie serwera na znak plus
+
zamiast kodowania procentowego:Użycie niestandardowego dostawcy może wyglądać mniej więcej tak:
Mam nadzieję, że to pomoże każdemu.
Zobacz szczegółowe informacje w tym numerze: https://github.com/js-cookie/js-cookie/issues/103
Szczegółowe informacje na temat integracji z serwerem znajdują się tutaj: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md
źródło
Oto prosty przykład przy użyciu $ cookies. Po kliknięciu przycisku plik cookie jest zapisywany, a następnie przywracany po ponownym załadowaniu strony.
app.html:
app.js:
źródło