用Trigger.io改进移动Angular.js应用

页面导航:首页 > 网络编程 > JavaScript > 用Trigger.io改进移动Angular.js应用

用Trigger.io改进移动Angular.js应用

来源: 作者: 时间:2016-02-04 09:15 【

用Trigger io改进移动Angular js应用作者:chszs,转载需注明。博客主页:http: blog csdn net chszsTrigger io Forge可以让我们使用最新、最好的Web技术来开发本地移动应用。本文展示了开发一个简单

用Trigger.io改进移动Angular.js应用

作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs

Trigger.io Forge可以让我们使用最新、最好的Web技术来开发本地移动应用。
本文展示了开发一个简单的Angular.js应用示例,并使用Forge模块增强此应用,包括:
1)使用forge.prefs来增加离线能力和持久化能力
2)使用forge.topbar来增加本地topbar和动作按钮
3)使用forge.tabbar来实现视图间的导航

本示例是做一个TODO列表。

一、创建一个Forge应用

第一步是创建一个Forge应用,要确保APP可以离线运行,我们必须在本地包含angular.min.js和bootstrap.css文件。运行代码后可以看到上面的界面。
整个应用的结构如下:
/
index.html的内容:

 


<script src=js/angular-1.0.1.min.js></script><script src=js/todo.js></script>


Todo

{{remaining()}} of {{todos.length}} remaining [ ]
  • {{todo.text}}
 
/
二、持久化数据

 

现在HTML5示例的程序已经完成,那么我们可以使用Forge的扩展功能来改进此应用。
我们要做的第一件事是使用prefs模块来持久化TODO列表。无论TODO列表是否得到更新,都需要保存它。代码如下:
forge.prefs.set(“todos”, $scope.todos);


当APP运行时,就可以用存储的TODO列表数据恢复TODO列表了。

// 用存储的数据恢复TODO列表
forge.prefs.get(todos, function(todos{
	// 更新Angular模型, $apply确保视图得到更新
	$scope.$apply(function(){
		if(todos){
			$scope.todos = todos;
		} else{
			$scope.todos = [
				{text:'learn angular', done:true},
				{text:'build an angular app', done:false},
				{text:'extend angular app to work with Forge', done:false}
			];
		}
	});
}));
要注意的是这块代码$scope.$apply(function () { ... }),它告诉Angular,此代码块会修改模型,代码运行后视图应该得到更新。没有这块代码,一旦prefs被载入后,用户是看不到更新的。

 

三、添加一个topbar

我们还可以为APP的界面添加一个topbar,即使TODO列表太长,导致页面卷边,topbar也总是可见的。要做到这一点,我们可以把index.html的内容

Todo

删除,添加topbar模块。
/
topbar模块允许我们添加按钮事件,我们可以在页面上移除存档的链接,还可以添加本地按钮来存档已完成的任务。代码如下:
forge.topbar.addButton({
	icon: img/accept.png
}, function(){
	$scope.$apply($scope.archive);
});
四、添加一个tabbar

 

如同topbar一样,我们还可以使用Forge添加一个本地tabbar。借此,我们将第二页添加到TODO列表应用中,这页的功能是允许用户查看以前归档的任务。
要做到这一点,我们添加一些HTML代码以及几个Script函数来实现两页之间的切换,TODO列表的持久化仍旧使用prefs实现。代码如下:

// 添加Forge tabbar按钮
forge.tabbar.addButton({
	icon: img/list.png,
	text: Todo list
}, function(button){
	button.setActive();
	button.onPressed.addListener(function(){
		$scope.$apply($scope.showList);
	});
});
forge.tabbar.addButton({
	icon: img/archive.png,
	text: Archive
}, function(button){
	button.onPressed.addListener(function(){
		$scope.$apply($scope.showArchive);
	});
})
五、总结

 

我们现在有了一个简单的TODO列表应用,在Forge运行,并同时利用了Angular.js和Forge模块的优点,还允许访问本地特性,并同时支持和iOS的运行。

/ /

 

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <