Page 89 - 4-4studylife

80

user.login = function(){

$ionicLoading.show();
$http({

url: 'https://someapi.com/login',

method: 'POST',
data: user.info

}).then(

function(res){
$ionicLoading.hide();

$state.go('student.home');

},
function(error){

console.log(error);

$ionicLoading.hide();
}

);

};
…

ในไฟล์ www/js/services/user.js จะเห็นได้ว่ามีการเขียน Service ที่ชื่อว่า user ซึ่ง Service ใน
เฟรมเวิร์ค AngularJS นั่นจะทำงานคล้าย ๆ กับ Session ในการเขียนเว็บไซต์แบบปกติ ก็คือจะเป็นตัวแปรท ี่

้
ุ
ี
มีค่าในทก ๆ หนา กล่าวคือ Service ของ AngularJS นั้นจะมีค่าในทุก ๆ Controller ที่เรยกใช้นั่นเอง โดยตัว
แปร user นั้นจะเห็นได้ว่าม Property info ที่มีค่าเป็น Object เปล่า ๆ ซึ่งใน LoginCtrl ได้ใส่ค่า username
ี
และ password ลงไปเพิ่ม นอกจากนั้น user ยังม Method ที่ชื่อว่า login ที่เคยถูกเรียกใช้โดย Method ท ี่
ี
ชื่อ doLogin นั่นเอง โดยคราวนี้เราจะเห็นกระบวนการทำงานได้ชัดเจน จะเห็นว่า login นั้นเรียกใช้ Service

ที่ชื่อว่า $http (Service ของ AngularJS ใช้สำหรับเรียกใช้งาน API) ทำการเรียกใช้งาน API โดยการ Post
ั
ั
็
ิ
ิ
้
ั
ี่
่
ี
คา user.info ทภายในม username และ password จากน้นรอการตอบกลบ ถาการตอบกลบปกตกจะว่งไป
ที่หน้า home ด้วยคำสั่ง $state.go(‘home’)
จากตัวอย่างการทำงานของ AngularJS ใน Route Login น่าจะทำให้ผู้พัฒนาพอเห็นภาพรวมของ
การใช้งานเฟรมเวิร์ค AngularJS ภายใต้เฟรมเวิร์ค Ionic รุ่นท 1 ซึ่งยังมีอีกหลายอย่างที่ผู้พัฒนาจำเป็นต้อง
ี่
ี่
ศึกษาด้วยตนเองโดยสามารถศึกษาเพิ่มเติมได้ที่เว็บไซต์ทางการของ AngularJs และ Ionic รุ่นท 1

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