Menu
I am trying to do a Lynda.com tutorial on Angular and Firebase but I am having troubles. I found several pages on this error and still can't figure this out. As pointed out on another page, I tried swapped firebase.database().ref() for 'new Firebase()' but it gives a different error.
Please help. TIA!
Index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Registration</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCujdl_kIpR42CEqfgC2HxXFZEQjy-uBkY",
authDomain: "angulartut-8f382.firebaseapp.com",
databaseURL: "https://angulartut-8f382.firebaseio.com",
storageBucket: "angulartut-8f382.appspot.com",
};
firebase.initializeApp(config);
</script>
<script src="js/angularfire.min.js"></script>
<script type="text/javascript" src="js/lib/app.js"></script>
<script type="text/javascript" src="js/controllers/registration.js"></script>
<script type="text/javascript" src="js/controllers/success.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page" ng-view>
<main></main>
</div>
</body>
</html>
app.js:
var myApp = angular.module('myApp', ['ngRoute', 'firebase']);
myApp.config(['$routeProvider', function($routeProvider) {
...
}]);
registration.js:
myApp.controller('RegistrationController', ['$scope','$firebaseAuth', function($scope, $firebaseAuth){
// $scope.message = "Welcome to my App!";
console.log($firebaseAuth);
var ref = new Firebase('https://angulartut-8f382.firebaseio.com');
// var ref = firebase.database().ref(); //<--tried this, but get error 'onAuth is not a function'
var auth = $firebaseAuth(ref);
$scope.login = function() {
$scope.message = "Welcome " + $scope.user.email;
};
$scope.register = function() {
auth.$createUser({
email:$scope.user.email,
password:$scope.user.password
}).then(function(regUser) {
$scope.message = "Welcome " + $scope.user.firstname + "thanks for registering!";
}).catch(function(error) {
$scope.message = error.message;
});
};
}]);
749
asked Jul 27 '26 11:07
I found a google group https://groups.google.com/forum/#!forum/firebase-angular that led me to this migration page https://github.com/firebase/angularfire/blob/master/docs/migration/1XX-to-2XX.md
As you can see, the config is moved and the ref and auth lines are changed as well as auth.$createUser(). Thanks for looking!
Here is the fixed code for registration.js:
var config = {apiKey: "AIzaSyCujdl_kIpR42CEqfgC2HxXFZEQjy-uBkY",
authDomain: "angulartut-8f382.firebaseapp.com",
databaseURL: "https://angulartut-8f382.firebaseio.com",
storageBucket: "angulartut-8f382.appspot.com",
};
firebase.initializeApp(config);
myApp.controller('RegistrationController', ['$scope','$firebaseAuth', function($scope, $firebaseAuth){
// $scope.message = "Welcome to my App!";
var ref = firebase.database().ref();
// console.dir(ref);
auth = $firebaseAuth(firebase.auth());
$scope.login = function() {
$scope.message = "Welcome " + $scope.user.email;
};
$scope.register = function() {
auth.$createUserWithEmailAndPassword($scope.user.email, $scope.user.password)
.then(function(regUser) {
$scope.message = "Welcome " + $scope.user.firstname + ", thanks for registering!";
}).catch(function(error) {
$scope.message = error.message;
});
};
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With