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

Question

我试图制作两张相同 AngularJS应用程序的副本，同时在同一页面上和平共存，同时让他们能够独立操作，路由。 / p>

我已经让两个应用程序同时工作，在同一页面上使用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>

topnav.html

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