Page 84 - 4-4studylife

75

์
ไฟล www/js/app.js (บางส่วน)
…
$stateProvider

.state('login', {

url: '/',
templateUrl: 'views/login.html',

controller: 'LoginCtrl'

})
…

เมื่อผู้ใช้งานเปิดหน้าเข้าสู่ระบบ Route ที่ชื่อ login ก็จะเริ่มทำงานโดยการเรียกใช้ Controller ที่ชอ
ื่
ว่า LoginCtrl และเรียกใช้ไฟล views/login/html เพื่อแสดงผล จากนั้นให้ผู้พัฒนาเข้าไปดูไฟล์ HTML ที่ใช ้
์
ี
แสดงผลจะพบการเขียนโปรแกรมที่มีรูปแบบคล้าย ๆ HTML แต่ก็ไม่ใช่เพราะม Tag แปลก ๆ ซึ่งตามปกต ิ
HTML จะไม่ม Tag เหล่านี้ ซึ่งจริง ๆ Tag เหล่านี้คือ Directive ของเฟรมเวิร์ค AngularJS ซึ่ง Directive น ี้
ี
อธิบายสั้น ๆ คือเป็น Tag ที่ถูกสร้างขึ้นเป็นกรณีพิเศษโดยภายในจะบรรจุ HTML ที่แท้จริงเอาไว้ชุดหนึ่งแต ่

เวลาเรียกใช้ต้องการจะเรียกใช้แบบสั้น ๆ เช่น ion-view เป็นต้น โดย Directive นี้ถูกสร้างขึ้นโดย Ionic

นั่นเองเพื่อใช้ในการแสดงผล

ไฟล www/views/login.html
์
<ion-view title="{{label.login}}">
<ion-content>

<div id="login-logo">
<img src="img/rmutp-logo.png" alt="rmutp logo" style="width:100%;">

</div>

<form name="f" novalidate>

<div class="list transparent-list">

<label class="item item-input">
<span class="input-label">{{label.username}}</span>

<input type="text" ng-model="user.info.username" required>

</label>

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