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.
Related
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 '/'
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.
I'm working on a big project. This project already has complicated structure. Most pages are generated on server-side with Twig.
Now we move the project to AngularJS.
It is not possible to use angular-way routing on whole project just now. But somewhere, it is necessary.
And here comes our trouble.
If I add 'ng-app' in html tag, for example, on some pages angular add hash in url.
And what is strange for me, that it's not everywhere.
On start page (project/profile9868766), url is clear as it is. But on some other (project/community/list), angular does something like that: project/community/list/#list .
And it is extremely undesirable.
There are no any angular routes, configured in $route service yet.
Please, help me to find out what causes that behavior, and what should i do to make all the things to go right way.
I want to add ng-app in html tag and not get any troubles with existing code, that may use hashes. And I want to use angular directives, controllers and other stuff, including $location service to set and track hashes on some pages. And later move everything to Angular and only after that start using Angular routes.
Thanks!
PS: English is not my native language, sorry about some weird constructions and mistakes. ))
Make sure to turn on html5mode
http://docs.angularjs.org/guide/dev_guide.services.$location
But the hash is inevitable on non-html5 browser.
The latest version of angular (v1.0.7) seems to have fixed this issue.
I've been trying to get various routes bookmarkable within my app, and this is possible if I don't have pushState enabled. A user can enter mysite.com/#/view/30 and the proper view renders.
However, if I were to enable pushState and go to mysite.com/view/30 I receive a parse error (navigating there via the root page works fine).
I'm currently utilizing the Backbone.js Boilerplate using Require.js, and the parse error is appearing in my config.js file. I'm fairly certain the issue isn't with Require but I'm not completely sure. Frankly, I don't necessarily know what code to paste here either because I believe I'm more lacking a fundamental understanding a difference between hashbangs vs. pushState.
I've read up on the HTML5 feature, however the answer to my specific question still eludes me.
The page with your Backbone router on does not exist at the path you are pointing to in your pushState. The pushState is purely to change the URL representation. You'd have to do some server config changes to route all of your requests back to a main index file.