本教程在第一部分構建，在該部分中，我們使用Onsen UI創建了用於登錄和註冊頁面的用戶界面。 現在，我們將使用AngularJS和Firebase作為後端添加功能。 完整的源代碼可在GitHub上找到。
>密鑰概念：
FirebaseSimpleLogin教程涵蓋了基於Firebase的用戶註冊，包括電子郵件/密碼驗證，使用auth.createUser
克隆教程的源代碼並安裝依賴項：
>在
上訪問該應用程序或使用Android Emulator。git clone https://github.com/sitepoint-examples/OnsenUI--Part1 cd OnsenUI--Part1 npm install npm install -g gulp gulp serve
>實現登錄：
添加 >
登記為firebase帳戶並獲取您的firebase URL（例如 實例：>
>
創建
>在註冊頁面中的電子郵件和密碼字段中添加指令：
>
添加模態以進行註冊驗證錯誤，類似
結論： 以上是使用Onsen UI將您的Cordova應用程序進一步的詳細內容。更多資訊請關注PHP中文網其他相關文章！http://localhost:8901/index.html
/OnsenUI--Part1/www/js/app.js
>（圍繞第92行）：(function() {
'use strict';
var module = angular.module('app', ['onsen']);
module.controller('AppController', function($scope) {
$scope.data = [];
$scope.SignIn = function() {
var user = $scope.data.username;
var pass = $scope.data.password;
if (user && pass) {
// Firebase authentication
auth.login('password', { email: user, password: pass });
} else {
// Show validation modal
modal.show();
}
};
// ... (rest of the controller)
});
})();登入後複製ng-model登錄按鈕的index.html事件觸發>
<input ng-model="data.username" type="text" placeholder="Username" ... />
<input ng-model="data.password" type="password" placeholder="Password" ... />
登入後複製index.html<ons-modal var="modal" ng-click="modal.hide()">
Invalid Username or Password.
</ons-modal>登入後複製ng-click）。 在SignIn()>中包括firebase和firebase簡單登錄腳本
創建<>>中的firebase實例和a<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">SignIn</ons-button>
登入後複製https://your-firebase-app.firebaseio.comindex.html主頁和註銷：<🎜>
<🎜>
登入後複製FirebaseSimpleLogin：app.js
實現註冊：var firebaseRef = new Firebase('YOUR_FIREBASE_URL');
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
if (!error && user) {
$scope.username = user.email;
myNavigator.pushPage('home.html', { animation: 'slide' });
$scope.$apply(); // Ensure Angular updates the view
}
});登入後複製home.html在>：<ons-template id="home.html">
<ons-page>
<!-- ... content ... -->
<ons-icon icon="ion-log-out" ng-click="logout()">Logout</ons-icon>
</ons-page>
</ons-template>登入後複製logout
app.js> $scope.logout = function() {
auth.logout();
$scope.data = [];
myNavigator.popPage();
$scope.$apply(); // Ensure Angular updates the view
};登入後複製git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve
登入後複製登入後複製
