Mobile first! Wijmo 5 + Ionic Framework之：费用跟踪 App

费用跟踪应用采用了Wijmo5和Ionic Framework创建，目的是构建一个hybird app。

我们基于《Mobile first! Wijmo 5 + Ionic Framework之：Hello World！》的环境，将在本教程中完成费用跟踪App的构建。下面的代码结构是本教程完成要达到的效果，请预先创建好文件和目录。

www/                     --> 工程根目录
  index.html         --> app 布局文件 (主HTML文件)
  css/                   --> css 目录
  js/                    --> javascript 目录
    app.js               --> 主模块
    app.routes.js        --> 主路由模块
    controllers/         --> app控制器目录
    models/                 --> app模块目录
    services/        --> app 数据Service目录
  templates/             --> angularJs视图代码目录(通过UI-Router调用) 
  lib/           --> 第三方类库, 包括Ionic, Wijmo, jQuery等

 

数据模型（Data Model）

在费用跟踪App中，我们先要创建Data Model，E-R图如下

 

• Category：开支分类

• Expense：开支记录

• Budget： 预算（下面会用到）

在代码中，我们需要在www/js/services构建AngularJs Services来对数据模型进行建模。我们会用到HTML5的localStorage进行数据本地存储, 采用的格式为JSON。 需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。目前我们实现的是HTML5 本地存储，有兴趣的读者还可移植为RESTful API、SQLite等数据存储方法。

运行demo后，通过Chrome调试查看的本地存储截图：

浏览开支历史记录

在开支历史页面中，提供了2个功能：浏览开支历史记录、删除开支记录。为了实现这些功能，在www\js\controllers\history.js文件中，添加如下代码：

//从localStorage获得开支数据$scope.expenses = ExpenseSvc.getExpensesWithCategory();

这行代码提供了返回本地存储的开支记录。ExpenseSvc 服务，不仅返回了开支对象，同时也返回了开支分类。基于这些数据，在

www\templates\history.tpl.htm文件中，在ion-context指令内添加Ionic的ion-list指令，代码如下：

  
    
  
  
    
      
        
        
          
            
{{ expense.title }}
          

                       {{ expense.date | date: 'shortDate' }}           

                       {{ expense.amount | currency }}          

        

              

 

ion-list指令，用于生成排序的HTML列表，其子标签ion-item指令用于生成HTML列表项。 在ngRepeat指令中，我们使用了“track by”，目的是在对开支集合修改时提升性能，相关教程可参考博客《Using Track-By With ngRepeat In AngularJS 1.2 》。

现在添加删除开支记录按钮，用于向左滑动出现删除按钮、点击删除可删除开支记录。

在ion-item标签关闭前添加ion-option-button标签，代码如下：

Delete

ion-option-button 是Ionic提供的另一个指令，用于在ion-item指令内试用。默认的，ion-option-button 是隐藏的，当在ion-item内向左滑动，则按钮会可见。这个功能尤其对小屏幕设备非常重要。另外，还可通过该指令内置的can-swipe来实现对这个权限的管理--如有的用户不允许删除操作权限。

在删除函数中（控制器），可看到代码片段如下：

function confirmDelete(expenseId) {
   // delete expense by its id property
   $scope.expenses = ExpenseSvc.deleteExpense(expenseId);
}

通过这个代码，我们调用ExpenseSvc服务的deleteExpense进行删除指定的开支记录(expenseId)，同时这个方法也会返回开支记录集合用于更新页面数据。在真实的场景中，删除记录返回整个集合不是最理想的，但在此处我们用于演示说明。可动手试着删除几行数据试试。

另外，在删除这种比较危险的操作中，应该需要添加对话框再次提醒一下用户。这里我们使用了Ionic提供的$ionicActionSheet service服务来实现。更新www\js\controllers\history.js控制器代码的confirmDelete函数如下：

//删除开支记录$scope.confirmDelete = function (expenseId) {  //ionic的 确认对话框
  // show()函数返回了一个函数，用于隐藏actionSheet
  var hideSheet = $ionicActionSheet.show({
    titleText: 'Are you sure that you\'d like to delete this expense?',
    cancelText: 'Cancel',
    destructiveText: 'Delete',
    cancel: function () {      // 如果用户选择cancel, 则会隐藏删除按钮      $ionicListDelegate.closeOptionButtons();
    },
    destructiveButtonClicked: function () {      // 通过id删除开支记录
      $scope.expenses = ExpenseSvc.deleteExpense(expenseId);      // 隐藏对话框      hideSheet();
    }
  });
};

ionicActionSheet服务提供了自定义接口，可实现各种提示对话框。上面代码实现的提示对话框效果截图如下：

 

 

创建开支记录

点击History页面右上角的可实现手工创建一条新的开支记录。在www\templates\createExpense.tpl.htm文件中，代码如下：