Javascript 如何使用UI.Router独立导航同一AngularJS应用程序的两个副本？

我正试图让两个相同的AngularJS应用程序副本在同一时间和平共存于同一页面上，同时让它们能够独立操作、路由

我已经让两个应用程序同时工作，在同一个页面上使用angular.bootstrap的组合，并给它们单独的应用程序名。但是，当在一个应用程序中单击链接时，它们都会路由到同一个位置

app.js

function bootstrap(id) {
    'use strict';
    /* App Module */

    var viewName = id + 'view';

    var $urlRouterProviderRef = null;
    var $stateProviderRef = null;

    var app = angular.module(id, [
        'core',
        'widgets',
        'directives',
        /*
         * Feature Areas
         */
        'layout',
        'barChartExample',
        'dataTableExample'
    ]);

    app
        .config(config);

    var states = [{
        "name": "barChartExample",
        "url": "/",
        "views": [{
            'name': viewName,
            'templateUrl': '/angularjs-boilerplate-portlet/app//barchart-example/barchart-example.html',
            'controller': 'BarChartExampleCtrlAs',
            'controllerAs': 'vm'
        }]
    }, {
        "name": "dataTableExample",
        "url": "/dataTableExample",
        "views": [{
            'name': viewName,
            'templateUrl': '/angularjs-boilerplate-portlet/app/datatable-example/datatable-example.html',
            'controller': 'DataTableExampleCtrlAs',
            'controllerAs': 'vm'
        }]
    }];

    config.$inject = ['$locationProvider', '$urlRouterProvider', '$stateProvider'];

    function config($locationProvider, $urlRouterProvider, $stateProvider) { 
        $urlRouterProviderRef = $urlRouterProvider;

        $locationProvider.html5Mode(false);
        $stateProviderRef = $stateProvider;
    }

    app.run(['$state',
        function($state) {
            angular.forEach(states, function(value, key) {
                var state = {
                    "url": value.url,
                    "views": {}
                };
                angular.forEach(value.views, function(view) {
                    state.views[view.name] = {
                        templateUrl: view.templateUrl,
                    };
                });

                $stateProviderRef.state(value.name, state);
            });
            $state.go("barChartExample");
        }
    ]);

    angular.bootstrap(document.getElementById(id), [id]);
}

index.html

<div id="App1"
     class="container-fluid" >

    <div data-ng-include="'/angularjs-boilerplate-portlet/app/layout/topnav.html'"></div>

    <div data-ui-view="App1view"></div>

</div>

<script>
    angular.element(document).ready(function() {
        bootstrap('App1');
    });
</script>

<div class="navbar" data-ng-controller="TopNavCtrl as vm">
    <div class="navbar-inner">
        <a class="brand" href="#">{{vm.title}}</a>
        <ul class="nav">
            <li>
                <a ui-sref="barChartExample" ui-sref-active="active">Bar Chart Example</a>
            </li>
            <li>
                <a ui-sref="dataTableExample" ui-sref-active="active">DataTable Example</a>
            </li>
        </ul>
    </div>
</div>

元素（文档）.ready（函数（）{
引导（“App1”）；
});

topnav.html

<div id="App1"
     class="container-fluid" >

    <div data-ng-include="'/angularjs-boilerplate-portlet/app/layout/topnav.html'"></div>

    <div data-ui-view="App1view"></div>

</div>

<script>
    angular.element(document).ready(function() {
        bootstrap('App1');
    });
</script>

<div class="navbar" data-ng-controller="TopNavCtrl as vm">
    <div class="navbar-inner">
        <a class="brand" href="#">{{vm.title}}</a>
        <ul class="nav">
            <li>
                <a ui-sref="barChartExample" ui-sref-active="active">Bar Chart Example</a>
            </li>
            <li>
                <a ui-sref="dataTableExample" ui-sref-active="active">DataTable Example</a>
            </li>
        </ul>
    </div>
</div>

条形图示例


数据表示例

这方面的用例是什么？基于Angular的liferay portlets不，我的意思是，为什么您需要在同一页面上使用两个angularjs环境？因此这些应用程序将生活在portlets中—基本上是可以拖放到门户CMS内页面上的小型应用程序—并且您可以使portlet成为可实例化的。所以，我想知道您是否可以拥有独立导航的InstanceCable应用程序。