使用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.
使用Yeoman搭建 AngularJS 应用 (12) —— 让我们搭建一个网页应用的更多相关文章
- 使用Yeoman搭建 AngularJS 应用 (5) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/scaffold-app.html 基架 (Scaffolding) 在Yeoman中的意思是为基于你特殊的配置需求,为网站程序生成文件的工 ...
- 使用Yeoman搭建 AngularJS 应用 (4) —— 让我们搭建一个网页应用
在开发一个的网页传统工作流程中,你需要大量的时间去设置引用文件,下载依赖文件,并且手动的创建网页文件结构.Yeoman生成器将会帮助你完成这些.让我们安装一个AngularJS项目的生成器. 安装An ...
- 使用Yeoman搭建 AngularJS 应用 (2) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/index.html 使用Yeoman搭建简单的应用 今天将会搭建一个简单的网页程序.你将可以添加,删除,拖拽和保存. 浏览Yeoman Y ...
- 使用Yeoman搭建 AngularJS 应用 (11) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/prepare-production.html 让我们发布这个应用 优化产品的文件 为了创建应用的产品版本,我们想做如下的事情 检查你的代码 ...
- 使用Yeoman搭建 AngularJS 应用 (10) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/write-unit-tests.html 对于不熟悉的Karma的人来说,这是JavaScript测试框架,这个Angular的生成器包含 ...
- 使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/install-packages.html 列出当前程序包 我们现在查看一下我们已经安装的程序包,输入下面的命令 bower list 查找 ...
- 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/write-app.html 创建一个新的模板来显示一个todo的列表 打开views/main.html 为了从一个干净的模板开始,删除m ...
- 使用Yeoman搭建 AngularJS 应用 (7) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/preview-inbrowser.html 开启你的服务 运行Grunt任务,通过输入下面的命令来创建一个本地Node的http服务,地址 ...
- 使用Yeoman搭建 AngularJS 应用 (6) —— 让我们搭建一个网页应用
原文地址:http://yeoman.io/codelab/review-generated-files.html 打开mytodo文件夹,你会看到现在的基架.如下图所示 在mytodo文件夹,我们能 ...
随机推荐
- C# 按指定数量从前面或者后面删除字符串
为了方便处理一些数据,自己写一个小程序来辅助工作,提高点效率. 不够删除怎么办呢!?一般程序员都会马上想到的是,用if判断…….这里其实不用if语句也可以轻松实现的! 有些程序员还可能用 try c ...
- [原创]centos6.5 dhcpd 服务一直failed状态
因为要部署kickstart自动化系统分发,所以需要在上面配置dhcp服务器,之前也使用同样的机器进行配置,没是没有问题的,但是这次在配置了dhcpd.conf文件后,重启服务的时候却一直提示 [ro ...
- Quartz Scheduler(2.2.1) - Working with TriggerListeners and JobListeners
TriggerListeners and JobListeners Listeners are objects that you create to perform actions based on ...
- jquery easyui datagrid 分页 详解(java)
1.首先引入easyui包,可以在官方网站下载,http://www.jeasyui.com/download/index.php <link rel="stylesheet" ...
- IT技术开发人员35岁之前应该做的十件事
第一,学会本行业所需要的一切知识并有所发展.已故零件大王布鲁丹在他35岁时,已经成为零件行业的领袖,并且组建了年收入达千万美元的海湾与西部工业公司.每个人在年轻时都可能有过彻夜不眠.刻苦攻读,这在20 ...
- 【转】MySQL的安装与配置
一.MySQL的安装 1.在线安装: 命令:sudo apt-get install mysql-server 在安装的过程中将提示为“root”用户设置密码,输入自己的密码即可,安装按成后已自动配置 ...
- 实例介绍Cocos2d-x中Box2D物理引擎:HelloBox2D
我们通过一个实例介绍一下,在Cocos2d-x 3.x中使用Box2D物理引擎的开发过程,熟悉这些API的使用.这个实例运行后的场景如图所示,当场景启动后,玩家可以触摸点击屏幕,每次触摸时候,就会在触 ...
- IOS 异步GET方法请求
1.添加协议NSURLConnectionDelegate 2.引入头文件“NSString+URLEncoding”,用来处理URL进行编码. 3.引入头文件“NSNumber+Message”,用 ...
- Entity Framework 之三层架构
今天,我们谈一下如何用Entity Framework构建一个三层架构.即包括DAL层,BLL层和MODEL层.我们先看一下目录结构,如下图: 目录中,我们有Web层,AVON.DMS.Model是实 ...
- Android Studio生成APK自动追加版本号
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/android-apk-studio-generated-automatically-appends-a-ve ...