AngularJS入門教程之Cookies讀寫操作示例
更新時間：2016年11月02日 11:03:18 作者：Rongbo_J
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實例形式分析了ngCookies模塊與get和put方法進(jìn)行cookie讀寫操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了AngularJS的Cookies讀寫操作。分享給大家供大家參考，具體如下：
雖然使用JavaScript創(chuàng)建和獲取Cookie很簡單，AngularJS還是把它作為一個單獨的模塊進(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讀寫相關(guān)的服務(wù)$cookieStore注入到控制器中。通過$cookieStore的get和put方法進(jìn)行讀和寫操作。
我們看一個完整的案例：
<!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>
在頁面加載時我們寫入Cookies信息，cookie名為person，值為{name:"Rongbo_J",age:23}，點擊按鈕獲取cookie信息并以對話框的形式彈出。
接下來看一下效果：
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了詳解在 Angular 項目中添加插件 ng-bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
詳解AngularJS中$http緩存以及處理多個$http請求的方法
$http 是 AngularJS 中的一個核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，通過本文給大家介紹AngularJS中$http緩存以及處理多個$http請求的方法，希望的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要為大家詳細(xì)介紹了AngularJS依賴注入模擬實現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
詳解angularJS動態(tài)生成的頁面中ng-click無效解決辦法
這篇文章主要介紹了詳解angularJS動態(tài)生成的頁面中ng-click無效解決辦法，非常具有實用價值，需要的朋友可以參考下2017-06-06
本文主要介紹 AngularJS SQL,這里給大家整理了相關(guān)資料，并提供了實例代碼,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了Angular組件化管理實現(xiàn)方法,結(jié)合具體實例分析了Angular模塊組件化管理以提高代碼復(fù)用性的實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Angular.js中ng-include用法及多標(biāo)簽頁面的實現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁面的實現(xiàn)方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
Angular應(yīng)用打包和部署實現(xiàn)過程詳解
這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
AngularJs unit-testing（單元測試）詳解
本文主要介紹AngularJs unit-testing（單元測試）的內(nèi)容，這里整理了單元測試的知識，及示例代碼，有興趣的朋友可以參考下2016-09-09
本篇文章主要介紹了angular寫一個列表的選擇全選交互組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01