I'm working on a quite large project that uses very old angularjs (version 1.4.3) along with ui-router (version 0.2.15). Updating to newer version at the moment it's not possible.
The app use simple state-routing. What I succesfully tried to achieve was to open a modal (ui.bootstrap) with a sub-routing within.
First I tried to use ui-router only, but the ui-router do not recognize ui-view inside modal template so it not worked.
After that I tried to use ui-router for normal navigation only and ngRoute for managing the routing inside the modal and it worked.
My question is if the use of both ui-router and ngRoute could cause side-effects or other hard-to-detect issues.
Here is a Plunker with a my test app. Plunker
angular.module('router_app', ['ui.router', 'ui.bootstrap', 'ngRoute'])
.config(function ($stateProvider, $routeProvider) {
$stateProvider
.state('my_state', {
url: '/my_state',
views: {
'my_view': {
templateUrl: '/templates/my_state.tpl',
controller: 'ctrl_my_state'
}
}
});
$routeProvider
.when("/my_state/my_modal", {
templateUrl: "/templates/my_modal.tpl",
controller: "ctrl_my_modal"
})
.when("/my_state/my_modal/my_modal_a", {
templateUrl: "/templates/my_modal_a.tpl",
controller: "ctrl_my_modal_a"
})
.when("/my_state/my_modal/my_modal_b", {
templateUrl: "/templates/my_modal_b.tpl",
controller: "ctrl_my_modal_b"
});
})
.run(function ($state) {
$state.go("my_state");
})
<div ng-controller="ctrl_my_modal">
MODAL
<button ng-click="closeModal()">close</button>
<button ng-click="gotoA()">goto a</button>
<button ng-click="gotoB()">goto b</button>
<div ng-view></div>
</div>
<html ng-app="router_app">
<body>
<div ui-view="my_view"></div>
</body>
</html>
