使用Yeoman搭建 AngularJS 應用 (12) —— 讓咱們搭建一個網頁應用

原文地址：http://yeoman.io/codelab/local-storage.html

安裝Bower程序包

咱們使用另外一個Angular模塊，"angular-local-storage" 而後讓咱們快速的搭建一個本地存儲。此次，輪到Bower來大顯神通。

運行下面的命令

bower install --save angular-local-storage

添加本地存儲

就像咱們添加的jQuery和AngularUI Sortable那樣，咱們須要添加angular-local-storage.js到index.html中

咱們使用Ctrl+C按鍵組合來退出當前的命令行應用程序，而後從新運行grunt server來自動生成index.html

在index.html底部，會添加下面的語句

<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>

你的index.html中script段落以下所示

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-sortable/sortable.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<!-- endbower -->
<!-- endbuild -->

編輯mytodoApp應用程序來包含LocalStorageModule適配器 （scripts/app.js）

angular
  .module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.sortable',
    'LocalStorageModule'
])

在app.js裏，你也要配置ls來配置localStorageServiceProvider

.config(['localStorageServiceProvider', function(localStorageServiceProvider){
  localStorageServiceProvider.setPrefix('ls');
}])

咱們的應用模塊如今看起來像這樣

'use strict';

angular
  .module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.sortable',
    'LocalStorageModule'
  ])
  .config(['localStorageServiceProvider', function(localStorageServiceProvider){
    localStorageServiceProvider.setPrefix('ls');
  }])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

也須要更新控制器(main.js)，添加localStorageServcice

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope, localStorageService) {
    // (code hidden here to save space)
  });

如今爲止，咱們讀取的todos是硬編碼的，咱們將從本地存儲來獲取$scope.todos來代替

我將使用angular的$watch監聽來監聽$scope.todos的值，若是一些人添加或者刪除一個元素，它將異步的保存本地存儲。

所以，咱們須要刪除當前的$scope.todos聲明

$scope.todos = [];

替代爲

var todosInStore = localStorageService.get('todos');

$scope.todos = todosInStore || [];

$scope.$watch('todos', function () {
  localStorageService.set('todos', $scope.todos);
}, true);

咱們的控制器如今以下所示

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope, localStorageService) {

    var todosInStore = localStorageService.get('todos');

    $scope.todos = todosInStore || [];

    $scope.$watch('todos', function () {
      localStorageService.set('todos', $scope.todos);
    }, true);

    $scope.addTodo = function () {
      $scope.todos.push($scope.todo);
      $scope.todo = '';
    };

    $scope.removeTodo = function (index) {
      $scope.todos.splice(index, 1);
    };

  });

如今打開瀏覽器，你將看到列表中沒有值，這個app從本地存儲中初始化了todos的列表，可是咱們尚未存值

添加一些todo元素到todo列表中

如今，咱們刷新瀏覽器，咱們確認咱們的數據是否是存在與當地存儲。咱們檢查Chrome中的Resources選項而後選擇Local Storage。

繼續深造

爲了擁有更強大的功能，咱們能夠訪問下面的資源

• AngularJS (angularjs.org) helped us write this Todo app quickly and with elegance. To dig deeper into the sweet spots of AngularJS, take a look at the detailed documentation.

• Grunt (gruntjs.com) has tasks for almost anything you might like to do with your app, whether it’scompiling CoffeeScript or hooking up your app to custom middleware like PHP or Express. Your Yeoman app already has a Gruntfile.js already set up for you so read up on how to configure more Grunt tasks here.

• Bower (bower.io) has a growing collection of easily installable packages for adding capabilities to your app. View all the packages available through Bower's registry here.

• Yeoman is always evolving. Be sure to check out yeoman.io for more information and follow@yeoman and +Yeoman to stay up to date.