angular.jsをやってみる (10) - ngCookies -

http://docs.angularjs.org/api/ngCookies を使えばCookie的な利用をする事も出来るらしい。っていう事で使ってみた

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-cookies.js"></script>
  </head>
  <body>
    <div ng-view />
    <script src="app.js"></script>
  </body>
</html>

ngCookiesを使うにはangular-cookies.jsを利用するようにしておく

app.js

angular.module("app", ["ngRoute", "ngCookies"])
  .config(function($routeProvider) {
    $routeProvider
      .when("/list", {
        templateUrl: "list.html",
        controller: "ListController"
      })
      .when("/show/:n", {
        templateUrl: "show.html",
        controller: "ShowController"
      })
      .otherwise({ redirectTo: "/list" });
  })
  // #/listで転移された際に#/show/{n}で突っ込まれた$routeParamsなパラメーターを$scopeに突っ込む
  .controller("ListController", function($scope, $cookies, $cookieStore) {
    var n = $cookies.n;
    $scope.lastest = n;
    $scope.entries = ["1", "2"];

    $cookieStore.remove("n");
  })
  // #/show/{n}で転移された際に$routeParamsのパラメーターを$cookieStoreで突っ込む
  .controller("ShowController", function($cookieStore, $routeParams) {
    $cookieStore.put("n", parseInt($routeParams.n));
  });

であとはlist.html側でlastestを参照して前回見たのをCSSでafter contentをする

<ul>
  <li ng-repeat="entry in entries">
    <a href="/#/show/{% raw %}{{entry}}{% endraw %}" ng-class="{active: entry == lastest}">link{% raw %}{{entry}}{% endraw %}</a>
  </li>
</ul>
<style type="text/css">
.active:after {
  content: "★";
}

以上。上記のような事をした場合だと

#/listで一覧を参照する
#/show/{n}で固定なのを見る。ここでcookieにパラメーターをマークする
#/listに戻った際にcookieにマークしたパラメーターを参照してマッチするのであればng-classでactiveなCSSクラスをマークする(でその際cookieStore.removeしているのでリロードすると参照はできなくなる)

っていう事になる。つまり上記のlist.htmlでやってる.active:afterな辺りの★は#/show/{n}から戻ってきた直後は参照されるけど、その後に$cookieStore.removeされてるのでリロードすると参照されなくなる

んまぁ検証要件が非常に微妙ではあるけれども、コントローラーをまたいで値を共有したりする際とかに使えるんですかねと

ちなみに関係あるのかは微妙だしangular-cookie.jsのソース見てないけど、Cookieヘッダーのhttponlyがついてる場合とかだとどうなんだろうなと