Question

我有一个主网站，它使用带有侧面导航和ng-route的index.html，使用ng-view将内容加载到其中。这很好。目前，我有一个event.html页面，它是一个完全不同的布局，需要基于单独的ng-app进行路由。目前，我的网址如下所示：

nameOfOrganization.com＆lt; - 这是使用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。

有没有办法可以做到这一点，与我现有的系统配合好并且不需要太多的动荡？另外，作为参考，我这样做的原因是因为我正在使用我的学校服务器空间，他们不允许我做任何类型的后端路由，所以这就是我所困扰的此时此刻。

Answer 1

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

// NOTE: Try to only create jQuery objects once and reuse them
$window = $(window);
$mobile_nav = $("#mobile_nav");

var mobileNav = function() {
    if ($window.width() < 751) {
        $mobile_nav.hide();
    } else {
        $mobile_nav.show();
    }
};

mobileNav();
$(window).resize(mobileNav);

路由后，您的网址将类似于.when('/hello',{ templateUrl : 'pages/hello.html', controller : 'helloController' }) //route for individual breeder .when('/hello/:param',{ templateUrl : 'pages/differentTemplate.html', controller : 'anotherControllerr' })。在您的第二个控制器中，您可以根据您想要去的#/hello/param来确定，在那里加载一个特定的模板（可能有一堆$location.absURL()用于快速解决方案）。像ng-if等等。

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

1 个答案: