CODEWITHSUNDEEP
htmlangularjs
Matt Brewerton
Matt Brewerton

Reputation: 896

AngularJs Dynamic/Multiple HTML Templates

I'm working on an AngularJs/MVC app with Web API etc. which is using a CDN. I have managed to whitelist two URLs for Angular to use, a local CDN and a live CDN (web app hosted in Azure).

I can successfully ng-include a template from my local CDN domain, but the problem arises when I push the site to a UAT / Live environment, I cant be using a template on Localhost.

I need a way to be able to dynamically get the base url for the templates. The location on the server will always be the same, eg: rooturl/html/templates. I just need to be able to change the rooturl depending on the environment.

I was thinking if there was some way to store a global variable, possibly on the $rootScope somewhere that I can get to when using the templates and then set that to the url via Web API which will get return a config setting.

For example on my dev machine the var could be http://Localhost:52920/ but on my uat server it could be https://uat-cdn.com/

Any help would be greatly appreciated as I don't want to store Js, css, fonts etc on the CDN but not the HTML as it feels nasty.

Thanks I'm advance!

Upvotes: 1

Views: 508

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21505

I think it's good practice to keep environment and global config stuff outside of Angular altogether, so it's not part of the normal build process and is harder to accidentally blow away during a deploy. One way is to include a script file containing just a single global variable:

var config = {
    myBaseUrl: '/templates/',
    otherStuff: 'whatever'
}

...and expose it to Angular via a service:

angular.module('myApp')
    .factory('config', function () {
        var config = window.config ? window.config : {}; // (or throw an error if it's not found)

        // set defaults here if useful
        config.myBaseUrl = config.myBaseUrl || 'defaultBaseUrlValue';
        // etc

        return config;
}

...so it's now injectable as a dependency anywhere you need it:

.controller('fooController', function (config, $scope), {
    $scope.myBaseUrl = config.myBaseUrl;
}

Functionally speaking, this is not terribly different from dumping a global variable into $rootScope but I feel like it's a cleaner separation of app from environment.

Upvotes: 2

Raulucco
Raulucco

Reputation: 3426

If you decide to create a factory then it would look like this: 

angular.module('myModule', [])
.factory('baseUrl', ['$location', function ($location) {

  return {
    getBaseUrl: function () {
     return $location.hostname;
    }
  };
}]);

A provider could be handy if you want to make any type of customization during config. Maybe you want to build the baseurl manually instead of using hostname property.

If you want to use it on the templates then you need to create a filter that reuses it:

 angular.module('myModule').filter('anchorBuilder', ['baseUrl', function (baseUrl) {
   return function (path) {
     return baseUrl.getBaseUrl() + path;
   }
}]);

And on the template:

<a href="{{'/some/path'|anchorBuilder}}"></a>

EDIT

The above example was to create links but if you want to use it on a ng-include directive then you will have a function on your controller that uses the factory and returns the url.

// Template

<div ng-include src="urlBuilder('path')"></div>

//Controller

$scope.urlBuilder = function (path) {
   return BaseUrl.getBaseUrl() + path;
};

Make sure to inject the factory in the controller

Upvotes: 1

Related Questions