目前STF之新增頁面二：融合方案對(duì)我來說要求還比較高，先照葫蘆畫瓢吧。

參照res/app/settings目錄下對(duì)代碼結(jié)構(gòu)+前端頁面對(duì)比，針對(duì)使用統(tǒng)計(jì)，增加一個(gè)這樣對(duì)目錄結(jié)構(gòu)——

UsageRecord

配合app.js里的引入、menu.pug里的更新、以及翻譯文件?？梢赃M(jìn)行頁面跳轉(zhuǎn)維護(hù)了?！跋犬嫵鰝€(gè)樣子。

下一步是前后端的聯(lián)動(dòng)。目前前端還是空白，沒有展示樣式；后端接口也沒有，怎么聯(lián)動(dòng)還不清楚——昨天畫完瓢就是這么個(gè)狀態(tài)。

今天參考設(shè)備詳情頁面的邏輯，大概理清楚了里面的邏輯。東西越學(xué)越多，API定義使用Swagger，后端請(qǐng)求使用Oboe，即使pug、Angular里的scope、derective之類的還沒搞清楚，不影響這個(gè)新葫蘆的樣子。

# res/app/device-list/index.js
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/devices', {
        template: require('./device-list.pug'),
        controller: 'DeviceListCtrl'
      })
  }])
  .run(function(editableOptions) {
    // bootstrap3 theme for xeditables
    editableOptions.theme = 'bs3'
  })
  .controller('DeviceListCtrl', require('./device-list-controller'))

設(shè)備頁面打開的時(shí)候會(huì)調(diào)用 $scope.tracker = DeviceService.trackAll($scope)，這個(gè)方法就是進(jìn)行API調(diào)用/api/v1/devices

# res/app/components/stf/device/device-service.js
deviceService.trackAll = function($scope) {
    var tracker = new Tracker($scope, {
      filter: function() {
        return true
      }
    , digest: false
    })

    oboe('/api/v1/devices')
      .node('devices[*]', function(device) {
        tracker.add(device)
      })

    return tracker
  }

研究清楚這個(gè)設(shè)備管理的所以邏輯，整個(gè)STF也就精通了。目前只是需要這個(gè)設(shè)備詳情頁的邏輯就足夠了。

• 獲取到數(shù)據(jù)
• 可以篩選數(shù)據(jù)