0
这是我与一个空白屏幕相处。我想要一个登录页面，人们可以注册并使用他们的注册登录到应用程序。
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Firebase Database -->
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase.js">
</script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA2D9aQVQEfeKTt1duY1s2kd9zLgTDeHZY",
authDomain: "health-3d3fd.firebaseapp.com",
databaseURL: "https://health-3d3fd.firebaseio.com",
projectId: "health-3d3fd",
storageBucket: "health-3d3fd.appspot.com",
messagingSenderId: "339252162124"
};
firebase.initializeApp(config);
</script>
<!-- IF using Sass (run gulp sass first), then uncomment below and
remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Controllers.js
angular.module("starter")
.controller('LoginCtrl',function($scope,$firebaseAuth,$rootScope,$ionicHistory,
sharedUtils,$state,$ionicSideMenuDelegate) {
$rootScope.extras = false; // For hiding the side bar and nav icon
// When the user logs out and reaches login page,
// we clear all the history and cache to prevent back link
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope){
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
}
});
//Check if user already logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true); // Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('dashboard', {}, {location: "replace"});
}
});
$scope.login = function(user,cred) {
if(user.$valid) { // Check if the form data is valid or not sharedUtils.showLoading();
//Email
firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(funct
ion(result) {
// You dont need to save the users session as firebase handles it
// You only need to :
// 1. clear the login page history from the history stack so that you can’t come back
// 2. Set rootScope.extra;
// 3. Turn off the loading
// 4. Got to menu page
$ionicHistory.nextViewOptions({
historyRoot: true
});
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('dashboard', {}, {location: "replace"});
};
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("Please note","Authentication Error");
}
);
}else{
sharedUtils.showAlert("Please note","Entered data is not valid");
}
};
})
.controller('RegCtrl',function($scope,$rootScope,sharedUtils,$ionicSideMenuDelegate,$state,fireBaseData,$ionicHistory) {
$rootScope.extras = false; // For hiding the side bar and nav icon
$scope.submitForm = function (user, cred) {
if (user.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading();
//Main Firebase Authentication part
firebase.auth().createUserWithEmailAndPassword(cred.email,cred.password).then(f
unction (result) {
//Add name and default dp to the Autherisation table
result.updateProfile({
displayName: cred.name,
photoURL: "default_dp"
}).then(function() {}, function(error) {});
//Add phone number to the user table
fireBaseData.refUser().child(result.uid).set({
telephone: cred.phone
});
//Registered OK
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true);
// Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('loginpage', {}, {location: "replace"});
}, function (error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("Please note","Registration Error");
});
}else{
sharedUtils.showAlert("Please note","Entered data is not valid");
}
}
})
.controller('DashCtrl', function($scope, formData) {
$scope.user = formData.getForm();
})
services.js
.factory('sharedUtils'['$ionicLoading','$ionicPopup',function($ionicLoading,$io
nicPopup){
var functionObj={};
functionObj.showLoading=function(){
$ionicLoading.show({
content: '<i class=" ion-loading-c"></i> ', // The text to display in the loading indicator
animation: 'fade-in', // The animation to use
showBackdrop: true, // Will a dark overlay or backdrop cover the entire view maxWidth: 200,
// The maximum width of the loading indicator. Text will be wrapped if longer than maxWidth
showDelay: 0 // The delay in showing the indicator
});
};
functionObj.hideLoading=function(){
$ionicLoading.hide();
};
functionObj.showAlert = function(title,message) {
var alertPopup = $ionicPopup.alert({
title: title,
template: message
});
};
return functionObj;
}])
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving
Angular modules
// 'starter' is the name of this angular module example (also set in a
<body> attribute in index.html)
// the 2nd parameter is an array of 'requires' angular.module('starter',
['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the
// accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('loginpage', {
url: "/loginpage",
templateUrl: "templates/loginpage.html",
controller: "LoginCtrl"
})
.state('regform', {
url: "/regform",
templateUrl: "templates/regform.html",
controller: "RegCtrl"
})
.state('dashboard', {
url: "/dashboard",
templateUrl: "templates/dashboard.html",
controller: "DashCtrl"
})
$urlRouterProvider.otherwise("/loginpage");
});
登录页面
<ion-view>
<ion-content class="padding">
<label class="item item-input">
<input ng-model="user.email" type="text" placeholder="E-mail">
</label>
<label class="item item-input">
<input ng-model="user.password" type="text" placeholder="Password">
</label>
<button ng-click="login(user)" class="button button-block button-
positive">Submit</button>
<center><p>Don't have an account? <a href="/#/regform"> Create Account</a></p>
</center>
</ion-content>
</ion-view>
注册页面
<ion-view>
<form class="padding">
<ion-list>
<ion-item class="item-input">
<input type="text" ng-model="user.firstName" placeholder="First Name">
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.lastName" placeholder="Last Name">
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.dob" placeholder="Date of birth"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.phoneno" placeholder="Phone No."></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.gender" placeholder="Male/Female"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.email" placeholder="Email"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.password" placeholder="Password"></input>
</ion-item>
<button ng-submit="submitForm(user) class="button button-block button-
positive">Register</button>
<center><p>Don't have an account? <a href="/#/loginpage">Login</a></p>
</center>
</ion-list>
</form>
</ion-view>
请谁能帮助我吗？
没有人会帮助，除非您发布的最小码 – Sajeetharan
这我第一次发布帖子，我想从中获得帮助 –
这很明显，但代码转储几乎没有资格作为[mcve]，你不同意吗？ –