How to make global variables angular

Question

I have this problem when you get to the "Users" page when registering. And suppose he says "Welcome." The dosent username is displayed on the webpage because I'm not sure ... please help here: plunkr:

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

Please, I need some help.

I need to get the code for plunker, therefore: 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 1

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

Do not include all of your javascript files in your nested templates. Everything directed to your ng-view should just be the html that you want to insert into this <div> . There are no CSS links, no script tags, nothing but HTML, which is usually located inside the body of the page.

On the registration page, your ng-model username should match what you pass as an argument to your ng-click . So instead of ng-model="userName" you need ng-model="userName" match ng-click="createUser(username, email, password)" .

Another important issue is that $scope overwritten every time you change views because each of your routes has the same controller. So you might think that the username (which you saved as the plural of $scope.usernames for some reason) is still available for you to access $scope . But this is not so, since each view runs on its own unique instance of Auth Controller. The quickest solution, since you don’t know how to implement the services, maybe insert $rootScope into your controller and then put usernames on $rootScope instead of $scope (although keep in mind using $rootScope in production is considered bad practice), since $ rootScope will be stored on all your controllers. So your javascript file will look 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;

Answer 2

When your application changes routes, it destroys the scope of the old controller and creates a new scope. This happens even if you use the same controller for both the old and the new routes.

Store persistent data in Auth factory along with the functions that create this data.

 app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) { var AuthObj = {}; //Store persistent data on AuthObj AuthObj.ref = new Firebase("https://uniquecoders.firebaseio.com/"); AuthObj.createUser = function(email,password) { AuthObj.ref.createUser( {email: email, password: password }, function(error, userData) { if (error) { //process error } else { //store data on AuthObj AuthObj.userData = userData; } } ); return AuthObj.userData; }; //return AuthObj which holds functions and data return AuthObj; } ]); 

Use your controller to call these functions and get persistent data.

 app.controller("AuthCtrl", ["$scope", "Auth", function($scope, Auth) { //retrieve userData $scope.userData = Auth.userData; $scope.createUser = function() { if ($scope.userData) { return; } else { $scope.userData = //invoke function in factory Auth.createUser($scope.email,$scope.password); }; }; } ]); 

Thus, data is saved and saved when routes are changed.

Answer 3

When you go to the angular user view, a new instance of the AuthCtrl controller is created, which means a new scope, so there is no value.

Use services to share data (or even areas) between controllers.