Closed dousylanse closed 11 years ago
Yes,
routing is working well with the adapter. Please note that the adapter enables $locationProvider.html5mode
by default, which is why you get urls like http://localhost/contextroot/personn/101
. However, that does not reload the page but only changes the url using the html5 history api.
Could you create a jsfiddle (just one index.html with all jqm pages) or a plunk (multiple external jqm pages) with your example? You can find templates here: https://github.com/tigbro/jquery-mobile-angular-adapter#reporting-issues
Thanks, Tobias
Thank you for your answer.
Here is a plunker : http://plnkr.co/cs3bjEhwpCjqAuJXvGXe I made 4 tests : two with parameter, and two without. The biggest problem for me is to change page when hash change. The minor one is '/' encoding in '%2F' when clicking the 'click me' label.
I can't see what I am missing.
Be careful to run the plunk in fullscreen before to click the "refresh" button.
Regards, Sylvain
I too am getting alot of headaches from hash linking. There is no point in mapping to a url without being able to reload. Also when I call $.mobile.changePage("#test") it changes pages but does not push to history. When I manually run pushState angular digests and craps it's pants. I love this plugin it just needs a little polish work with the urls and it will be GOLD! ^_^
Also your wiki has been down. It would really be great to have some documentation. If it wasn't for this issue ticket I wouldn't have even known how the routing works.
Hi, this is just the normal routing behavior that you are seeing!
Here is your plunk without the adapter, just plain angular, and you can see the same behavior: http://plnkr.co/edit/X93U6sONQ06p6nrhUSTs?p=preview
What I changed (and what the adapter automatically does):
<base>
tag with a href
attribute of location.href
. By this, all routes are relative to your starting document.locationProvider.html5Mode(true)
and $locationProvider.hashPrefix('!')
. <ng-view>
to the body (the adapter does something similar, but not a real <ng-view>
. The adapter does this configuration so it's url scheme is the same as when using jquery mobile without angular. E.g. when linking external documents in jqm, you are creating a <a href="somePage.html">
and after clicking, your url is /somePage.html
, changed using the HTML5 history api, although that resource does not exist on the server.
For details about angular's routing configuration, have a look in the angular docs, e.g. http://docs.angularjs.org/guide/dev_guide.services.$location
If you don't want the html5 urls and always stick with the hash urls, you can also set $locationProvider.html5Mode(false)
in your application...
Note: I also updated the Readme.md of the adapter with the information in this comment.
If you don't have more questions I would close this ticket... Tobias
Thanks @tigbro, this helped me. I have wanted "normal" AngularJS routes and URLs to work while I am developing so that a page reload (to see a change in a template for example) doesn't 404. So for anyone else wanting the same, here is what I did :
In my Angular app config:
var app = angular.module("app", []).config(function($routeProvider,$locationProvider){
// bring back /# urls by turning OFF html5 paths
// JQueryMobileAngularAdapter turns in ON by default
// https://github.com/tigbro/jquery-mobile-angular-adapter/issues/163#issuecomment-16928255
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix("");
// routes
$routeProvider
.when('/home',{templateUrl:'#home'}) // this is the default JQueryMobile view in index.html
.when('/register',{templateUrl:'register.html'}) // this is a familiar AngularJS route using a partial ...
.when('/login',{templateUrl:'login.html'}) // ... and so is this
});
In any anchor tag use the normal AngularJS URL scheme e.g.
<a href="#/home">Home</a>
<a href="#/register">Register</a>
<a href="#/login">Login</a>
Interestingly, any link to #route
will work, but it redirects to #/route
first
Thanks for your example! Can I close this issue then?
@tigbro, this is probably due to my lack of experience with AngularJS but... I'm making a pretty simple app, and since I was hacking it together I was just calling $.mobile.changePage('#somePage'); directly from my controller (which is a no-no, but I just want it to work, and I plan on tweaking it later). However, that doesn't work properly, because although it changes the page, it doesn't actually update the URL (as mentioned by @popcorn245 ), so you can get into weird scenarios.
Using $location.hash('somePage'); instead of changePage worked perfectly for me. It took me a while of playing around to figure this out. It might be worth mentioning somewhere in the docs something like: If you're gonna be using $.mobile.changePage('#page'); from your controller, that won't update your URL, you'll want to use #location.hash('page');.
@tigbro OK for me to close. I suggest adding something to the docs to configure JQMAA to use regular AngularJS links with #/name
Hi, I updated the Readme with your comments (https://github.com/tigbro/jquery-mobile-angular-adapter#navigation-and-routes, subsection "Notes".)
Thanks for participating! Tobias
I am cracking my brains to understand the behavior of the routing. I am using rhomobile and jqm and on read or update link , the link looks like app/{93493043.034}/show However when i put the adaptor, the link cannot be followed on the data-url because it gets encoded and displays app/%7B93493043.034%7D/show
How can i make it work as normal. if i remove the adaptor, data-binding does not work with ajax enabled only with ajax disabled.
Hi, mmh, the adapter only does the following to routing/location handling in angular:
someModule.config(function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
// Startup the location handling
someModule.run(function($location) { });
Could you try again with these settings and without the adapter? Do you see the same problems then?
Sorry, I haven't used rhoMobile yet...
Tobias
I am new with angular adapter. I am very excited to make work easily JQM and angular, and would like to thank you for the work you did.
I have something look odd for me, and try to find a answer. Maybe you can help me.
I am making a single page application, and want to pass parameters throught the url.
It seems that the $routeProvider does not detect hash change.
Here is my route definition :
$routeProvider.when('/personn/:id', { templateUrl: 'templates/personn.html', jqmOptions: { transition: 'slide'} })
Without the adapter, a command like this should work : $location.path('personn/101'); It change the url to http://localhost/contextroot/#/personn/101 and $routeProvider inject the template. OK, it's angular, it's nice.
Using the adapter, i have remove the ng-view attribute. The url is now changing to http://localhost/contextroot/personn/101 that is not single page way (and why and different behavior ?)
If I only change the hash ($location.hash('personn/101');) the $routeProvider doesn't catch the change.
My question is : is it possible to make a single page app with the adapter. If yes, how to configure the router ?
Best regards.