Injecting the Url variable from server side into a AngularJS app.

[Ingólfur Valsson]

As the development environment might be different from the production environment I have found it to be troublesome to hardcode url instead of using variables. This is especially true when virtual directories are involved.

I for example have a Angular app backed by WebApi. It might all work fine until I host it under a virtual directory, then I do not find the partial.html and api urls because I ignore them.

I had this idea I would create a service in the initialization of the index file where the app is bootstrapped.

    <script type="text/javascript">
        angular.module('MyApp').factory('urlService', function () {
            var urlService = {
                partialsUrl: '@Url.Content("~/Content/Partials/")',
                    Url: '@Url.RouteUrl("Default")'
                }
                return urlService;
            });
    </script>

and then inject this where needed but it isn't working. I get 

Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to: Error: [$injector:unpr] Unknown provider: urlService

Might be some timing issue, I added this script after both the angular.js and app.js

How do you guys normally do something like this? 

[HeavyMery]

This article is for you.

http://ify.io/lazy-loading-in-angularjs/

2014年2月26日水曜日、Ingólfur Valsson<ingo...@gmail.com>さんは書きました:

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Ingólfur Valsson]

Ok this is certainly interesting, but the problem is that the Lazy loading happens in the resolve, I actually need it sooner as the templateUrl in the routing is one of the things not being correctly located because of virtual directories. I guess I can somehow set the templateUrl inside the resolve (guess I can't use the loaded dependancy there though) or even set the template partials in .js code (they are harder to maintain though, is there a automatic process for that kind of thing?).

On Wednesday, February 26, 2014 3:17:43 PM UTC, Shindeok Kang wrote:

This article is for you.

http://ify.io/lazy-loading-in-angularjs/

2014年2月26日水曜日、Ingólfur Valsson<ingo...@gmail.com>さんは書きました:

As the development environment might be different from the production environment I have found it to be troublesome to hardcode url instead of using variables. This is especially true when virtual directories are involved.

I for example have a Angular app backed by WebApi. It might all work fine until I host it under a virtual directory, then I do not find the partial.html and api urls because I ignore them.

I had this idea I would create a service in the initialization of the index file where the app is bootstrapped.

    <script type="text/javascript">
        angular.module('MyApp').factory('urlService', function () {
            var urlService = {
                partialsUrl: '@Url.Content("~/Content/Partials/")',
                    Url: '@Url.RouteUrl("Default")'
                }
                return urlService;
            });
    </script>

and then inject this where needed but it isn't working. I get 

Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to: Error: [$injector:unpr] Unknown provider: urlService

Might be some timing issue, I added this script after both the angular.js and app.js

How do you guys normally do something like this? 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.

[Steve Jackson]

If you are trying to do this in a ".config()" block then you must use the ".provider()" method instead of the ".factory()" method to define your urlService.  You would then inject "urlServiceProvider".

Can you post the code where the error is happening? That may help with troubleshooting your issue.  I'm just taking a wild guess here...

Thanks,

Steve

[Ingólfur Valsson]

Even if I inject a provider would I be able to actually use the service inside the config? I understand that mostly you can do settings type things (I could set the base Url there for example) but I wasn't sure I could use any function or anything. But regardless I actually found a different solution that is much simpler and not specific to Angular. I had no idea this existed.

 

I set a <base href="BaseUrl" /> inside the <head> on the main page. This way all links I create (not starting with '/') work fine and are based on this url. In Asp.Net I did <base href="@Url.Content("~")" /> to go the base url.

There are supposedly also named links you can set there.

See here: http://barnabas.tumblr.com/post/52572083031/angular-js-relative-links