使用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.