Injecting Global Variables into Angular Through ASP.NET MVC Master Page

As I am learning Angular, using it in conjunction with ASP.NET MVC I faced the following issue.  I need to inject some global variables into my Angular app.  Specifically, I would like to inject root url and current running version.  Root Url I will be using for communication with the server and version will be used for cache busting when requesting templates or partial views from the web site.  Yes, I could just inject them in _Layout.cshtml into global scope such as:

var baseUrl = '@(Url.Content("~/"))';

This approach has few issues for me.  First of all, I am using TypeScript, and you will have issues accessing random global variables.  I could use any keyword, but I feel a bit dirty doing this.  Also, this is not “Angular way”.  In Angular you should inject things through services, so that consuming code has clean access to the services and their content.  So, first step is to define interface for my global variable service:

module Main {

    interface IGlobalVariables {
        baseUrl: string;
        webApiBaseUrl: string;
        version: string;
    }
}

 

Of course, this is not JavaScript, I am using TypeScript, hence I have support for interface keyword.  Now, in my _Layout.cshtml I am going to create a module and a service.  I cannot use TypeScript there, but that is OK.  This will be the only one place in my entire app, so I can just take a quick shower after typing this code in. Smile

<script type="text/javascript">

    angular.module('globalsModule', []).factory('globalVars', function() {
        var globals = {};
        globals.baseUrl = '@(Url.Content("~/"))';
        globals.webApiBaseUrl = '@(Url.Content("~/api/"))';
        globals.version = '@(typeof(HomeController).Assembly.GetName().Version.ToString())';
        return globals;
    });
</script>

As you can see I define one service, called globalVars that I will be using my app.  I am injecting web api URL and main app url.  Also, I am setting the version to the assembly version, using just a random class in my app’s main assembly.  So far OK.  Now, how am I using this in my modules and other services?  Here is an example of a homeService.

module Main {

    angular.module('app.homeService', [], function ($provide) {
        $provide.factory('homeService', [<any>"$http", "globalsVars",
            function ($http: angular.HttpService, globalsVars: IGlobalVariables) {
                var homeService = {};
                // I can access my version and Urls here.
                return homeService;
            }]);
    });
}

See, now in any other service I have access to root API Url, that I can use in making http calls, using Http Service from Angular.  To get started with TypeScript and Angular, I just downloaded Angular.d.ts file using NuGet’s module called Schmulik.AngularTS to help me provide better IntelliSense.

Please let me know what you think.

Thanks.

2 Comments

  1. Pingback: Building Dynamic Menu with Angular JS, Web Api and ASP.NET MVC | Sergey Barskiy's Blog

  2. Pingback: Live Streaming Κάλυψη Συνεδρείων

Leave a Reply

Your email address will not be published. Required fields are marked *