Ionic Framework 教學 - 3. 製作一個簡單的頁面

http://pic.ctitv.com/

承上一章
我們來做一個林智勝的打擊頁面。
首先在 www/templates/menu.html 頁面增加一個Baseball選項

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Left</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item menu-close ng-click="login()">
            Login
          </ion-item>
          <ion-item menu-close href="#/app/search">
            Search
          </ion-item>
          <ion-item menu-close href="#/app/browse">
            Browse
          </ion-item>
          <ion-item menu-close href="#/app/playlists">
            Playlists
          </ion-item>
          <ion-item menu-close href="#/app/baseball">
            Baseball
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>

這個時候 Baseball 點下去是沒有用的，我們要增加對應的頁面。
首先在 www/templates 資料夾中增加一個 baseball.html ，這個我們等下會用到。
然後編輯 www/js/controllers.js ，增加一個 Controller

...

.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('BaseballCtrl', function() {
})
;

注意 "..." 是代表省略的意思，不是真的程式碼，因為我盡量只寫有變動的部份，有些同學直接照抄是不行的。
分號要放在最後面，這個 BaseballCtrl 是用來處理有關 Baseball 的事件處理的，目前內容是空白，我們等下會用到。
然後編輯 www/js/app.js ，在 routing 路線圖裡面，增加一組 route ，他是告訴 App 遇到什麼狀態 state ，或是什麼 url 的情況，要交給哪個 Controller 來處理，並且指定顯示什麼 template 頁面。

...

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  ...

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  })
  .state('app.baseball', {
    url: '/baseball',
    views: {
      'menuContent': {
        templateUrl: 'templates/baseball.html',
        controller: 'BaseballCtrl'
      }
    }
  })
  ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

到這裡我們再試試看點擊 Baseball 頁籤，就會出現空白頁面，而且 header 的 title 是錯誤的，我們來修改他。
編輯 www/templates/baseball.html

  
<ion-view view-title="請大師兄翻譯翻譯">
  <ion-content>
    <img alt="" class="full-image" src="http://i.imgur.com/fnU7FHf.jpg?1" />
    <button class="button button-positive icon-left ion-ios-baseball-outline">
      打擊
    </button>
  </ion-content>
</ion-view>

我們修改了 header title, 增加了一張大師兄曼妙的身影，和一個打擊按鈕。
打擊下去會發生什麼事呢？
我們來增加下一個 View
首先增加 www/templates/surprise.html

<ion-view view-title="什麼叫驚喜">
  <ion-content>
    <img class="full-image" src="http://i.imgur.com/JpsC5xC.jpg?1" alt="">
  </ion-content>
</ion-view>

同樣的這個頁面也需要一個 Controller 和 route ，我們分別在 controllers.js 和 app.js 加上

  ...
  
  .controller('SurpriseCtrl', function() {
  })
  ;

  ...

  .state('app.surprise', {
    url: '/surprise',
    views: {
      'menuContent': {
        templateUrl: 'templates/surprise.html',
        controller: 'SurpriseCtrl'
      }
    }
  })
  ;

這樣完成之後，我們要怎麼讓打擊按鈕連到這個頁面呢？
第一種方法，我們剛剛已經知道了，在 menu.html 裡面，用 href 的方式連到對應的 url 。
我們來試試看第二種方式，用 ui-sref 連到對應的 state 。
我們修改 baseball.html

<ion-view view-title="請大師兄翻譯翻譯">
  <ion-content>
    <img class="full-image" src="http://i.imgur.com/fnU7FHf.jpg?1" alt="">
    <button ui-sref="app.surprise"
      class="button button-positive icon-left ion-ios-baseball-outline">
      打擊
    </button>
  </ion-content>
</ion-view>

現在試試看打擊按鈕了。
除了用 ur-sref 我們也可以在 Controller 中控制轉場，我們修改打擊按鈕

<button ng-click="hitTheBall()"
  class="homerun button button-positive button-full icon-left ion-ios-baseball-outline">
  打擊
</button>

讓他被點擊的時候呼叫 hitTheBall ，然後我們修改 Controller

.controller('BaseballCtrl', function($scope, $state) {
  $scope.hitTheBall = function() {
    $state.go('app.surprise');
  }
})

$scope 就是連接 View 中使用的變數，$state 就是用來使用 routing 的
可是這樣有什麼好處呢？ 有時候按鈕按下去有很多事情需要處理，處理完才能到下一個 state ，假設我們加一個 loading 的畫面
增加 templates/loading.html

<img class="full-image" src="http://i.imgur.com/AkbN5f0.jpg?1" alt="">

然後我們修改 BaseballCtrl

.controller('BaseballCtrl', function($scope, $state, $ionicLoading, $timeout) {
  $scope.hitTheBall = function() {
    $ionicLoading.show({
      templateUrl: 'templates/loading.html'
    });

    //wait for 2 seconds
    $timeout(function() {
      $state.go('app.surprise');
      $ionicLoading.hide();
    }, 2000);
    
  };
})

這樣你就大概知道一個頁面要怎麼做了，更多 Ionic 預設的元件你可以參考
http://ionicframework.com/docs/components/
現在發揮你的創意，換你來練習一下，比如說古巴教練說了一句話，然後發生了什麼事？
熟悉靜態頁面對於後面的課程很重要！

下一章 樣式修改