ionic 實作(4)：登入畫面

說明

大部份的app如果需要有身份的認證，通常的作法不是使用 facebook、google 或其它第三方登入以外，就是自己有一個會員的帳號登入，今天要實作的部份就是使用帳號密碼登入在 ionic 中應該如何開發。

UI 畫面

首先打開編輯 tab-login.html，加上 username 及 password的二個輸入框及一個button元件

畫面如下，畫面

Controller 撰寫

在來要在對應的controller 中做編輯，我們回去看一下 js/app.js 中的routing設定，tab-login.html 的controller 是 LoginCtrl

打開 controller.js檔案 ，編輯檔案中的 LoginCtrl function，在function 中加入 username及password 的變數，並且同時加上一個login的function，用來讓 button  綁定 click 使用

tab-login.html 加上 ng-model 及ng-click

大功告成，畫面如下，可以按下登入的button測試是否有alert 訊息

P.S 登入的實作在之後介紹到$http時會再refactor