I want to create angular nested routes in my application using angular-ui-router
with multi sub-modules;
In "ui-router
" we can use multi views in our main app config as $stateProvider
, but can't switch between sub-modules when you are in other module.
For example when you are in "module1
" you can not state to "module2
".
So, How can I switch between my modules?
In this application you can route between sub modules easily:
Create main application "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"
});
}
]);
Create "index.html
" for your 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>
Create your Partials "home.html
"
Add "registerStateApp
" in your project
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
});
});
});
};
});
Update "mainApp.js
" & inject "registerStateApp
" in your main application
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"
});
}
]);
Create your sub-modules
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);
}
]);
Create sub-module main view
<!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>
Add your sub-modules state in your main app "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"
});
}
]);