Separating ng-route routing within same domain

Question

I have a main website that uses index.html with a side nav and ng-route to load content into it using ng-view. That works fine. Currently, I have an event.html page that is an entirely different layout that needs to route based on a separate ng-app. Currently, my url looks like this:

nameOfOrganization.com <-- This is using index.html and can do things like #/about, and load a page based on that context. However, if I want to go to the event.html I currently have to do this: nameOfOrganization.com/event.html#/

My issue is here. I want to have it so it would load this entirely different page layout doing something like nameOfOrganization.com/event#/, and then when I want to navigate to areas related to that page I could do nameOfOrganization.com/event#/about. But, as of right now, my routing looks like this:

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);
});

Now when I click on the href on the main event.html page, I have it sending #instructors. But that changes the location.path to nameOfOrganization.com/#/instructors, which isn't in this routing system, or the one used on index.html, so I end up being routed back to nameOfOrganization.com.

Is there a way I can do this that plays nice with the system I have in place and doesn't require too much upheaval? Also, for reference, the reason I am doing it this way is because I am using my schools server space, and they don't allow me to do any sort of back end routing, so this is what I am stuck with at the moment.

Answer 1

I'm not sure i understood your question, but it seems you want a subroute of a route. You seem to be using router ui, so i don't know how this plays with it, but, you can do a subroute for a given route like so:

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

After the routing your url will be something like #/hello/param. In your second controller you can determine based on your $location.absURL() where you wanted to go, load a specific template in there (maybe with a bunch of ng-if 's for a quick solution). Something like, if a - load this template etc.