你好我是AngularJS的新手，我做了我的研究，我知道重定向到子域会导致页面刷新。我想知道的是如何在点击链接时检查子域是什么，并加载正确的视图和控制器。
我使用通配符子域，但我现在基本上有三个：
每个子域都应该将您重定向到各自的仪表板视图和控制器。
主网址例如example.com将引导您访问网站。
我已经设置了这样的状态：
app
app.administrator
app.administrator.dashboard
app.manager
app.manager.dashboard
app.employee
app.employee.dashboard
答案 0 :(得分：2)
在这里，我将为您提供标准的问题解决方案。您应该为每个子域创建一个单独的应用程序。我已经创建了一个示例应用程序来演示流程。
<强>的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="jquery@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="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.5" 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="angular.js@1.4.x" 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';
}
};
}]);
我为三个域创建了3个应用程序，每个应用程序独立工作。我已在 app.manager 应用程序中实现了UI路由。您可以在休息应用程序中实现相同的功能。
如果您有任何疑虑，请告诉我？
答案 1 :(得分：0)
如果您尚未在基于角度的应用中使用名为 ui.router 的路由模块，建议您阅读here。我相信它比Angular 1.x中的ngRoute模块更强大。
根据我对您的子域的理解，我认为您可以将它们安排为“app”下的嵌套域（或更准确地说，状态）。如果您的“应用”的根网址类似于“/main/”，则子域将继承该根网址，并采用“/main/administrator”和“/main/administrator/dashboard”等表单/ p>
每个状态（包括嵌套状态）都可以拥有自己的控制器，您可以使用$state中的ui.router服务通过调用以获取状态名称（或您所说的子域名）： $state.$current.name
我希望这会有所帮助
作为我以前工作的一个例子。此处主应用的网址为“/webapp”，其余状态为嵌套状态，其网址以“/webapp”开头，例如对于州“home.blogs”，其网址为“/webapp/blogs”。如果它仍然令人困惑，我建议您花一些时间阅读Github上的ui.router文档。
angular
.module('blogFrontendApp', [
'ui.router'
])
config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/webapp/blogs');
$stateProvider.state('home', {
// abstract: true,
url: '/webapp',
views: {
'' : {
templateUrl: 'views/main.html'
},
'rightPanel@home' : {
templateUrl: 'views/rightPanel.html'
},
'mainContent@home' : {
templateUrl: 'views/mainContent.html'
}
}
})
.state('home.blogs', {
//to be shown in mainContent@home
url: '/blogs',
templateUrl: 'views/home_blogs.html'
})
.state('home.singleBlog', {
url: '/blog/:blogId/:blogTitle',
templateUrl: 'views/single_blog.html',
controller: 'blogArticleController as currentBlogView',
resolve: {
BlogService : 'BlogService',
blogObj : function(BlogService, $stateParams) {
return BlogService.getBlogById($stateParams.blogId);
}
}
})
.state('home.blogListInCategory', {
url: '/blogs/category/:categoryId',
templateUrl: 'views/blog_list_in_category.html',
controller: 'blogListController as blogListView'
})
.state('home.publishBlog', {
url: '/blogs/:categoryId/new',
templateUrl: 'views/publish_blog.html',
controller: 'blogListController as writeBlogView'
})
}