I can inject $urlProvider in module.config() but when i try to do it in module.controller() I am getting this error:
Unknown provider: $urlRouterProviderProvider <- $urlRouterProvider <- MyCtrl
I have included angular-ui, also imported ui.router in the module.
I cannot see anybody doing this online, but why should it not work?
Providers are meant to be configured in the config phase, and then they can be injected into a controller, or the run phase, sans the Provider post-fix:
app.config(function($urlRouterProvider) {
$urlRouterProvider.deferIntercept();
});
app.run('MyCtrl', function($urlRouter) { // no Provider post-fix
$urlRouter.listen();
});
See the Angular docs on Providers and the UI-Router's guide on $urlRouterProvider for more information.
Related
I have a service that needs to be called in the app's config module but it errors when I try to inject it. Any ideas? FYI - this service works perfectly fine in controllers when injected and executed.
app.config(['$routeProvider', 'myService', function($routeProvider, myService) {
var controller = myService.getSomeValue() ? 'FirstController', 'SecondController';
$routeProvider
.when('/', {
'templateUrl': '/myTemplate.html'
'controller': controller
})
});
Failed to instantiate module app due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/$injector/unpr?p0=myService
The AngularJS framework operates in two phases, the config phase and the run phase. Only provider objects can be injected in the config phase. Services can only be injected during the run phase.
From the Docs:
module.config(configFn);
Use this method to configure services by injecting their providers, e.g. for adding routes to the $routeProvider.
Note that you can only inject providers and constants into this function.
For more about how to configure services, see Provider Recipe.
For more information, see
AngularJS module type API Reference - config
AngularJS Developer Guide - Providers - Summary
in the official doc :
https://ui-router.github.io/docs/latest/modules/ng1.html , in the example :
MyController.$inject = ['$transition$'];
function MyController($transition$) {
var username = $transition$.params().username;
// .. do something with username
}
$transition$ is injected in the controller, but when I do the same with angular 1.6.1 and ui-router 1.0.0-beta.3 I have the follwing error, using a component architecture:
Error: [$injector:unpr] Unknown provider: $transition$Provider
I am able to inject $transition$ only in a resolve.
From the ui-router Route to Component guide:
When routing to a legacy style template/controller (not routing to
components), the transition could be injected as $transition$.
...
To access the Transition on a routed component, you should bind to
$transition$ in your component.
As you noted, therefore this can only be accessed via the resolve when routing to components. This is because the $transition$ service is a locally scoped injectable which is not available for components. More information can be found in issue ui-router#3110
You are trying to inject the '$transition$' object where you should be injecting the '$transitions' service into your controller. See the distinction in the documentation on this page:
https://ui-router.github.io/ng1/docs/latest/modules/injectables.html#transition
$transition$ isn't a global service, it's a locally scoped injectable.
https://github.com/angular-ui/ui-router/issues/3110
You can use component input bindings to address this:
.component('adminApplicants',{
bindings: { $transition$: '<' },
templateUrl:'admin.applicants.html',
controller:function($http,$transition$){
}
})
I want to inject Restangular in my app to communicate with via REST.
So, here I am know with an error:
Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- Api
Api is my own module here. What I'm doing:
Creating a main module called Dashboard
Creating a submodule called API
Now I want to use Restangular, but couldn't figure out how Angular is managing the dependencies...
Here is my sub-module where I inject Restangular:
angular.module( 'dashboard.api', ['restangular']).factory('Api', ['$http', 'Config', 'Restangular', function($http, Config, Restangular) {
My main module, Dashboard, doesn't need to inject Restangular, right?
angular.module( 'dashboard', [ 'dashboard.api'])
How is the injection-depency working within submodules? How can I
integrate Restangular in my app?
EDIT: Source file is included:
Okay I found the problem and the solution.
You have to differ between restangular(the module) and Restangular the service.
First, you have to include the main module of restangular into your app:
For me, it was this (polygon is a submodule of my app:
angular.module('polygons', ['restangular']);
Then, I wanted to inject restangular into a factory of that submodule:
angular.module('polygons').factory('polygonService', ['Restangular', polygonService]);
function polygonService(Restangular) {
// ...
});
This works for me. Hope this helps.
I am trying to inject $http serivce into app config, but getting "unknown provider $http error".
woi.config(['$routeProvider', '$locationProvider','$http', function($routeProvider, $locationProvider,$http){
$routeProvider
.when("/channels", {
templateUrl: test,
resolve: {
app: function($http){
}
}
})
]});
My question is , is it possible to inject $http serivce in app config ,and if not then what are the other ways to do ajax call before controller and template is called.
Thanks,
You can directly pass $http or any dependency into the function, without defining it at config function. The DI framework of Angular would inject dependencies for resolve object functions.
I have the following:
var app = angular
.module('app', ['ui.router', 'admin', 'home', 'questions', 'ngResource', 'LocalStorageModule'])
.config(['$sceProvider', '$stateProvider', '$locationProvider', 'localStorageService',
function ($sceProvider, $stateProvider, $locationProvider, localStorageService ) {
$sceProvider.enabled(false);
$locationProvider.html5Mode(true);
localStorageService.add('adminContent', 'xx');
This is giving me an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: localStorageService
http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=localStorageService
at hasOwnPropertyFn (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:78:12)
at http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:2997:19
at getService (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:3119:39)
at Object.invoke (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:3140:13)
at http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:3078:37
at Array.forEach (native)
at forEach (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:224:11)
at loadModules (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:3065:5)
at createInjector (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:3007:11)
at doBootstrap (http://127.0.0.1:81/Scripts/angular-v1.2.0-rc.2.js:1152:20)
http://errors.angularjs.org/1.2.0-rc.2/$injector/modulerr?p0=app&p1=Error%3…http%3A%2F%2F127.0.0.1%3A81%2FScripts%2Fangular-v1.2.0-rc.2.js%3A1152%3A20)
Is it not possible to use localStorage in config like this? I have included the code for the localstorage module and it's loaded before the app.js. It works in other parts of the application, but the same line does not work when placed in the app.config
Only providers and constants are injectable in configuration blocks. See the AngularJs documentation for more insights: http://docs.angularjs.org/guide/module (sektion "Module Loading & Dependencies").
Configuration blocks - get executed during the provider registrations
and configuration phase. Only providers and constants can be injected
into configuration blocks. This is to prevent accidental instantiation
of services before they have been fully configured.
While the accepted answer correctly answers the question, it does not offer any solution (for Angular newbies looking for the right way to do this).
You have access to services at run time, which happens after configuration. For instance:
angular.module('app').run(storeAdminContent);
storeAdminContent.$inject = ['localStorageService'];
function storeAdminContent(localStorageService) {
localStorageService.add('adminContent', 'xx');
}