angularjsangular-ui-routerngroute

ng-view nested in ui-view, ui-router and ngRoute at same time

ui-router and ngRoute at the same time

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");
})

my_modal.tpl

<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>

index.html

<html ng-app="router_app">
    <body>
        <div ui-view="my_view"></div>
    </body>
</html>
Solution

  • I continued trying to not use two different routers at the same time and finally I came up with a working solution. It is based on this. I was running around the solution for some time, but finally I've got it working as I wanted.

    Here is my final test app.