Ionic ตอนที่ 2. ng คือ angular , ion คือ ionic และ พื้นฐานการ .config view รองรับหลายๆหน้า

Chapter 2 : อธิบายเกี่ยวกับ

1. การแก้ไข index.html เพื่อรองกับการทำงานแบบหลายๆหน้า (view)

     1.1 การเปลี่ยน ng-app='starter' เป็น ng-app='WorkShop'
     1.2 ใส่ tag ion-nav-view เพื่อทำการเจาะรูหน้า index.html ทำให้ view ต่างๆสามารถแสดงผลในหน้า index.html ได้

2. tag พื้นฐานเพื่อบ่งบอกถึง 

     2.1 ขึ้นต้นด้วย ng (Angularjs) 
     2.3 ขึ้นต้นด้วย ion (Ionic)

2. การใช้งาน Console (Chrome Browser Inspector) เพื่อทำการ log ข้อมูลหรือแจ้งเตือนต่างๆเพื่อทำการ Debug โปรแกรม

3. การสร้างไฟล์ html เป็น template มาผูกกับ Javascipt ไฟล์หลักของโปรแกรมคือ app.js 

4. เรียนรู้หลักการ Inject service เข้ามาใน .config ของ ionic เราจะใช้

     4.1 $stateProvider เพื่อสร้าง 
           .state('MY_STATE) ต่างๆ

     4.2 $urlRouterProvider
           .otherwise('/URL_FROM_STATE')

5. การทดสอบ state ผ่าน url : 'MY_URL' โดยใช้ Chrome Browser 

http://localhost:8100/#/MY_URL


 

[ /www/index.html ] 

1. ion-nav-view *** ion ionic *** 

2. js/app.js 

3. ng-app="starter" *** ng Angularjs *** 

4. Chrome Browser Inspecter (Console Debug) 

======================================================================================= 

[ /www/js/app.js] 

1. angular.module('WorkShop',['ionic']) 

2. .config(function() { } ) 

3. $stateProvider 

     .state('login',{
          url : '/login',
          templateUrl : 'templates/login.html'
     })

4. $urlRouterProvider.otherwise('/login')

- END -

แก้ไขล่าสุด วันที่ 13 พ.ค. 2559, 01:21

  ionic ตอนที่ 2 SourceCode  Chapter2 - WorkShop