Loading a Route within a Route in Angular

Question

I have some HTML which looks like this:

<body ng-controller="main">
    <div id="main">
      <div ng-view></div>
    </div>
</body>

Here is the controller:

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

app.controller('main', function($scope) {
    $scope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
        window.scrollTo(0, 0);
    });
});

And here is the Routing:

//ROUTING
app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'home.html'
        })
        .when('/courses', {
            templateUrl : 'views/coursesTeaching.html'
        });
});

Here is coursesTeaching.html

<div class="coursesList">
  [Display a list of courses here]
  <a href="#">Display Documentation</a>
</div>

And here is documentationWidget.html

Documentation Content is in this file

What I want to do is when they click on this link <a href="#">Display Documentation</a> It loads the documentationWidget.html content into the <div class="documentationWidget"></div> spot, I suppose it is a view within a view or a sub-route. I can't do it with jQuery Ajax or anything because I want to be able to use Angular variables inside of the loaded html file.

Basically you need to switch to `ui-router`, you could find the difference between `ngRoute` & `ui-router` over here http://stackoverflow.com/a/27645346/2435473 — Pankaj Parkar, Nov 06 '15 at 20:21

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

Take a look at ui-router as an alternative to ngRoute. This has good support for nested views amongst other things: https://github.com/angular-ui/ui-router

This has also been discussed in more detail here: Difference between ng-route & ui-router

edited May 23 '17 at 12:23

Community

1
1

answered Nov 06 '15 at 20:13

Gareth Whittaker

1,055
2
8
22

score 0 · Answer 2 · answered Nov 06 '15 at 20:13

0

I've been told you should use the third-party library ui-router for complex routing operations.

answered Nov 06 '15 at 20:13

Aaron

24,009
2
33
57

Loading a Route within a Route in Angular

2 Answers2