2015年11月18日

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/
現在發揮你的創意,換你來練習一下,比如說古巴教練說了一句話,然後發生了什麼事?
熟悉靜態頁面對於後面的課程很重要!

下一章 樣式修改