Dsafds Dsafds - 4 months ago 15
AngularJS Question

How to make global variables in angular

i have this problem where when you register you get to the Users page. And its suppose to say "Welcome " The username dosent show up for some reason... please help here is the plunkr:

http://plnkr.co/edit/qB3Gkeq5ji1YQyy0kpGH?p=preview

Please i need help..

i need to get some code for plunker so :
script.js:

var app = angular.module('LoginApp', ["firebase", "ngRoute"])

app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'registration.html',
controller: 'AuthCtrl'
})
.when('/logIn', {
templateUrl: 'login.html',
controller: 'AuthCtrl'
})

.when('/User', {
templateUrl: "User.html",
controller: 'AuthCtrl'
})
.otherwise({
redirectTo: '/'
});


});


app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://uniquecoders.firebaseio.com/");
return $firebaseAuth(ref);
}
]);


app.controller("AuthCtrl", ["$scope", "Auth",
function($scope, Auth) {


$scope.createUser = function() {

$scope.message = null;
$scope.error = null;
var ref2 = new Firebase("https://uniquecoders.firebaseio.com/");
ref2.createUser({
email: $scope.email,
password: $scope.password
}, function(error, userData) {
if (error) {
switch (error.code) {
case "EMAIL_TAKEN":
alert("The new user account cannot be created because the email is already in use. Try to login");
break;
case "INVALID_EMAIL":
alert("The specified email is not a valid email.");
break;
case "INVALID_PASSWORD":
alert("The Specified Passowrd Is not valid.")
break;
default:
alert("Error creating user:", error);
}
} else {
alert("Successfully created user account with uid:", userData.uid);
alert($scope.UserName)

window.location.hash = "/User"
$scope.usernames = "HEY"
}
});


};

$scope.logIn = function(){
$scope.message = null;
$scope.error = null;

ref2.authWithPassword({
"email" : $scope.logInemail,
"password" : $scope.logInemailpassword

}, function(error, userData){

if(error){
alert("Login Failed.")
console.log(error)
}
else{
alert("Logged In!")
}

})

}

/* $scope.removeUser = function() {
$scope.message = null;
$scope.error = null;

Auth.$removeUser({
email: $scope.email,
password: $scope.password
}).then(function() {
$scope.message = "User removed";
}).catch(function(error) {
$scope.error = error;
});
};*/
}
]);

Answer

There are many things in your code that you might want to take care of, but some quick and partially dirty solutions:

Do not include all of your javascript files on your nested templates. Anything that is routed to in your ng-view should just be the html you want to be inserted within that <div>. No CSS links, no script tags, nothing but HTML that would normally be within the body of a page.

On your registration page, your username ng-model needs to match what you are passing as an argument to your ng-click. So instead of ng-model="userName" you need it to be ng-model="username" to match ng-click="createUser(username, email, password)".

Your other major issue is that $scope is being overwritten each time you change views because each one of your routes has the same controller. So conceptually, you may be thinking that the username (which you have stored as the plural $scope.usernames for some reason) is there for you to access still on $scope. But that is not the case, as each view is running on its own unique instance of the Auth Controller. The quickest solution since you don't know how to implement services is probably to inject $rootScope into your controller, and then put usernames on $rootScope instead of $scope (though keep in mind using $rootScope in production is considered bad practice), as $rootScope will persist across all of your controllers. So your javascript file would look more like this:

app.controller("AuthCtrl", ["$scope", "$rootScope", "Auth", function($scope, $rootScope, Auth) {

and then

$scope.createUser = function(username, email, password) { $rootScope.usernames = username $scope.message = null; $scope.error = null;

Comments