javascript - 同じドメイン内での ng-route ルーティングの分離

Question

サイドナビゲーションとng-routeを備えたindex.htmlを使用して、ng-viewを使用してコンテンツをロードするメインWebサイトがあります。それはうまくいきます。現在、別の ng-app に基づいてルーティングする必要があるまったく異なるレイアウトの event.html ページがあります。現在、私のURLは次のようになっています：

nameOfOrganization.com <-- これは index.html を使用しており、#/about などを実行し、そのコンテキストに基づいてページをロードできます。ただし、event.html に移動したい場合は、現在これを行う必要があります: nameOfOrganization.com/event.html#/

私の問題はここにあります。nameOfOrganization.com/event#/ のように、このまったく異なるページ レイアウトをロードし、そのページに関連する領域に移動したい場合は、nameOfOrganization.com/event#/about を実行できるようにしたいと考えています。しかし、現時点では、私のルーティングは次のようになります。

var app = angular.module('event', ['ngRoute']);

app.controller('RouteController', ['$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
}]);

app.controller('LandingController', ['$scope', '$rootScope', '$routeParams', '$timeout', '$http', function($scope, $rootScope, $routeParams, $timeout, $http) {
    $rootScope.title = 'Event'; // Page name in browser bar
    $scope.$routeParams = $routeParams;

    $http.get("../json/headshots.json").success(function(data) {
        $scope.headshots = data;
        // So we give the DOM a second to load the data
        setTimeout(function() {
            $('.modal-trigger').leanModal();
        }, 1500);
    });

    // Always make sure we are looking at the top of the page
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
}]);

app.controller('InstructorsController', ['$scope', '$rootScope', '$routeParams', '$timeout', '$http', function($scope, $rootScope, $routeParams, $timeout, $http) {
    $rootScope.title = 'Instructors'; // Page name in browser bar
    $scope.$routeParams = $routeParams;

    $http.get("../json/instructors.json").success(function(data) {
        $scope.headshots = data;
    });

    // Always make sure we are looking at the top of the page
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
}]);

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/event-landing-page.html',
            controller: 'LandingController',
        })
        .when('/instructors', {
            templateUrl: 'pages/instructors.html',
            controller: 'InstructorsController',
        })
        .otherwise({
            redirectTo: '/'
        });

    // Leave this false so people can access pages without having
    // to go to cwru.edu/swingclub first.
    $locationProvider.html5Mode(false);
});

メインの event.html ページの href をクリックすると、#instructors が送信されます。しかし、それによって location.path が nameOfOrganization.com/#/instructors に変更されます。これは、このルーティング システムまたは index.html で使用されているシステムにはないため、nameOfOrganization.com に戻されてしまいます。

私が使用しているシステムでうまく機能し、あまり大きな混乱を必要としない方法はありますか? また、参考までに、私がこのようにしている理由は、学校のサーバー スペースを使用していて、バックエンド ルーティングを許可していないためです。 .