原文地址: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.

使用Yeoman搭建 AngularJS 应用 (12) —— 让我们搭建一个网页应用的更多相关文章

  1. 使用Yeoman搭建 AngularJS 应用 (5) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/scaffold-app.html 基架 (Scaffolding) 在Yeoman中的意思是为基于你特殊的配置需求,为网站程序生成文件的工 ...

  2. 使用Yeoman搭建 AngularJS 应用 (4) —— 让我们搭建一个网页应用

    在开发一个的网页传统工作流程中,你需要大量的时间去设置引用文件,下载依赖文件,并且手动的创建网页文件结构.Yeoman生成器将会帮助你完成这些.让我们安装一个AngularJS项目的生成器. 安装An ...

  3. 使用Yeoman搭建 AngularJS 应用 (2) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/index.html 使用Yeoman搭建简单的应用 今天将会搭建一个简单的网页程序.你将可以添加,删除,拖拽和保存. 浏览Yeoman Y ...

  4. 使用Yeoman搭建 AngularJS 应用 (11) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/prepare-production.html 让我们发布这个应用 优化产品的文件 为了创建应用的产品版本,我们想做如下的事情 检查你的代码 ...

  5. 使用Yeoman搭建 AngularJS 应用 (10) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/write-unit-tests.html 对于不熟悉的Karma的人来说,这是JavaScript测试框架,这个Angular的生成器包含 ...

  6. 使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/install-packages.html 列出当前程序包 我们现在查看一下我们已经安装的程序包,输入下面的命令 bower list 查找 ...

  7. 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/write-app.html 创建一个新的模板来显示一个todo的列表 打开views/main.html 为了从一个干净的模板开始,删除m ...

  8. 使用Yeoman搭建 AngularJS 应用 (7) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/preview-inbrowser.html 开启你的服务 运行Grunt任务,通过输入下面的命令来创建一个本地Node的http服务,地址 ...

  9. 使用Yeoman搭建 AngularJS 应用 (6) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/review-generated-files.html 打开mytodo文件夹,你会看到现在的基架.如下图所示 在mytodo文件夹,我们能 ...

随机推荐

  1. sublime text修改TAB缩进为空格

    在sublime text中将TAB缩进直接转化为4个空格,可以按照如下方式操作: 菜单栏: Preferences -> Settings – More -> Syntax Specif ...

  2. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. Linux 命令 - rm: 删除文件和目录

    命令格式 rm [OPTION]... FILE... 命令参数 -f, --force 强制删除,忽略不存在的文件,不会提示. -i, --interactive 没次删除文件时,提示用户确认. - ...

  4. 【TOMCAT】Tomcat gzip压缩传输数据

    概述 由于我们项目的三维模型文件非常大,为了提高传输速度,在服务端对其做zip压缩处理非常有必要,能够极大的提高传输速度. 配置 首先需要修改web.xml中请求的数据文件的mime类型的mappin ...

  5. sql常识-FULL JOIN

    SQL FULL JOIN 关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行. FULL JOIN 关键字语法 SELECT column_name(s) FROM table_n ...

  6. Agile.Net 组件式开发平台 - 数据报表组件

    Agile.Report.dll 文件为平台数据报表支持库,基于FasstReport.Net扩展重写,提供了非常强大的自定义报表的功能使开发者为应用程序快速有效地生成报表.报表类库提供了创建报表所需 ...

  7. ubuntu 更新软件源

    ubuntu 更新软件源 修改文件sources.list 位于/etc/apt/sources.list,并备份原文件为sources.list.bak deb http://mirrors.163 ...

  8. WebService中控制字符的处理

    情景     最近项目中很多WebService都发不出去,报的错误如下:    Invalid white space character in text to output (in xml 1.1 ...

  9. C++ 的template

    vector的标准模板是:template<template<typename X, class allocator<X> > class T>而普通模板则是tem ...

  10. SublimeText更换皮肤

    SublimeText是一款非常好用的文本编辑工具,官方网址http://www.sublimetext.com/. 这里介绍一下手动安装SublimeText皮肤的方法. (1)首先找一款你喜欢的皮 ...