search

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

How to use $routeProvider to link jqm pages with parameters #201

Closed alejandrocao closed 11 years ago

alejandrocao commented 11 years ago

I have a simple html, with 2 jqm pages. Page1 have links to Page2 with parameters.

<a href="page2/1">Option 1</a>
<a href="page2/2">Option 2</a>
<a href="page2/3">Option 3</a>

I want to call a function to set some data with the parameter info and then load the Page2.

$routeProvider
.when('page2/:option', {
    templateUrl: '#page2',
    onActivate: 'setOption(option)',
    jqmOptions: {transition:'slide'}
})

$scope.setOption = function(option) {
    $scope.option = option;
}

Could you check my sample in JSFiddle? What am I doing wrong?

http://jsfiddle.net/alejandrocao/CE86s/

Thanks, Alejandro

tbosch commented 11 years ago

Hi, here is a working jsfiddle: http://jsfiddle.net/ocdemo/CE86s/5/

Changes:

  1. add ng-app to the <body> tag (you can set this under "Fiddle Options")
  2. under "Frameworks and Extensions" you have to set "no wrap - in ", so that your javascript gets loaded before DOMContentLoaded
  3. The url for the adapter was wrong. The right url is: https://rawgithub.com/opitzconsulting/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter.js. Note that there is no dot between raw and github. By this, Github is serving the file with the right mime type.
  4. Your routes were not correct:
    • They have to start with a slash ('/')
    • You have a redirect to the '/', but no route for '/'. I added that route.

Hope this helps, Tobias

alejandrocao commented 11 years ago

Tobias,

Thank you very much for the quick response. The example in jsFiddle you presented works correctly.

Also I have some more queries?

2) This setting must be done only in jsFiddle samples or in a local project too?

I have references to .js and .css in head as follows:

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="http://code.angularjs.org/1.0.7/angular.js" type="text/javascript"></script> 
<script src="https://rawgithub.com/opitzconsulting/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter.js" type="text/javascript"></script> 
<script src="controller.js"></script>
</head>

4) Is it always necessary to define a route for '/'. ? I understand that yes.

Thanks, Alejandro

tbosch commented 11 years ago

Hi,

1) yes, you need the ng-app at your <html> or <body> in every app that uses the adapter. Please have a look at the default angular docs for details about ng-app as it belongs directly to angular.

2) Please don't use the Github link of the adapter in production (google about using rawgithub for details) but download it locally.

3) No, you don't need to always have a route for /. Usually, the adapter uses the first page in the index.html. However, you need it if you use this (which your example included):

    .otherwise({ redirectTo: '/' });

T