Page 83 - 4-4studylife

74

§ login.js (ไฟล Controller ที่เกี่ยวข้องกับการเข้าสู่ระบบ)
์
§ message.js (ไฟล Controller ที่เกี่ยวข้องกับการส่งข้อความ)
์
§ student.js (ไฟล Controller ที่เกี่ยวข้องกับนักศึกษา)
์
์
§ teacher.js (ไฟล Controller ที่เกี่ยวข้องกับอาจารย)
์
§ services (เก็บไฟล์ที่ทำหน้าท Service ของเฟรมเวิร์ค)
ี่
§ label.js (ไฟล์ Service ที่เกี่ยวข้องกับการแสดงผลข้อความอธิบาย ภาษาไทย/
อังกฤษ)

§ menu.js (ไฟล Service ที่เกี่ยวข้องกับเมน)
์
ู
์
§ user.js (ไฟล Service ที่เกี่ยวข้องกับผู้ใช้งาน)
§ app.js (เก็บไฟล์ตั้งต้นของเฟรมเวิร์ค และการตั้งค่า)
์
§ views (เก็บไฟล HTML ที่ทำหน้าที่แสดงผลทั้งหมด โดยรายการด้านล่างนี้จะเป็นเพียงตัวอย่าง
เท่านั้น)

§ login.html (ไฟล HTML ที่ทำหน้าที่แสดงผลหน้าเข้าสู่ระบบ)
์
์
§ message.html (ไฟล HTML ที่ทำหน้าที่แสดงผลหน้าส่งข้อความ)
์
§ student.html (ไฟล HTML ที่ทำหน้าที่แสดงผลหน้าของนักศึกษา)
์
§ และไฟล HTML อื่น ๆ

2.3 เฟรมเวิร์ค AngularJS

การทำงานของเฟรมเวิร์ค AngularJs ในเฟรมเวิร์ค Ionic รุ่นที่ 1 นั้นแท้จริงแล้วไม่ได้มีเพียงแค ่
้
AngularJS เท่านั้นแต Ionic ได้ใส่โมดูล UI-Router และโมดูลของ AngularJS อื่น ๆ ที่ Ionic พัฒนาเองเขา
่
ไปอีกหลายตัว ซึ่งปกติถ้าเราพัฒนาโดยใช AngularJS อย่างเดียวจะต้องติดตั้งโมดูลเหล่านั้นเอง ดังนั้นการ
้
ทำงานของ AngularJS ภายใต้เฟรมเวิร์ค Ionic นั้นถ้าจะอธิบายให้เข้าใจ ก็ขอยกตัวอย่างลำดับการทำงาน
ของหน้าเข้าสู่ระบบเป็นตัวอย่างให้เห็นภาพ

เริ่มต้นที่ไฟล์ www/js/app.js ที่เป็นจุดตั้งต้นของเฟรมเวิร์ค AngularJS จะพบกับ Method config
ที่ภายในจะบรรจุการตั้งค่า Route ผ่านตัวแปร $stateProvider และใช้ Method state เพื่อตั้งค่า Route ท ี่

ชื่อว่า login โดยมี templateUrl คือ views/login.html และ controller ชื่อ LoginCtrl (จากชื่อเราจะรู้ได ้

์
ทันทีว่า Controller นี้ต้องอยู่ที่ไฟล www/js/controller/login/js แน่)

คู่มือการพัฒนาแอปพลิเคชัน Study Life