Setting a variable in the .config service in Angular JS?

Question

I have this code...

spa.factory("linkFactory", function() {
    var linkFactoryObject = {};
    linkFactoryObject.currentLink = "home";
    return linkFactoryObject;
});

This snippet acts as a global variable which I set and read between different controllers. This variable controls which link is marked active.

My code works really well. The only problem is that if I don't set an initial value in the factory when you first enter my web page the home link will not be set to active. If I do set an initial value then when someone refreshes a page the value will reset to the initial value. This means that the home page link will be active, but you will actually be on a different page.

Additionally, I've tried to use $location.path() to get my path and build a function off of that value, but $location.path() is static, so this won't work either.

I have this route snippet which controls which content I load...

spa.config(function($routeProvider, $locationProvider) {
    $routeProvider
            .when('/home', {
                templateUrl: '/partials/home.html'
            })
            .when('/about', {
                templateUrl: '/partials/about.html'
            })
            .when('/skills', {
                templateUrl: '/partials/skills.html'
            })
            .when('/experience', {
                templateUrl: '/partials/experience.html'
            })
            .when('/resume', {
                templateUrl: '/partials/resume.html'
            })
            .when('/contact', {
                templateUrl: '/partials/contact.html'
            })
            .otherwise({
                redirectTo: '/home'
            });
});

If I could somehow set a variable here that I could read in my controllers I would be good to go, but I'm unsure how to do that.

How would I accomplish this?

you should convert you factory to provider so that it will get accessible inside config phase — Pankaj Parkar, Jun 29 '15 at 22:40

score 0 · Answer 1 · answered Jun 29 '15 at 22:51

Try this. It should set url of route whenever state change

spa.factory("linkFactory", function() {
        var linkFactoryObject = {};
        linkFactoryObject.currentLink = "home";
        linkFactoryObject.setRoute = function(route) 
        {
          linkFactoryObject.currentLink = route;
        };
        return linkFactoryObject;
    });

    spa.run(['linkFactory','$rootScope',function(linkFactory,$rootScope) {
      $rootScope.$on('$routeChangeStart', function(event, next, current) {
        linkFactory.setRoute(next.$$route.originalPath);
      });
    });

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Instead of registering $routeChangeStart event. You can also define a default controller if not necessary to define separate controllers for each page. And in the controller you can set value to current link.

I would recommend you just define a scope variable for this purpose and check the scope variable to set appropriate class to the links.

There is a good thread on this.

How to highlight a current menu item?

edited May 23 '17 at 11:58

Community

1
1

answered Jun 30 '15 at 00:37

Yang Zhang

4,540
4
37
34

How would one define a scope variable in the when function? – Allenph Jun 30 '15 at 00:46
@Allenph I mean to define a scope variable in the controller. I would suggest define a controller for each page and register the controller to the page in when function. – Yang Zhang Jun 30 '15 at 00:53
That seems kind of repititive and kind of an unwanted way to do it because I'm delivering static content that doesn't need a controller. Is that the only option? – Allenph Jun 30 '15 at 00:56

Setting a variable in the .config service in Angular JS?

2 Answers2