Dynamic routing by sub domain with AngularJS

Question

How do I override template URL based on sub domain?

All of my sub domains point to the same doc root.

Base level domain: example.com

$routeProvider.when('/', {templateUrl: 'views/example.com/home.html'});

Sub-domain: sub.example.com

$routeProvider.when('/', {templateUrl: 'views/sub.example.com/home.html'});

Partials should be indifferent to static / dynamic content. If a controller inside a partial is making service calls for data this interceptor shouldn't interfere with that.

Your template url looks to be just a relative path to the path of your index file. So to change domains (careful of same origin policy) you'd have to have these paths be absolute, possibly using a constant to configure them. — Paul Ryan
– Paul Ryan, Commented Jun 2, 2013 at 22:04
@xmltechgeek Sorry but I think you may have skipped over the part where the sub domains are pointing to the same doc root --- SOP has nothing to do with it. The problem here is that I need a way to detect domain, than intercept the templateUrl and change it for different sub domains. — Dan Kanze
– Dan Kanze, Commented Jun 2, 2013 at 22:52
Not sure your going to be able to do that with the default angular router. You should be able to use the templateProvider in the ui-router (github.com/angular-ui/ui-router) from the angular-ui team to do this though. See github.com/angular-ui/ui-router/…. — Paul Ryan
– Paul Ryan, Commented Jun 2, 2013 at 22:57

Barnabas Kendall · Accepted Answer · 2013-06-02 23:04:50Z

3

Easy and clean: I would inspect window.location in the function that sets up your routes, set a variable depending on the subdomain, then use that variable when setting up the routes. As in:

var isSubDomain = window.location.host.indexOf("sub") == 0
var urlPath = isSubDomain ? "sub.example.com" : "example.com";

...

$routeProvider.when('/', {templateUrl: 'views/' + urlPath + '/home.html'});

TL;DR: use JavaScript, not Angular

answered Jun 2, 2013 at 23:04

Barnabas Kendall

4,3171 gold badge34 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Kanze Over a year ago

this is dirty considering there are already route providers that have the host name available to you. You can access $location.host() wihtin .run()

HaveAGuess Over a year ago

So Dan if he was using $location.host() it would be ok and easier to read than above right?

Community · Accepted Answer · 2017-05-23 12:31:27Z

A continuation fo this problem lead to this question, but the answer is applicable for both:

I decided to go with a local stradegy for two reasons:

There is no additional overhead of XML request.
404 messages wont polute console logs when resource doesn't exist.

services.js

factory('Views', function($location,$route,$routeParams,objExistsFilter) {

  var viewsService = {};
  var views = {
    subdomain1:{
      'home.html':'/views/subdomain1/home.html'
      },
    subdomain2:{

    },
    'home.html':'/views/home.html',
  };

  viewsService.returnView = function() {
    var y = $route.current.template;
    var x = $location.host().split(".");
    return (x.length>2)?(objExistsFilter(views[x[0]][y]))?views[x[0]][y]:views[y]:views[y];
  };

  viewsService.returnViews = function() {
    return views;
  };

  return viewsService;
}).

controllers.js

controller('AppController', ['$scope','Views', function($scope, Views) {    
  $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
    $scope.page = Views.returnView();
  });
}]).

filters.js

filter('objExists', function () {
  return function (property) {
    try {
      return property;
    } catch (err) {
      return null
    }
  };
});

Collectives™ on Stack Overflow

Dynamic routing by sub domain with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related