用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的内容：
<!doctype html>
<html ng-app>
<head>
<script src="js/angular-1.0.1.min.js"></script>
<script src="js/todo.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
二、持久化数据
现在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的内容<h2>Todo</h2>删除，添加topbar模块。
topbar模块允许我们添加按钮事件，我们可以在页面上移除存档的链接，还可以添加本地按钮来存档已完成的任务。代码如下：
forge.topbar.addButton({
icon: "img/accept.png"
}, function(){
$scope.$apply($scope.archive);
});
四、添加一个tabbar
如同topbar一样，我们还可以使用Forge添加一个本地tabbar。借此，我们将第二页添加到TODO列表应用中，这页的功能是允许用户查看以前归档的任务。
要做到这一点，我们添加一些HTML代码以及几个JavaScript函数来实现两页之间的切换，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模块的优点，还允许访问本地特性，并同时支持Android和iOS的运行。
完整的源码在GitHub，见：https://github.com/Connorhd/Forge-Angular-Todo