AngularJs set a global

Question

I'm trying to set a global for my entire app. But it's not working. Here I declare my globals:

(function() {
    angular.module('employeeApp')
        .controller('authenticationController', authenticationController)
        .constant('GLOBALS', {
            url:'http://skindustries.dev/api/v1/',
            role:'',
            companyid:'',
            name:''
        });

Then when a employee signs in I want to set globals.

function authenticationController(requestFactory,authenticationFactory,GLOBALS,$location,$cookieStore)
    {
    var vm = this;

        vm.login = function() {
            data = {"email": vm.email, "password": vm.password};
            requestFactory.post(GLOBALS.url + 'login', data)
                .then(function (response) {
                    console.log(response);
                    GLOBALS.role = response.data.result.Employee.Role;
                    GLOBALS.companyid = response.data.result.Employee.CompanyId;
                    authenticationFactory.setToken(response.data.result.Employee.api_token);
                    $cookieStore.put('employeeid', response.data.result.Employee.EmployeeId);
                    $location.path('/home');

                }, function () {
                    console.log('Niet ingelogd!');
                });
            }
        }

If I console.log(GLOBALS.role) in authenticationController result is superadministrator. Then the user is redirected to home. If I console.log(GLOBALS.role) in my homeController.

(function()
{
    angular.module('employeeApp').controller('homeController', homeController);

    function homeController(employeeFactory,GLOBALS) {
        console.log(GLOBALS.role);

Result is null?

What am I doing wrong here!?

--EDIT--

constant (service)

(function() {
    angular.module('employeeApp')
        .service('constants',constants);

    function constants() {
        this.url = 'http://skindustries.dev/api/v1/';
            this.role =  'oldRole',
            this.companyid = '',
            this.name = ''
    }
})();

login (factory)

factory.login = function(email,password)
        {
            console.log('login');
            data = {"email": email, "password": password};
            requestFactory.post(GLOBALS.url + 'login', data)
                .then(function (response) {
                    constants.role = response.data.result.Employee.Role;
                    constants.companyid = response.data.result.Employee.CompanyId;
                    factory.setToken(response.data.result.Employee.api_token);
                    $cookieStore.put('employeeid', response.data.result.Employee.EmployeeId);
                    $location.path('/home');

                }, function () {
                    console.log('Niet ingelogd!');
                });
        }

homeController

(function()
{
    angular.module('employeeApp').controller('homeController', homeController);

    function homeController(constants) {
  console.log(constants.role);
}

did you cross-check that GLOBALS is being registered as angular constant "before" 'homeController' gets executed ? — nalinc
– nalinc, Commented Mar 25, 2016 at 10:10
I suggest you to have a look at this blog post which deals with auth : jvandemo.com/… — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Mar 25, 2016 at 12:46
@jamie Yes. A cookie is sent with every request the web client makes to the web server. If you need those information on your server, you should use JWT (JWT can be stored in a cookie, but I prefer dealing with it inside headers). — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Mar 25, 2016 at 13:46

Community · Accepted Answer · 2017-05-23 12:23:59Z

2

Basically value (or a constant) initializes every time when it is injected in a controller. So it never retain your new value and hence initializes its old value.

For your need you could use a service as a global object in your application so that it retains your new saved value in the GLOBAL object

Demo Fiddle

.service('GLOBALS', function() {
      this.url = 'http://skindustries.dev/api/v1/';
      this.role =  'oldRole',
      this.companyid = '',
      this.name = ''
  })

.controller('MyController', function(GLOBALS, $scope) {
  console.log(GLOBALS.role);
  $scope.role = GLOBALS.role;
  GLOBALS.role = "new role";
  console.log(GLOBALS.role);
})

.controller('MyController2', function(GLOBALS, $scope) {
  console.log(GLOBALS.role);
  $scope.role = GLOBALS.role;
});

For a better understanding of constants and values refer this question

Hope this helps.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 25, 2016 at 10:58

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jamie Over a year ago

Thanks, but when I try this and reload the page the role is gone. Please see my edit.

M. Junaid Salaat Over a year ago

Obviously @jamie the edited role will be gone because it is not saved in the session or an external DataBase. If you want your changed GLOBAL values to be saved you should use localStorage (that is browser specific) or a database to save your data.

M. Junaid Salaat Over a year ago

No. It wouldn't be wrong, but the cookie will only be accessible inside that particular browser, just like localStorage. For example If you are hosting your application in chrome and edit data there it will only be accessible inside that browser and only by you. It would not be available on another browser say firefox.

Jamie Over a year ago

Thanksyou! but now I've got another problem -_-

M. Junaid Salaat Over a year ago

Yes you can ask it. Here to help. :)

Vinit Solanki · Accepted Answer · 2016-03-25 10:18:56Z

-1

A constant can not be intercepted by a decorator, that means that the value of a constant should never be changed.

Use Value :

angular.module('app', []);

.value('GLOBALS', 'The Matrix');

.controller('MyController', function (GLOBALS) {
  GLOBALS = "hello";
})

answered Mar 25, 2016 at 10:18

Vinit Solanki

2,0412 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJs set a global

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related