动用Yeoman搭建 AngularJS 应用 (12) —— 让大家搭建三个网页应用

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

安装Bower程序包

大家采纳另多个Angular模块,”angular-local-storage”
然后让我们快捷的搭建三个本地存储。这一次,轮到Bower来大显神通。

运营上面的吩咐

bower install --save angular-local-storage

图片 1

增加本地存储

如同我们添加的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的值,若是有个旁人增进只怕去除1个要素,它将异步的保留本地存储。

由此,我们要求删除当前的$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的列表,可是我们还不曾存值

图片 2

累加一些todo成分到todo列表中

图片 3

至今,大家刷新浏览器,大家认可大家的多少是否存在与地点存储。大家检查Chrome中的Resources选项然后采纳Local
Storage。

图片 4

持续求学

为了具备更强有力的出力,我们可以访问上面的财富

  • 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.