Question

I am learning AngularJS and have built a small application. Now that it’s functionally complete, I’d like to style it up using jQuery Mobile.

I’ve dropped in tigbro’s jquery-mobile-angular-adapter and as a (known) result, none of my previous routes are working.

There’s a solution outlined here, but unfortunately I don’t yet understand how to apply it to my routing. Where would the module.config line to set jqmCompatMode to false go?

My routes look like this currently:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
            when('/finds', {templateUrl: 'views/finds-list.html', controller: FindListCtrl}).
            when('/add_find', {templateUrl: 'views/add-find.html', controller: AddFindCtrl}).
            when('/add_find/success', {templateUrl: 'views/add-find-success.html', controller: AddFindSuccessCtrl}).
            when('/find/:findId', {templateUrl: 'views/specific-find.html', controller: SpecificFindCtrl}).
            when('/find/edit/success', {templateUrl: 'views/edit-find-success.html', controller: EditFindSuccessCtrl}).
            when('/find/edit/:findId', {templateUrl: 'views/edit-find.html', controller: EditFindCtrl}).
            when('/find/delete/:findId', {templateUrl: 'views/delete-find.html', controller: DeleteFindCtrl}).
            otherwise({redirectTo: '/finds'});
            }]);

Thanks a lot!

Answer 1

His readme has a typo. What he means is, you need to inject $locationProvider into your config function, and set $locationProvider.jqmCompatMode(false);.

I sent in a pull request to his readme to fix the typo.

Example:

myApp.config(function($routeProvider, $locationProvider) {
  $routeProvider.when(...);
  $locationProvider.jqmCompatMode(false);
});