Mobile first! Wijmo 5 + Ionic Framework之：费用跟踪 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等

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

<ion-view title="History">
  <ion-nav-buttons side="right">
    <a class="button button-icon icon ion-plus" href="#/app/create"></a>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="expense in expenses | orderBy:‘date‘:reverse track by expense.id" class="item item-icon-left">
        <i class="icon ion-record {{ expense.category.cssClass }}"></i>
        <div class="row">
          <div class="col-50">
            <h2>{{ expense.title }}</h2>
          </div>
          <div class="col-25">
            <small class="light-grey">{{ expense.date | date: ‘shortDate‘ }}</small>
          </div>
          <div class="col-25">
            {{ expense.amount | currency }}
          </div>
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<ion-option-button class="button button-assertive" on-tap="confirmDelete(expense.id)">Delete</ion-option-button>

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

//删除开支记录
$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();
    }
  });
};

<ion-view title="Create">
    <ion-content class="has-header padding">
        <form name="frmCreate">
            <div class="custom-form-list list">
                <label class="item item-input">
                    <i class="icon ion-alert-circled placeholder-icon assertive" ng-show="!frmCreate.title.$pristine && frmCreate.title.$invalid"></i>
                    <input name="title" type="text" placeholder="Title" ng-model="expense.title" ng-maxlength="55" required>
                </label>
                <wj-input-number value="expense.amount" min="0" step="5" format="c2"></wj-input-number>
                <wj-calendar value="expense.date"></wj-calendar>                
                <wj-combo-box items-source="categories" 
                              display-member-path="htmlContent"
                              selected-value-path="id"
                              selected-value="expense.categoryId" 
                              is-editable="false" 
                              is-content-html="true"></wj-combo-box>
                <label class="item item-input">
                    <textarea placeholder="Description" ng-model="expense.description"></textarea>
                </label>
            </div>
            <div class="button-bar">
                <button type="button" class="button button-dark icon-left ion-close" on-tap="cancel()">Cancel</button>
                <button type="button" class="button button-balanced icon-left ion-checkmark" on-tap="addExpense()" ng-disabled="frmCreate.title.$invalid">Save</button>
            </div>
        </form>
    </ion-content>
</ion-view>

// 初始化Expense object
$scope.expense = new Expense(‘‘, 0, new Date(), ‘‘, null);

// 获得HTML类型的开支分类
$scope.categories = CategorySvc.getCategoriesWithHtmlContent();

// 用localStorage存储开支数据
$scope.addExpense = function () {
  // insert expense
  ExpenseSvc.insertExpense($scope.expense);
  $scope.cancel();
};

// 取消方法 (如，可回到主页面)
$scope.cancel = function () {
  $state.go(‘app.overview‘);

};

<ion-view title="Details Grid">
  <!-- set overflow-scroll="true" and hand scrolling to native -->
  <ion-content class="has-header" overflow-scroll="true">
    <wj-flex-grid auto-generate-columns="false" items-source="data" selection-mode="Row" row-edit-ending="rowEditEnding(s,e)" style="position:relative">
      <wj-flex-grid-column width="2*" min-width="250" header="Title" binding="title"></wj-flex-grid-column>
      <wj-flex-grid-column width="*" min-width="100" header="Amount" binding="amount" format="c2"></wj-flex-grid-column>
      <wj-flex-grid-column width="*" min-width="100" header="Date" binding="date"></wj-flex-grid-column>
      <wj-flex-grid-column width="2*" min-width="250" header="Description" binding="description"></wj-flex-grid-column>
    </wj-flex-grid>
  </ion-content>
  <ion-footer-bar class="bar button-bar-footer">
    <div class="button-bar">
      <button type="button" class="button button-dark icon-left ion-close" on-tap="cancel()">Cancel</button>
      <button type="button" class="button button-balanced icon-left ion-checkmark" ng-disabled="!data.itemsEdited.length" on-tap="update()">Save</button>
    </div>
  </ion-footer-bar>
</ion-view>

// 通过localStorage获得开支记录数据，并初始化CollectionView
$scope.data = new wijmo.collections.CollectionView(ExpenseSvc.getExpenses());

// CollectionView的变更可跟踪
$scope.data.trackChanges = true;

// 批量更新开支记录
$scope.update = function () {
  // make sure items have been edited
  if ($scope.data.itemsEdited.length) {
    // bulk update expenses
    ExpenseSvc.updateExpenses($scope.data.itemsEdited);

    // return to overview page
    $scope.cancel();
  }
};

// 取消方法 (如导航到主页面)
$scope.cancel = function () {
  $state.go(‘app.overview‘);
};

// FlexGrid.rowEditEnding事件处理
$scope.rowEditEnding = function (sender, args) {
  var expense = $scope.data.currentEditItem,      // get expense being edited
      isValid = isExpenseValid(expense);          // validate expense

  // if the expense isn‘t valid, cancel the edit operation
  if (!isValid) {
    $scope.data.cancelEdit();
    return;
  }
};

// 验证函数：确保开支记录数据合法有效
function isExpenseValid(expense) {
  return expense &&
         expense.title !== ‘‘ &&
         expense.title.length < 55 &&
         wijmo.isNumber(expense.amount) &&
         wijmo.isDate(expense.date) &&
         expense.amount >= 0;
}

$urlRouterProvider.otherwise(‘/app/history‘);

to：

$urlRouterProvider.otherwise(‘/app/overview‘);

<ion-view title="Overview">
  <ion-nav-buttons side="right">
    <a class="button button-icon icon ion-plus" href="#/app/create"></a>
  </ion-nav-buttons>
  <ion-content class="has-header padding">
    <div ng-show="hasExpenses">
      <hgroup class="text-center padding-vertical">
        <h2 class="title">
          <span ng-class="expensesCssClass">{{ totalExpenses | currency }}</span> of {{ budget | currency }}
        </h2>
        <h4>{{ budgetMsg }}</h4>
      </hgroup>
      <wj-flex-chart items-source="categories"
                     chart-type="Bar" binding-x="name"
                     tooltip-content=""
                     selection-mode="Point"
                     footer="Tap the chart‘s bars to see history by category"
                     selection-changed="selectionChanged(s)"
                     item-formatter="itemFormatter"
                     style="height: 400px;">
        <wj-flex-chart-series binding="total"></wj-flex-chart-series>
        <wj-flex-chart-axis wj-property="axisX" format="c0"></wj-flex-chart-axis>
        <wj-flex-chart-axis wj-property="axisY" reversed="true" major-grid="false" axis-line="true"></wj-flex-chart-axis>
      </wj-flex-chart>
    </div>
    <div ng-hide="hasExpenses">
      <h4 class="padding text-center">You haven‘t added any expenses yet!  Click the <i class="icon ion-plus"></i> button to get started!</h4>
    </div>
  </ion-content>
</ion-view>

// 通过BudgetSvc服务，获得localStorage数据
$scope.budget = BudgetSvc.getBudget();

// 判断是否有开支记录，返回bool
$scope.hasExpenses = ExpenseSvc.hasExpenses();

// 获得开支的总金额
$scope.totalExpenses = ExpenseSvc.getExpenseTotal();

// 获得各个分类的小计金额
$scope.categories = ExpenseSvc.getCategoriesExpenseSummary();

// 初始化CSS 样式
$scope.expensesCssClass = ‘energized‘;

//设置开支金额显示字符串
// NOTE: use $filter service to format the total prior to concatenating the string
$scope.budgetMsg = $scope.totalExpenses <= $scope.budget
                        ? $filter(‘currency‘)($scope.budget - $scope.totalExpenses).concat(‘ until you reach your monthly limit‘)
                        : $filter(‘currency‘)($scope.totalExpenses - $scope.budget).concat(‘ over your monthly limit‘);

//设置开支css样式
$scope.expensesCssClass = 0 === $scope.totalExpenses
                ? ‘dark‘
                : $scope.totalExpenses === $scope.budget
                     ? ‘energized‘
                     : $scope.totalExpenses > $scope.budget
                          ? ‘assertive‘
                      : ‘balanced‘;

//*** FlexChart‘s selectionChanged event handler
$scope.selectionChanged = function (sender) {
  var category = null;
  if (sender.selection && sender.selection.collectionView.currentItem) {
      // get the currently selected category
      category = sender.selection.collectionView.currentItem;

      // navigate to the category history page to display expenses for selected category
      $state.go(‘app.category-history‘, { category: category.slug });
  }
};

//*** set color of FlexChart‘s plot elements
$scope.itemFormatter = function (engine, hitTestInfo, defaultFormat) {
  if (hitTestInfo.chartElement === wijmo.chart.ChartElement.SeriesSymbol) {
      // set the SVG fill and stroke based on the category‘s bgColor property
      engine.fill = hitTestInfo.item.bgColor;
      engine.stroke = hitTestInfo.item.bgColor;
      defaultFormat();
  }

};