Ionic Routing
Routing เป็นส่วนแรกที่เจอเมื่อสร้าง Ionic App จาก Template ซึ่งจะเขียนไว้ใน app.js ใน ionic เลือกใช้ angular-ui-routerเราจะกำกับ url ต่างๆที่วิ่งไปมาใน App ว่าให้ไปเอาเนื้อหา html ไฟล์ไหนมาแสดง แล้ว ให้ใช้ Controller ตัวไหนในการควบคุม
โดยแต่ละ url ต่อไปนี้จะเรียกว่า state
ตัวอย่าง code ใน app.js
var app = angular.module('ionicApp', ['ionic']) app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/') $stateProvider.state('home', { url: '/', template: '<p>Hello, world!</p>' }) })
การทำ routing คือการ config module ในกรณีนี้ ถ้า App เราชื่อ ionicApp ก็ทำการสร้าง หรือ เรียก module จาก cache ด้วย
var app = angular.module('ionicApp', ['ionic'])
จากนั้น ก็ config โดย inject resource เข้าไป สองอย่างคือ $stateProvider และ $urlRouterProvider
$urlRouterProvider.otherwise('/')กำหนดว่า ถ้า url path ไม่ตรงกับที่กำหนดไว้เลย ให้ไปที่ หน้า root /
$stateProvider.state('home', { url: '/', template: '<p>Hello, world!</p>' })กำหนด state ใหม่ชื่อ home โดยบอกว่า ถ้า url path คือ / ให้ใช้ template เป็น html code ตามที่กำหนดได้เลย แต่เราสามารถกำหนดให้ใช้ไฟล์ home.html เลยก็ได้ ด้วย
$stateProvider.state('home', { url: '/', templateUrl: 'home.html' })ส่วนเนื้อหา index.html หน้าแรกของ ionic ก็จะเป็น
<body> <ion-tabs class="tabs-positive"> <ion-tab icon="ion-home" ui-sref="home"> <ion-nav-view name="home"></ion-nav-view> </ion-tab> <ion-tab icon="ion-help" ui-sref="help"> <ion-nav-view name="help"></ion-nav-view> </ion-tab> </ion-tabs> </body>
โดยที่ เมื่อ click ที่ tab home, ionic จะเอา home.html มาแสดงตามที่กำหนดใน router
ณ จุดนี้ อาจจะดูยุ่งยาก ทั้งๆที่การทำ link ธรรมดาก็น่าจะเพียงพอ
แต่ เมื่อ App ซับซ้อนขึ้น มีการใช้ Controller ซ้ำๆในหน้า html ต่างๆ วิธีนี้ จะทำให้เห็นศูนย์รวมของการตั้งค่าได้่ดีกว่า การกำหนด Controller แยกในแต่ละ html ไฟล์
ไว้ผมจะมาขยายความต่อครับ
Comments