AngularJS Routing & jQuery Conflict

Question

everyone. Has anyone else encountered jQuery console errors when routing to new views with AngularJS?

An example of the error is

Uncaught Error: Syntax error, unrecognized expression: #/projects/project-id

Everything still works, but that error gets thrown whenever a link is clicked that is related to my Angular routing. The error shows up attributed to jQuery, so I assume it's an issue with it not liking links starting with "#/"

HTML

<div class="project" ng-repeat="project in projects">
    <a href="#/projects/{{project.id}}">
        <h4>{{ project.name }}</h4>
        <p>{{ project.subtitle }}</p>
    </a>
</div>

JS

app.config(function ($routeProvider) {
     $routeProvider
     .when('/', {
         controller: "HomeController",
         templateUrl: "js/angular/views/home-view.html"
     })
     .when('/projects/:projectId', {
         controller: 'ProjectController',
         templateUrl: 'js/angular/views/project-view.html',
     })
     .otherwise({
         redirectTo: '/'
     });
});

The console error isn't a showstoppper, because like I said, everything still works. But if anyone has encountered this before and has a fix, I'd really appreciate it.

jQuery and angular sometimes don't play well together. Whats your jQuery look like? — APassanisi
– APassanisi, Commented Jul 20, 2015 at 6:35

David Pelayo · Accepted Answer · 2015-07-21 06:46:46Z

1

Set the $locationProvider to work in HTML5 mode. See here: https://docs.angularjs.org/api/ng/provider/$locationProvider

An example of how to use it would be the following:

app.config(function ($locationProvider) {
  // use the HTML5 History API
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

answered Jul 21, 2015 at 6:46

David Pelayo

1581 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Routing & jQuery Conflict

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related