AngularJS入門(mén)教程之Cookies讀寫(xiě)操作示例
本文實(shí)例講述了AngularJS的Cookies讀寫(xiě)操作。分享給大家供大家參考，具體如下：
雖然使用JavaScript創(chuàng)建和獲取Cookie很簡(jiǎn)單，AngularJS還是把它作為一個(gè)單獨(dú)的模塊進(jìn)行了封裝，模塊名為ngCookies，和前面的教程中做法一樣，先引入angular-cookies.js：
<script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>
然后將ngCookies模塊注入到我們自定義的模塊中：
var cookiesMod = angular.module("cookiesMod",['ngCookies']);
這里我們需要把Cookies讀寫(xiě)相關(guān)的服務(wù)$cookieStore注入到控制器中。通過(guò)$cookieStore的get和put方法進(jìn)行讀和寫(xiě)操作。
我們看一個(gè)完整的案例：
<!DOCTYPE html>
<html ng-app="cookiesMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<script type="text/javascript" src="angular-1.3.0.14/angular-cookies.js"></script>
<title>tutorial08</title>
</head>
<body ng-controller="CookiesController" ng-init="init()">
<button ng-click="getInfo()">獲取Cookies信息</button>
</body>
<script>
var cookiesMod = angular.module("cookiesMod",['ngCookies']);
cookiesMod.controller("CookiesController",function($scope,$log,$cookieStore){
$scope.init = function()
{
$log.info("init functionn");
$cookieStore.put("person",{name:"Rongbo_J",age:23});
}
$scope.getInfo = function()
{
var person = $cookieStore.get("person") ;
alert("name : " + person.name +" , "+ "age : " + person.age);
}
});
</script>
</html>
在頁(yè)面加載時(shí)我們寫(xiě)入Cookies信息，cookie名為person，值為{name:"Rongbo_J",age:23}，點(diǎn)擊按鈕獲取cookie信息并以對(duì)話框的形式彈出。
接下來(lái)看一下效果：
AngularJS源碼可點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
詳解在Angular項(xiàng)目中添加插件ng-bootstrap
這篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加插件 ng-bootstrap，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
詳解AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法
$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，通過(guò)本文給大家介紹AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法，希望的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要為大家詳細(xì)介紹了AngularJS依賴注入模擬實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
詳解angularJS動(dòng)態(tài)生成的頁(yè)面中ng-click無(wú)效解決辦法
這篇文章主要介紹了詳解angularJS動(dòng)態(tài)生成的頁(yè)面中ng-click無(wú)效解決辦法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
AngularJS入門(mén)教程中SQL實(shí)例詳解
本文主要介紹 AngularJS SQL,這里給大家整理了相關(guān)資料，并提供了實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了Angular組件化管理實(shí)現(xiàn)方法,結(jié)合具體實(shí)例分析了Angular模塊組件化管理以提高代碼復(fù)用性的實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
Angular應(yīng)用打包和部署實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實(shí)現(xiàn)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
AngularJs unit-testing（單元測(cè)試）詳解
本文主要介紹AngularJs unit-testing（單元測(cè)試）的內(nèi)容，這里整理了單元測(cè)試的知識(shí)，及示例代碼，有興趣的朋友可以參考下2016-09-09
angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例
本篇文章主要介紹了angular寫(xiě)一個(gè)列表的選擇全選交互組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01