iT邦幫忙

DAY 15
1

開發 Mobile 手機的新一代霸主-ionic framework系列 第 15

ionic 實作(4):登入畫面

  • 分享至 

  • xImage
  •  

說明

大部份的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


上一篇
ionic 實作(3):設定 Routing
下一篇
ionic 實作(5):今日訂餐
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
leewen77
iT邦新手 5 級 ‧ 2014-11-27 10:57:52

『$scope.password』 應改為 『$scope.pwd』對吧?
您的文章清楚而用心, 謝謝您!!

0
adonismis
iT邦新手 3 級 ‧ 2015-10-21 15:44:08

臉紅alert試成功了耶...

我要留言

立即登入留言