I'm working on an angular app that is in a structure like this:
/dir1/dir2/myApp
There are rewrite rules in place, so that when someone comes from:
customURL/myApp
they hit my app. When I am in my local environment, the links that I use for routing just look like:
href="#/route"
and that all works fine, but when I hit the app from the custom URL, I end up on my index page and when I click one of the links, it reloads the page and takes me away from my custom URL structure and back to:
/dir1/dir2/myApp/#/route
I currently have fixed this by making all my hrefs look like this:
href="/myApp/#/route"
Then when I come in from the custom url and click a link, the url changes to this and there is no reload:
customUrl/myApp/#/route
That is the desired effect and it all works, but having to add that extra path in to every single href sort of feels wrong, and I'm wondering if there is a better way.
I have read through a lot of documentation and experimented with html5Mode, but this is the only way I have been able to achieve what I want.
If anyone with more experience with this has any tips or even thinks this is a perfectly good way of doing it, I'd really appreciate the feedback.
Thanks!
I would used ng-href="#/route"
very specific case, I can't reproduce on my machine,
so first of all do console.log($location) and see what your host is
if something what you expected, then just play around right href, try with and without '#' or '/'
Related
Previously, I used html5mode in my mean-stack website, now I want to disable it for some reasons, so I comment $locationProvider.html5Mode(true) in my code and still leave <base href="/1/" /> in index.html.
As a result, https://localhost:3000/1/#/home in a browser works.
However, clicking on a button defined by the following html leads to https://localhost:3000/1/edit/, rather than https://localhost:3000/1/#/edit/.
<li>New</li>
Does anyone know how to modify the html such that it opens https://localhost:3000/1/#/edit/?
Since you're no longer using html5mode, I would recommend prepending the hrefs with #/ in order to preserve your endpoints.
<li>New</li>
Without html5mode, the desired link will now cause a full page refresh. If you aren't using html5, why do you need the #?
It may be worth adjusting the urls to follow this pattern https://localhost:3000/1/edit/, unless you'd rather use my suggested code above. There may be a more elegant solution of course.
As soon as I unzipped and configured the PSK, I tried to add an admin.html page next to index.html from where I'd like to manage my application. However, when I try to reach it via localhost:3000/admin, I get redirected to localhost:3000/admin#!/admin where the original application, the one in index.html shows up, I think because of routing.
I tried removing the hashbang option from page.js, tried changing the / route to /home, all to no avail. The admin.html page doesn't want to show up.
How does one do that? Maybe I need to create another application all together and host it on /admin?
P.S. I am not asking about the security of the approach here. If you want to know anyway, I will try to manage security with firebase (still have to look into it). Thanks.
First, in order to get to admin.html, you need to use ".html" in your URL. So try using localhost:3000/admin.html.
Second, assuming you've made no changes but to duplicate the index.html and rename it admin.html, this will still trigger the routing. You'll need to either create new routing contexts to routing.js in order to control this page, which is a little awkward being it's essentially controlling two separate SPAs, or remove routing.js from your Vulcanized elements.html file so that it can be included only on the main app (index.html). The second option also opens the possibility of having multiple routing.js files so for example your admin.html could essentially become it's own SPA controlled by routing.admin.js.
Good luck!
The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.
Not sure what i am missing, but I have pushState working on my Backbone based app, where I could click around and have my URL look like www.example.com/route_specified, however if i try to go directly to that page it shows up as not found. If I do www.example.com/#route_specified it works, and quickly changes back to www.example.com/route_specified on the address bar
I am guessing i need to do something in Apache to handle this and make sure that all calls resolve to the index or something like that, but can't find explanation.
Correct. Think about it this way without pushstate enabled. Your server is still trying to serve the page at that route. Since it cannot find the specified document at that location, it throws a 404.
Technically speaking, your server should still produce some sort of result at the url location, then have Backbone take over. In it's simplest form, this is called progressive enhancement. The server should still serve some sort of static page with critical info, which will eliminate issues you will have with SEO. Work your site/app with javascript disabled, serving only the relevant data. Then have Backbone takeover. I have just come across Mashable's redesign, and they integrate progressive enhancement extremely well with Backbone.
If SEO is not a concern, you could always redirect the user to the index page. Just remember that search engines will only index your app page then. If your content is being served dynamically, there wont be any data to index.
Hope this helps.
Thanks
Tyrone
I'm studying in backbone.js and I like the routing system. But all users of my site can see there requests, like: http://example.com/#/projects and so on.
How can I hide the routing from a browser's url bar but use that cool backbone feature?
I'm not 100% sure what you want, but if you are asking to remove everything after your domain
and keep http://mysite.com in the address bar, without the hashes (#projects/10) i think you will be dissapointed.
as far as i know, you cannot remove that, since the history and the routing depend on those hashes, thanks to that part of the url, it knows which route you are trying to fetch.
however, it is possible to remove the /#/ part... and make it http://mysite.com/projects
for that you need to use pushstate in the router like this:
Backbone.history.start({pushState: true});
You can put your whole website in an iframe 100% width/height of the page and have your address bar always show root URL...
It will work though it will kill the whole idea behind routes which are supposed to give users fast access to all the states of the app directly with the URL and make any route in your app be bookmarkable and shareable.
Though in the end it's your call :) if you think it's the bet for your app - you know best!