Trouble with AngularJS Routes

Background

I ran into a little bit of trouble when working with AngularJS routes the other day and thought I would write up a quick post about it. My task was to build an application containing 1 – n number of tabs. When clicking on a tab, some HTML dynamically loads into the view. I decided to use AngularJS routes to handle the tab-switching.

The Problem

When I actually went to implement my AngularJS routes, I ran into a couple issues getting the routes to work as expected. I found a couple good sources that provided example implementations, similar to my requirements. However, all examples seemed to have a static set of tabs and load in static content. Because I needed my application to handle a dynamic number of tabs that would render dynamic content, I wanted to push my content retrieval into my controller.

My initial attempt at setting up my routes looked something like this:

1
2
3
4
5
6
7
angular.module('site', ['contentListServices', 'ngSanitize'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/nav/:navId', { controller: TabController})
            .otherwise({ redirectTo: '/nav/' });
    }
    ]);

This attempt caused my application to never follow the default route or fire my controller action upon clicking a tab. As I might have expected, I needed to define the templateUrl property of the route. But since I had no standard template or static content to pull in, I created a dummy template. The content of the template was a blank page.

1
2
3
4
5
6
7
8
9
10
angular.module('site', ['contentListServices', 'ngSanitize'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            // workaround to specify an html page that has no visible content.
            // angular requires this page to return content in order for it to work but
            // we want to set the url for content dynamically so we'll do that in the controller
            .when('/nav/:navId', { templateUrl: '/js/list/templates/content.html', controller: TabController })
            .otherwise({ redirectTo: '/nav/' });
    }
    ]);

Again, my symptoms were the same. No javascript errors but my application was not following my default route or trigger my controller. After some fumbling on the internet, I realized that not only did I need a templateUrl, I needed that template to render some HTML. A blank page wold not work. So, I simply made my template the ‘div’ where my dynamic content would be placed.

1
<div id="dynamic"></div>

Now in my TabController, I can retreive my dynamic content and place it in the ‘div’, defined above.

1
2
3
$http.get(myDynamicUrl).success(function(data) {
                angular.element('#dynamic').html($compile(data.trim())($scope));
            });

Finally, success! I had a working application.

Solution

In my brief experience with AngularJS, I have found it remarkably easy to use and fast to wire up dynamic/interactive applications. However, with my application failing silently and documentation thin, I thought it was important to quickly document my experience (even if my troubles seem fairly obvious, in retrospect). So remember, when working with AngularJS routes, always define a templateUrl and make sure that URL is valid and returns HTML.

One thought on “Trouble with AngularJS Routes

  1. Pingback: AngularJS Template Options | Active Intelligence

Leave a Reply