AngularJS: Custom Providers, undefined functions? - angularjs

Question

I have a provider like so:
angular.module('myApp').provider('test', function(){
this.$get = function($http){
return {
test2: function(){
}
}
};
});
I then use the provider in my app.config:
app.config(function($urlRouterProvider, $stateProvider, testProvider){
testProvider.test2();
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home', {url: '/home', templateUrl: 'template/guide.html'})
.state('cost', {url:'/cost', templateUrl:'template/cost.html'})
});
Im trying to use a provider to get all my pages from a database and return them to the stateProvider... (Which I cant do in app.config because I cant inject the $http service)
This is the error I'm getting:
Failed to instantiate module myApp due to: TypeError: undefined is
not a function

Answer 1

You are getting the error, because yu are trying to call test2() on the provider (TestProvider).
test2() is not a method of the provider, but of the provided service (and thus is only accessible at "runtime", not during config).
If I understand correctly what you are trying to do, here is a possible approach:
Create a DelayedRoutes service (using provider()), which has a method for fetching the routes from the server and then registering them with the routing module (be it ngRoute or ui.router or whatever).
This configRoutes() methods needs to be invoked at runtime (so it has access to $http etc).
It also needs access to the routing module's provider (e.g. $routeProvider, $stateProvider etc), which are only available during the configuration time.
Your provider will have a method (setRouteProvider()), which get's executed during config and stores the $whateverProvider for later use (i.e. when the configRoutes() gets executed at runtime).
Here is a sample implementation (using ngRoute for simplicity). You can modify it according to your needs:
app.provider('DelayedRoutes', function () {
var routeProvider;
// This will be called during `config`
this.setRouteProvider = function (rp) {
routeProvider = rp;
};
// This will return the actual service
this.$get = function ($http, $route) {
// This will be called at runtime, to fetch the routes
// from the server and configure client-side routing
function configRoutes() {
return $http.get('/gimme/ma/routes').then(
function onResponse(response) {
var routes = response.data.routes;
angular.forEach(routes, function (config, path) {
if (path === 'otherwise') {
routeProvider.otherwise(config);
} else {
routeProvider.when(path, config);
}
});
$route.reload();
},
function onError(error) {
// Handle the error...
}
);
}
return {
configRoutes: configRoutes
};
};
});
// During `config`, store `$routeProvider` for later use
app.config(function ($routeProvider, DelayedRoutesProvider) {
DelayedRoutesProvider.setRouteProvider($routeProvider);
});
// At runtime, config the routes
app.run(function (DelayedRoutes) {
DelayedRoutes.configRoutes();
});
See, also, this short demo.