每天学习一点点,成功增加一大步

AngularJS 的 AngularJS-Cookies module 的使用

AngularJS zhanghui 595℃

我前两天在做实践学习时,正好需要用到 cookies 来存放用户的在线数据,在这用到了 AngularJS 的另外一个模块叫 AngularJS-cookies,它的使用与 JQUERY 的 jquery-cookies 模块有点类似,但不同的是 AngularJS 在使用时多了一步要注入到 controller 的过程,jquery 则是直接引用 jquery-cookies 就可以用了。网络上虽然有很多的资料,但都只是复制没有对可执行的进行过调试,所以我在做实践学习时就遇到一时难以解惑的郁闷,但最后通过反复的调试才弄清,那么就笔录下

Step1 – include cookies module
首先是在页面中加载JS文件,并且依赖 cookie module

<script src="http://……/angular.min.js"></script>
<script src="http://……/angular-cookies.min.js"></script>

然后在创建 angular module 时进行依赖注入 cookies module

 var app = angular.module('pkcms', ["ngCookies"]);

Step2 – Inject into controller
将cookie module 注入到 controller 中,这步的过程是要分两种场景,网络上对场景的使用模糊不清,这两种不同的场景。
第一种是在 AngularJS 自带常规的 controller 的注入

 app.controller("indexCtrl", ['$cookieStore', 'app_name', '$scope',
        function ($cookieStore, app_name, $scope) {
            ……
        }])

这种的引用要注意是 module 注入的名不能乱放,要 ‘$cookieStore’, ‘app_name’, ‘$scope’ 与 function 里面的 $cookieStore, app_name, $scope 在前后位置上要对上不能左右乱放,如果出现 app_name, $cookieStore 这样会与 ‘$cookieStore’, ‘app_name’ 对不上就会出现错误,这是禁忌,我看到网上很多的写法都是乱的,要么是版本不同,只复制传播的关系。
第二种是在 AngularJS 的第三方插件 ui-view 下的深层次路由场景下 controller 的注入

 app.controller("loginCtrl", loginCtrlFn);
    function loginCtrlFn($http, $cookieStore, $state) {
        ……
    }

Step 3 – Using the $cookieStore
现在可以使用 ‘put’ 、 ‘get’ 、‘remove’ 方法操作 cookie , $cookieStore 可以直接存储对象到cookie中,它会使用angularjs 的 toJson/fromJson 自动序列化和反序列化

 $cookieStore.put("name","my name");
$cookieStore.get("name") == "my name";
$cookieStore.remove("name");

$cookieStore.put("persion", {
            name: "my name",
            age: 18
});

scope.person = $cookieStore.get("persion");

转载请注明:隨習筆記 » AngularJS 的 AngularJS-Cookies module 的使用