我想在我的应用程序中使用angular-ui-router
多个子模块创建角度嵌套路由;
在“ ui-router
”中,我们可以在我们的主应用配置中使用多视图$stateProvider
,但是当您在其他模块中时,不能在子模块之间切换。
例如,当您在“ module1
”中时,您不能声明“ module2
”。
那么,如何在模块之间切换?
我想在我的应用程序中使用angular-ui-router
多个子模块创建角度嵌套路由;
在“ ui-router
”中,我们可以在我们的主应用配置中使用多视图$stateProvider
,但是当您在其他模块中时,不能在子模块之间切换。
例如,当您在“ module1
”中时,您不能声明“ module2
”。
那么,如何在模块之间切换?
在此应用程序中,您可以轻松地在子模块之间路由:
创建主应用程序“ mainApp.js
”
angular.module("mainApp", [
"ui.router"
]);
angular.module("mainApp").config([
"$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("/", {
url: "/",
templateUrl: "/Application/Partials/home.html"
});
}
]);
index.html
为您的 mainApp创建“ ”:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<title>Angular Nested Routes with angula-ui-route</title>
</head>
<body>
<fieldset>
<legend>main menu</legend>
<a ui-sref="/">home</a>
</fieldset>
<ui-view></ui-view>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-ui-router.js"></script>
<!--Main Module-->
<script src="/Application/app.js"></script>
</body>
</html>
创建您的部分“ home.html
”
<h1>Home</h1>
registerStateApp
在您的项目中添加“ ”
angular.module("registerStateApp", []);
angular.module("registerStateApp").provider("$registerState", function ($stateProvider) {
var routes = [];
this.$set = function (stateProvider) {
var satetProviders = {
states: stateProvider
}
routes.push(satetProviders);
};
this.$get = function () {
return angular.forEach(routes, function (route) {
angular.forEach(route.states, function (state) {
$stateProvider.state(state.state, {
parent: state.parent,
moduleName: parent,
stateName: child,
name: state.pageName,
url: state.url,
views: state.views,
pageInfo: state.pageInfo
});
});
});
};
});
在您的主应用程序中更新“ mainApp.js
”并注入“ ”registerStateApp
angular.module("mainApp", [
"ui.router",
"registerStateApp"
]);
angular.module("mainApp").config([
"$stateProvider", "$urlRouterProvider", "$registerStateProvider",
function($stateProvider, $urlRouterProvider, $registerStateProvider) {
$urlRouterProvider.otherwise("/");
//registerStateApp
$registerStateProvider.$get();
//your main application routes
$stateProvider
.state("/", {
url: "/",
templateUrl: "/Application/Partials/home.html"
});
}
]);
创建您的子模块
angular.module("module1", []);
angular.module("module1").config(["$registerStateProvider",
function($registerStateProvider) {
//This is your routing in sub module
var stateProvider = [{
name: "module1",
state: "module1.page1",
url: "/module1",
views: {
"module1": {
templateUrl: "/Application/Modules/Module1/Partials/page1.html"
}
}
}];
$registerStateProvider.$set(stateProvider);
}
]);
//module2
angular.module("module2", []);
angular.module("module2").config(["$registerStateProvider",
function($registerStateProvider) {
var stateProvider = [{
name: "module2",
state: "module2.page1",
url: "/module2",
views: {
"module2": {
templateUrl: "/Application/Modules/Module2/Partials/page1.html"
}
}
}];
$registerStateProvider.$set(stateProvider);
}
]);
创建子模块主视图
<!DOCTYPE html>
<html ng-app="module1">
<head>
<title>module1</title>
</head>
<body>
<h1>This is module1</h1>
<button ui-sref="module2.page1">go to module2 page 1</button>
<div ui-view="module1"></div>
</body>
</html>
<!--module2-->
<!DOCTYPE html>
<html ng-app="module2">
<head>
<title>module2</title>
</head>
<body>
<h1>This is module2</h1>
<button ui-sref="module1.page1">go to module1 page 1</button>
<div ui-view="module2"></div>
</body>
</html>
在您的主应用程序中添加您的子模块状态“ mainApp.js
”
angular.module("mainApp", [
"ui.router",
"registerStateApp",
"module1",
"module2"
]);
angular.module("mainApp").config([
"$stateProvider", "$urlRouterProvider", "$registerStateProvider",
function($stateProvider, $urlRouterProvider, $registerStateProvider) {
$urlRouterProvider.otherwise("/");
$registerStateProvider.$get();
$stateProvider
.state("/", {
url: "/",
templateUrl: "/Application/Partials/home.html"
})
.state("module1", {
url: "/module1",
templateUrl: "/Application/Modules/Module1/index.html"
})
.state("module2", {
url: "/module2",
templateUrl: "/Application/Modules/Module2/index.html"
});
}
]);