Angular Resolve: Variable is not defined

Question

I am working with Angular Routes for the first time and I recently posed a question regarding a refresh losing some data, the answer I received was to use resolve. It seems to be the solution I was looking for however I cannot get it to work properly.

.config(['$routeProvider', function($routeProvider) {
           //determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file
           $routeProvider
               .when('/MG', {
                   controller: 'teammateController',
                   templateUrl: './assets/departments/department.html',
                   resolve: {
                       activeDepartment: function() {
                           return 'Management'
                       }
                   }
               })
               .when('/PO', {
                   controller: 'teammateController',
                   templateUrl: './assets/departments/department.html',
                   resolve: {
                       activeDepartment: function() {
                           return 'Programs Office'
                       }
                   }
               })
               .when('/SM', {
                   controller: 'teammateController',
                   templateUrl: './assets/departments/department.html',
                   resolve: {
                       activeDepartment: function() {
                           return 'Sales And Marketing'
                       }
                   }
               })
               .when('/', {
                   controller: 'teammateController',
                   templateUrl: 'home.html',
                   resolve: {
                       activeDepartment: function() {
                           console.log("working");
                           return 'home';
                       }
                   }
               })
               .otherwise({
                   controller: 'teammateController',
                   templateUrl: 'home.html',
                   resolve: {
                       activeDepartment: function() {
                           console.log("working");
                           return 'home';
                       }
                   }
               })
       }]);

   app.controller('teammateController', function teammateController($scope, $http, $rootScope, $timeout, Idle, $location) {
       $scope.deptName = activeDepartment();
     });

I receive "ReferenceError: activeDepartment is not defined". The console log works and I see "working", so I know resolve is being run but, then the error message appears. I've tried everything I can think of and I cannot for the life of me see where I am going wrong. Any help would be appreciated.

Your controller needs a local injection. This means that when the controller is instantiated you need to provide the resolved data for the controller, just like you provide $scope for example. — Michelangelo
– Michelangelo, Commented Jan 25, 2016 at 21:58

Christofer Eliasson · Accepted Answer · 2016-01-25 21:55:57Z

2

The resolved properties are injected into your controller, so try this:

app.controller('teammateController', function teammateController($scope, $http, $rootScope, $timeout, Idle, $location, activeDepartment) {
   $scope.deptName = activeDepartment;
 });

Notice the additional argument at the end of your controller.

answered Jan 25, 2016 at 21:55

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

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

5 Comments

Colton Williams Over a year ago

I tried that earlier but it gave me another error "Error: [$injector:unpr] Unknown provider: activeDepartmentProvider <- activeDepartment <- teammateController" Which I also cannot figure out, do I need it in my dependencies as well?

Christofer Eliasson Over a year ago

@ColtonWilliams You don't need to add any additional dependencies, above should be sufficient. The error message indicate that your resolved property doesn't get injected properly, and therefor angular is looking for a provider called activeDeparment.

Christofer Eliasson Over a year ago

@ColtonWilliams I never use ngRoute myself, so I'm not sure, but according to the docs

For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve

so perhaps you could try $scope.$resolve.activeDeparment as well. Just a guess though...

Colton Williams Over a year ago

Good idea, I missed that in the docs, they also have an example that seems to be doing what I am looking for. I guess I will just scrap what I have and start over. I think part of the problem is that I am trying to add in routes after my whole app is built instead of including them from the beginning and I just don't have the skills to make it work. Thank again though I think you and @Amy got me on the right track.

Colton Williams Over a year ago

GOT IT!!!! Not sure if this is the most efficient/proper way to do it since it kinda feels like a work around but $scope.deptName = $route.current.locals.departmentName; gets it, weird thing is that it doesn't need (at least in this instance) to be injected into the controller.

Amy Blankenship · Accepted Answer · 2016-01-25 21:57:04Z

1

app.controller('teammateController', function teammateController($scope, $http, $rootScope, $timeout, Idle, $location) {
       $scope.deptName = activeDepartment();
     });

should be

app.controller('teammateController', function teammateController($scope, $http, $rootScope, $timeout, Idle, $location, activeDepartment) {
       $scope.deptName = activeDepartment;
     });

BTW, the syntax you're using is not going to work if you want to minify your code.

answered Jan 25, 2016 at 21:57

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

4 Comments

Colton Williams Over a year ago

I don't believe I want to minify it, but could you explain why? For future reference?

Oliver Over a year ago

It will work if you use ngAnnotate before you minify the code: github.com/olov/ng-annotate

Amy Blankenship Over a year ago

The minifier will take your variable names and change them to things like n, u, v. When Angular goes to look for n, u, or v in the injector, it won't find anything, because it was actually registered as $scope, $http, $rootScope, etc. There's plenty of documentation available on this issue and the other alternate syntaxes you could use.

Colton Williams Over a year ago

Thanks @Amy that makes sense.

Collectives™ on Stack Overflow

Angular Resolve: Variable is not defined

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related