routing bug in an angularjs app with jQuery

Question

I'm trying to get set up an angularJS app with jQuery and I'm using the angular routing system for urls doing something like the following:

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

app.config(function($routeProvider) {
  $routeProvider.when('/start_page', {
    templateUrl: 'path/to/template',
    controller: 'StartPageController'
  });

  $routeProvider.when('/container/:container/thing/:thing', {
    templateUrl: 'path/to/template',
    controller: 'ThingsInContainersController'
  });

  $routeProvider.otherwise({ redirectTo: '/start_page' });

})

I can navigate to the start page which has an interface that allows me to select a container_id and a thing_id and then sends me to the route for the container and thing which all works perfectly. The problem is that if I refresh the container thing page then I get the following error:

Uncaught Error: Syntax error, unrecognized expression: [href=#container/1/thing/2]

which seems to be a jQuery error from the stack trace. The trace doesn't mention my code at all. I tried a few things and it seems that whenever I enter a url with more than one / after the # I get the error instead of being properly redirected to the start page. My solution for now was to use -s instead of /s as a url delimiter which seems to have worked but I suspect there is actually a correct way of doing this and I'm wondering what it is.

My current solution:

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

app.config(function($routeProvider) {
  $routeProvider.when('/start_page', {
    templateUrl: 'path/to/template',
    controller: 'StartPageController'
  });

  $routeProvider.when('/container-:container-thing-:thing', {
    templateUrl: 'path/to/template',
    controller: 'ThingsInContainersController'
  });

  $routeProvider.otherwise({ redirectTo: '/start_page' });

})

Doesn't the href need to be "#/container/1/thing/2"? Also, your element probably needs to use ng-href if you are using handle bars in your url for templating it out. — mortalapeman
– mortalapeman, Commented Nov 6, 2013 at 15:37
There is no reason to create your url in that fashion. You should be doing this: /mycontainerthingurl/:containerID/:thingID — m.e.conroy
– m.e.conroy, Commented Nov 6, 2013 at 15:56
@mortalapeman there is no link. The start_page responds to a form submission with a $location.path() call and that was working fine. The issue came when I refreshed the page. — olleicua
– olleicua, Commented Nov 6, 2013 at 18:07

olleicua · Accepted Answer · 2013-11-06 18:05:09Z

I had a bug elsewhere in my codebase without realizing it. I was using the following in code that was for a different part of the app that uses # urls to control bootstrap tabs:

var activateTab = function() {
  var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
  activeTab && activeTab.tab('show');
}

The problem was that replace by default only replaces the first occurrence of the pattern so it was throwing an error when I had multiple /s.

The solution of course:

var activateTab = function() {
  var activeTab = $('[href=' + window.location.hash.replace(/\//g, '') + ']');
  activeTab && activeTab.tab('show');
}

Collectives™ on Stack Overflow

routing bug in an angularjs app with jQuery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related