Service injection in config. AngularJS

Question

I have this service:

app.service("UserService", function(){

    var userService = {};
    userService.userInfo = [
        {firstName: "John", lastName: "Doe"},
        {firstName: "Carl", lastName: "Smith"}
        ];
    return userService;
});

And I want to inject it into a .config to define routes (for which I'm using ui-router)

app.config(["userService", function($stateProvider, userService){
     $stateProvider
    .state("#",{
        templateUrl: "index.html",
        controller: "UserListController"
    })
    .state('users', {
        url: '/user/:username',
         templateUrl: "view/userProfile.html",
        controller: "UserListController",
         params: { username: userService.userInfo[0].firstName}
           })
...

This isn't working properly. Any ideas on can I inject the data in that service to be accessed by the .config?

Thank you :)

see this https://stackoverflow.com/questions/15937267/inject-service-in-app-config — Anurag, Aug 07 '17 at 14:23
Maybe it's just a typo in your quetion, but your service name start with an uppercase but when you include it you forgot this uppercase — JeanJacques, Aug 07 '17 at 14:35
No it's not about that I think. The problem is it seems it cannot access the userService.userInfo[0].firstName in params. If i just change that for a string it works perfectly fine — N.Car, Aug 07 '17 at 14:43

score 0 · Answer 1 · answered Aug 07 '17 at 14:22

0

For injections in AngularJS, if you are going to give the names you are going to inject, you need to give all the names and the same way you declared it.

In this case:

app.config(["$stateProvider", "UserService", function($stateProvider, userService){

answered Aug 07 '17 at 14:22

Pedro Drewanz

1,242
13
14

I just added it but it's still not working. I think he's not recognising this userService.userInfo[0].firstName as a string. If I change it for {username: "click me"} it works just fine – N.Car Aug 07 '17 at 14:28
No, actually it doesn't work when I inhect the userService as you said. { app.config(["$stateProvider", "userService", function($stateProvider, userService){ $stateProvider .state("#",{ templateUrl: "index.html", controller: "UserListController" }) .state('users', { url: '/user/:username', templateUrl: "view/userProfile.html", controller: "UserListController", params: { username: "click me"} } – N.Car Aug 07 '17 at 14:34

JeanJacques · Accepted Answer · 2017-08-07T14:50:28.933

0

During the configuration you can only access to providers, in your case you can access to UserServiceProvider by injecting it in your app.config like this :

app.config(function(UserServiceProvider){
    // Config stuffs...
})

With this provider you can access your service property with $get() like this by example :

UserServiceProvider.$get().userInfo[0]

Here is a working plunker

edited Aug 07 '17 at 14:50

answered Aug 07 '17 at 14:43

JeanJacques

1,754
1
12
25

But how can I can access the data inside the .config for the routes? The main goal is that the url will be according to the username – N.Car Aug 07 '17 at 14:48
@N.Car You need to replace `params: { username: userService.userInfo[0].firstName}` by `params:{username: UserServiceProvider.$get().userInfo[0].firstName}` and to include `UserServiceProvider` in the config declaration – JeanJacques Aug 07 '17 at 14:49
Works!!! Thank you very much! So basically when you want something to be injected in a .config you need to make it a provider and then user the $get() in order to obtain what's inside of it? – N.Car Aug 07 '17 at 14:55
Not really to make it a provider, but to use its provider and then yes use $get(). But I don't think t's a proper way to use providers and $get(). – JeanJacques Aug 07 '17 at 14:58

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Constants are injectable in both the config phase and the run phase:

app.constant("UserConstant", {
    userInfo:[
        {firstName: "John", lastName: "Doe"},
        {firstName: "Carl", lastName: "Smith"}
    ]
});

From the Docs:

constant(name, value);

Register a constant service with the $injector, such as a string, a number, an array, an object or a function. Like the value, it is not possible to inject other services into a constant.

But unlike value, a constant can be injected into a module configuration function (see angular.Module) and it cannot be overridden by an AngularJS decorator.

Angular $provider API Reference - constant

Thanks!! It also works! I'm still learning AngularJS and didn't know about constant. Will definitely look into it :) — N.Car, Aug 09 '17 at 01:07

Service injection in config. AngularJS

3 Answers3

constant(name, value);