$state resolve with parameter - AngularJS $StateProvider

Question

I'm trying to add a resolve to my $state in my routing following this guide here.

Going a bit further than the guide by adding parameters to the function things stop working.

my code looks like this

'use strict';

angular.module('academiaUnitateApp')
  .config(function ($stateProvider, entryService) {
    var getEntry = function(id) {
        entryService.find(id)
            .then(function(response){
                return response.data;
            })
            .catch(function(error){
                return null;
            });
    };

    $stateProvider
        .state('entry', {
            url: '/entry/:id',
            templateUrl: 'app/entry/entry.html',
            controller: 'EntryCtrl',
            resolve: {
                entry: getEntry($state.current.param.id)
            }
        });
  });

however my console log looks like this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module academiaUnitateApp due to: //didn't add this part tell me if needed
Error: [$injector:unpr] Unknown provider: entryService

So from what I can greater is that the entryService provider isn't known, if this is correct how should I add this, instead of the way I'm adding it at the moment.

EDIT

Here is the entryService

'use strict';

angular.module('academiaUnitateApp')
    .factory('entryService',function($http, $state){
        var service = {};

        service.find = function(_id){   
            return $http.get('/api/entrys/' + _id);
        };

        return service;
  });

app/app.js

'use strict';

angular.module('academiaUnitateApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'btford.socket-io',
    'ui.router',
    'ui.bootstrap',
    'textAngular'
])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
  })

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };
  })

  .run(function ($rootScope, $location, Auth) {
    // Redirect to login if route requires auth and you're not logged in
    $rootScope.$on('$stateChangeStart', function (event, next) {
      Auth.isLoggedInAsync(function(loggedIn) {
        if (next.authenticate && !loggedIn) {
          $location.path('/login');
        }
      });
    });
  });

Truche · Accepted Answer · 2015-04-19 17:59:04Z

2

You need to supply the dependencies your application module needs. To be able to inject your service, your app must know the module where your entryService is defined.

If academiaUnitateApp.services is the module name where entryService is defined, you must specify the dependency as below :

angular.module('academiaUnitateApp', ['academiaUnitateApp.services'])
  .config(function ($stateProvider, entryService) {
   // ...
});

And then you'll be able to inject any service (or controller...) you need in your app.

answered Apr 19, 2015 at 17:59

Truche

5231 gold badge5 silver badges19 bronze badges

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

5 Comments

Michael Tot Korsgaard Over a year ago

updated the question with the entryService hope this helps bring some light on the problem.

Truche Over a year ago

Okay, you just have one module. I really advise you to separate your app elements into different module. This project shows good ways to structure your angular projects : github.com/angular/angular-seed/blob/master/app/app.js Here, if you really want to keep one module, you must define an empty array in your first app module definition. => angular.module('academiaUnitateApp', []).

Michael Tot Korsgaard Over a year ago

I think you are missing a link to the project you are talking about?

Truche Over a year ago

Sorry, I just didn't finished to write my comment. Have a look at my previous comment.

Michael Tot Korsgaard Over a year ago

just had a look at the link you gave, and my app.js looks similar to that

Bartłomiej Semańczyk · Accepted Answer · 2015-10-10 10:27:22Z

Here is my app.js (routing rules using state)

.state('books.show.detail',{
        url: '/detail/:bookId',
        templateUrl: 'views/book.detail.html',
        controller: 'BookDetailCtrl',
        resolve: {
          bookDetails: function(BookDetailsService,RestClient,$q,$stateParams){
            console.log($stateParams.bookId);
            var book = BookDetailsService(RestClient,$q,$stateParams.bookId);
            return book.get();
          }
        }
      });

And here is my service.js where BookDetailsService is defined

var services = angular.module('uiAngularClientApp.services',['ngResource']);

services.factory('RestClient',['$resource', function ($resource) {
  return $resource('http://localhost:8080/books/:id',{id:'@id'});
}]);

services.factory('BookDetailsService',['RestClient','$q',function(RestClient,$q,key){
  return function(RestClient,$q,key){
    return new GetBookDetails(RestClient,$q,key);
  };
}]);

function GetBookDetails($resource, $q, key) {
  this.get = function() {
    var delay = $q.defer();
    $resource.get({id:key},function(book){
      delay.resolve(book)
    },function(){
      delay.reject('Cannot get book details');
    });
    return delay.promise;
  };
};

Works perfectly fine. Most important is definition of BookDetailsService in service.js.

Collectives™ on Stack Overflow

$state resolve with parameter - AngularJS $StateProvider

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related