在同一域内分离 ng-route 路由

Question

我有一个主要网站，它使用 index.html 和侧边导航和 ng-route 来使用 ng-view 加载内容。那很好用。目前，我有一个 event.html 页面，它是一个完全不同的布局，需要基于单独的 ng-app 进行路由。目前，我的 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.

有没有一种方法可以让我做到这一点，既能很好地适应我现有的系统，又不需要太多的变动？另外，作为参考，我这样做的原因是因为我正在使用我的学校服务器 space，他们不允许我做任何类型的后端路由，所以这就是我被卡住的原因与此刻。

Answer 1

我不确定我是否理解你的问题，但你似乎想要一条路线的子路线。您似乎正在使用路由器 ui，所以我不知道它是如何发挥作用的，但是，您可以像这样为给定的路线做一个子路线：

   .when('/hello',{
        templateUrl : 'pages/hello.html',
        controller : 'helloController'
    })
    //route for individual breeder
    .when('/hello/:param',{
        templateUrl : 'pages/differentTemplate.html',
        controller : 'anotherControllerr'
    })

路由后，您的 url 将类似于 #/hello/param。在你的第二个控制器中，你可以根据你的 $location.absURL() 确定你想去的地方，在那里加载一个特定的模板（可能有一堆 ng-if 的 quick 解决方案） .像 if a - load this template 等等

在同一域内分离 ng-route 路由

Separating ng-route routing within same domain

javascript

angularjs

ngroute

angularjs-ng-route