Здесь я дам вам стандартное решение вашей проблемы. Вы должны создать отдельное приложение для каждого поддомена. Я создал образец приложения, чтобы продемонстрировать поток.
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="[email protected]2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="app.manager.js"></script>
</head>
<body>
<load-application></load-application>
</body>
</html>
app.js
/**
* @name app
*
* Lets create angular application module
* if second parameter is passed with enpty array [] or with dependecies , is * called angular module setter
*
* angular.module('app', []); Setter
* angular.module('app'); Getter
*/
angular
.module('app', ['appLoader']);
/**
* app.administrator application for aministrator subdomain
*/
angular
.module('app.administrator', ['ui.router']);
/**
* app.employee application for employee subdomain
*/
angular
.module('app.employee', ['ui.router']);
/**
* Lets create a application loader
* This component is going to load sub domain specific application
*/
angular
.module('appLoader', ['app.administrator', 'app.manager', 'app.employee'])
.directive("loadApplication", ['$location', function($location) {
function getDomain() {
console.log($location.host());
//get domain name here
return 'manager';
}
return {
restrict: 'E',
controller: function($scope, $element, $attrs, $transclude) {},
template: function() {
var domainName = getDomain(),
templateName = '';
switch (domainName) {
case 'manager':
templateName = '<app-manager></app-manager>';
break;
case 'employee':
templateName = '<app-employee></app-employee>';
break;
case 'administrator':
templateName = '<app-administrator></app-administrator>';
break;
}
return templateName;
},
link: function($scope, element, attrs) {
console.info('loader application');
}
};
}]);
angular
.module('app.administrator')
.directive("appAdministrator", ['$location', function($location) {
return {
restrict: 'E',
template: '<h2>{{applicationName}}</h2>',
link: function($scope, element, attrs) {
$scope.applicationName = 'Application Administrator';
}
};
}]);
angular
.module('app.employee')
.directive("appEmployee", ['$location', function($location) {
return {
restrict: 'E',
template: '<h2>{{applicationName}}</h2>',
link: function($scope, element, attrs) {
$scope.applicationName = 'Application Employee';
}
};
}]);
app.manager.JS
angular
.module('app.manager', ['ui.router']);
angular
.module('app.manager')
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('index', {
url: '/',
template: '<ul><li><a ng-href="#" ui-sref="demopage1">Demo page 1</a></li><li><a ng-href="#" ui-sref="demopage2">Demo page 2</a></li></ul>'
})
.state('demopage1', {
url: '/demopage1',
template: '<ul><li><a ng-href="#" ui-sref="demopage1">Demo page 1</a></li></ul>'
})
.state('demopage2', {
url: '/demopage2',
template: '<ul><li><a ng-href="#" ui-sref="demopage1">Demo page 1</a></li></ul>'
})
});
angular
.module('app.manager')
.directive("appManager", ['$location', function($location) {
return {
restrict: 'E',
template: '<h2>{{applicationName}}</h2><div ui-view></div>',
link: function($scope, element, attrs) {
$scope.applicationName = 'Application Manager';
}
};
}]);
Working plunker is here
Я создал 3 приложения для трех доменов, каждое приложение работает независимо друг от друга. Я реализовал маршруты пользовательского интерфейса в приложении app.manager. Вы можете реализовать то же самое в приложениях отдыха.
Позволяет мне узнать, есть ли у вас какие-либо проблемы?
У вас должны быть отдельные угловые приложения для каждого домена с его собственной маршрутизацией, контроллерами и т. Д. – Grievoushead
Вам нужно будет разобрать URL-адрес – charlietfl
@Grievoushead, если приложение не является одинаковым для всех 3, и единственная разница - это домен переменная – charlietfl