Page 88 - 4-4studylife
P. 88
79
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
จากไฟล www/js/controllers/login.js จะพบว่ามี Controller ที่ชื่อว่า LoginCtrl เขียนอยู่และ
์
ภายในมีการเรียกใช้ตัวแปรที่ชื่อว่า $scope ซึ่งเป็นตัวแปรที่มีความสำคัญมากในเฟรมเวิร์ค AngularJS โดยท ี่
$scope นั้นที่จริงถือว่าเป็น Service ของ AngularJS (ข้อสังเกตคือจะมีเครื่องหมาย $ นำหน้า นั่นหมายถง
ึ
Service ที่เป็นของ AngularJS เองทำหน้าที่หลายอย่าง) ซึ่ง $scope นั้นมีหน้าที่ในการติดต่อในการส่งค่าตว
ั
่
แปรระหว่าง View และ Controller ยกตัวอย่างเช่น ภายใน Controller LoginCtrl มีการกำหนดวา
$scope.doLogin มีค่าเป็น Method เมื่อเราไปดูใน View ก็จะพบว่าปุ่มลงชื่อเข้าใช้มีการเรียก Method
doLogin() เช่นกัน อีกจุดนึงที่น่าสนใจคือ $scope.user = user นั่นก็คือ Object ที่ชื่อว่า user ที่อยู่ใน
Controller นั้นถูกนำไปเป็นค่า $scope.user ดังนั้นใน View จึงมีการเรียกใช้ Object user.info.username
และ user.info.password นั่นเอง
ต่อมาให้ภายใน Method doLogin จะพบว่ามีการเรียกใช้ user.login() เราสามารถเข้าใจได้ในทันท ี
ว่าเป็นการดำเนินการเข้าสู่ระบบ แต่เราไม่รู้รายละเอียดใด ๆ เลยว่าทำงานอย่างไร ซึ่งก่อนที่จะไปดูวา
่
กระบวนการเข้าสู่ระบบเป็นอย่างไรบ้างจำเป็นต้องอธบายตัวแปร user ที่อยู่ใน Controller ก่อน ข้อสังเกตก ็
ิ
คือตัวแปร user นั้นถูกเรียกใช้แบบลอย ๆ คือไม่มีร่องรอยการสร้างแต่อย่างใดในไฟล ์
www/js/controllers/login.js คือถูกเรียกผ่าน function() ตอนที่ประการศ Controller ลักษณะคล้าย ๆ
กับ $scope ซึ่งจริง ๆ แล้วตัวแปร user ก็คือ Service อีกตัวนึงแต่เป็นประเภทที่ผู้พัฒนาเขียนขึ้นเอง เรา
์
สามารถดูว่า user มีการเขียนโปรแกรมอย่างไรได้ที่ไฟล www/js/services/user.js
์
ไฟล www/js/services/user.js (บางส่วน)
angular.module('starter')
.service('user', function($ionicLoading, $http, $state) {
var user = this;
user.info = {};
คู่มือการพัฒนาแอปพลิเคชัน Study Life