[Ionic Tips] วิธีเปลี่ยนหน้า State ให้แอพ Ionic Framework

พอดีพี่ป๋าที่เคยมาเรียนกับโค้ชพล ถามว่า

เป็นไปได้ไหมที่เราจะสั่งเปลี่ยนหน้า Ionic แอพพลิเคชั่น โดยสั่งจากฝั่งของ Angular JS นั่นคือไม่ผ่าน href ของลิ้งค์ตามปกติ

– พี่ป๋า

เป็นไปได้ครับ เราสามารถทำได้โดยใช้ $state เข้ามาช่วย 😉

การ Redirect เว็บทั่วไปโดยใช้ Javascript

ซึ่งวิธีที่เราจะทำ จะได้ผลคล้ายๆ กับการใช้ javascript ในการ redirect ไปยังเว็บเพจที่ต้องการตาม URL Address นั่นเองครับ

ซึ่งตัวอย่างการ redirect แบบ Javascript ที่เราคุ้นเคย จะเหมือน code ด้านล่าง

<script>
window.location = 'http://www.nextflow.in.th';
</script>

การเปลี่ยนหน้าแอพใน Ionic framework โดยใช้ $state

ในที่นี้ เราต้องทำการตั้งชื่อให้ state  ของเราใน module  ก่อนเหมือนตอนที่เรียนไป

.config(...{

  $stateProvider.state('checkout', { 
    templateUrl: 'views/checkout.html'
  });

});

จากนั้นเราถึงสามารถเรียกใช้ $state.go()  ใน controller  ที่เราต้องการ ไม่ว่าจะเป็นใน Angular method หรือที่อื่นๆ ใน controller  ที่มีการเรียก $state  เข้ามาใช้งาน

nextflowModule.controller('HomeController', ['$scope','$state', function($scope,$state){
	
	$scope.goCheckOut = function(){

		$state.go('checkout');

	}
}])

การส่งค่าผ่านไปยังอีก state ผ่าน $state.go()

ทีนี้ถ้าเราต้องการส่งค่าตัวแปร ผ่านไปกับการใช้งาน $state.go()  ด้วย ก็สามารถส่งเป็น Javascript object ได้ครับ

$scope.goCheckOut = function(){

      $state.go('checkout',{ checkoutID: 'nextflow109' });

}

โดยใน .config()  ก็อย่าลืมกำหนด state parameter ด้วยล่ะ

.config(...{

  $stateProvider.state('checkout', { 
    templateUrl: 'views/checkout.html',
    params: [ 'checkoutID' ]
  });

});

เราถึงจะดึงค่าออกมาด้วย $stateParams  ตามปกติ

nextflowModule.controller('CheckoutController', ['$scope','$stateParams', function($scope,$stateParams){
	
	$scope.id = $stateParams.checkoutID;

}])

หวังว่าจะช่วยคนอื่นๆ ให้สร้างแอพ iOS และ Android ด้วย Ionic Framework ตรงตามต้องการมากขึ้นนะครับ

โค้ชพลไปปั่นงานต่อล่ะ

เอ้อ เดี๋ยวกันยา 58 นี้มีหลักสูตรใหม่ด้วยนะ น่าจะถูกใจหลายๆ คนแน่นอน

อ้างอิง – Ionic framework