Разделение маршрутизации ng-маршрута в пределах того же домена

Question

У меня есть основной сайт, который использует index.html с боковым навигатором и ng-маршрутом для загрузки контента в него с помощью ng-view. Это прекрасно работает. В настоящее время у меня есть страница event.html, которая представляет собой совершенно другой макет, который нужно маршрутизировать на основе отдельного ng-приложения. В настоящее время мой 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); 
}); 

Теперь, когда я нажимаю на HREF на главной странице event.html, он у меня отправка #instructors. Но это изменяет путь location.path к имениOfOrganization.com/#/instructors, которого нет в этой системе маршрутизации, или той, которая используется в index.html, поэтому я в конечном итоге перенаправляется обратно на nameOfOrganization.com.

Есть ли способ, которым я могу сделать это, что хорошо играет с системой, которую я имею на месте, и не требует слишком больших потрясений? Кроме того, для справки, причина, по которой я делаю это так, заключается в том, что я использую пространство для своих школ, и они не позволяют мне делать какие-либо обратные маршруты, так что это то, за что я застрял в данный момент ,

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 для быстрого решения). Что-то вроде: if a - load this template и т. Д.