No hash urls and browser history

[doliver3]

Hi,

I didn't see a way to use UI-Router without a Hash in the Url, and I would like to request this as a feature enhancement if it is not a current capability.

Angular and HistoryJS seem to have determined a way with modern Html5 browsers history API to avoid the hash in the url. Is this possible with UI-Router ? How could this be done ?

http://docs.angularjs.org/guide/dev_guide.services.$location
https://github.com/browserstate/history.js/

Thanks,
David

[nateabele]

Regarding enabling non-hashbang URLs, please refer to the following from the page you linked to:

$locationProvider.html5Mode(true)

For history tracking, we have an existing open issue: #52.

[doliver3]

How would you configure UI-Router to support browser urls that do not contain a hash sign at all yet would still be bookmarkable and when loaded into the browser by a user would return the page to the state when the user captured the url ?

I'm not referring to hash-bang urls with both hash and an exclamation point. I'd like to know if it is possible to skip the hash character entirely.

I cannot see at the moment why Angular's $locationProvider would affect any of the UI-Router urls - as far as I can tell UI-Router never uses $locationProvider and ignores it when resolving urls.

[jeme]

@doliver3 Sounds like your new to Angular?

UI-Router uses $location which is provided by the $locationProvider... So what happens is that when you call $locationProvider.html5Mode(true) during configuration, the $locationProvider will provide the $location service in Html5 mode.

Providers are just service factories, they can then be used during configuration to pre-configure the service they create ones you enter runtime and that service is requested. This is useful for stuff that should not be configurable during runtime.

[nateabele]

[Y]et would still be bookmarkable and when loaded into the browser by a user would return the page to the state when the user captured the url ?

It sounds like you're not familiar with how this works? Angular and UI-Router will help you write a single-page app, but some server-side configuration is usually required to ensure that subordinate URLs of the application always resolve to the same HTML page. Provided this, UI-Router will correctly transition back to the state matching the URL given by the user.

@timkindberg maybe we should include this in the FAQ or a guide for beginners? I can supply rewrite configurations for nginx and Apache.

[laurelnaiad]

I've had some issues with HTML5 mode. Here's what I know:

• It does work with ui-router similarly to how it works with Angular core router.
• Neither allows you to switch between modes by just flipping the mode on $locationProvider. Here's a stack overflow question I asked about that with an answer that explains what seems to be a way to force Angular to insert hashes into otherwise unhashed URLs in your templates: http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting -- essentially, for hash-bang mode you tell angular to run in html5 mode but trick it into thinking that it's dealing with a browser that doesn't support html5 history. I haven't actually tried to implement the answer, yet, as I've been busy on other things.
• I'm hoping to get around to working on this, because I wish there was a way to just have both modes work, and as well as a means to detect the app base and thus handle relative URLs identically in the two modes. I have a feeling the solution, if there is one, will be primarily in rewriting URLs in the HTML, and not much in the way of changes to any router.

[timkindberg]

@nateabele good idea. Honestly it's a bit confusing to me as well so I'd also love a FAQ on this.

[timkindberg]

Maybe rewrites for express too?

[nateabele]

@timkindberg Alright, I'll write one up this week. I can do Apache, nginx, and vanilla Node configurations, but I don't know Express. Do you?

On May 26, 2013, at 10:46, Tim Kindberg [email protected] wrote:

@nateabele good idea. Honestly it's a bit confusing to me as well so I'd also love a FAQ on this.

—
Reply to this email directly or view it on GitHub.

[timkindberg]

No but I'll read a tutorial :)

[ksperling]

It would be neat if the 'dev' task in the Gruntfile could be tweaked so that the http server it starts is configured to run the (or a) sample app in html5 mode.

[laurelnaiad]

This is what I just came up with for a sample I was working on for express. js, css and partials are under my app root. Dist is one level up from the app root.

I had no idea how to use express and still don't know much, but HTH :)

var express = require('express');
var app = express();


app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
  // Just send the index.html for other files to support HTML5Mode
  res.sendfile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

[timkindberg]

Awesome thanks @stu-salsbury

[timkindberg]

Added to docs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

@nateabele feel free to add other rewrites for Apache, nginx, and vanilla Node configurations.

[nateabele]

@timkindberg Just added Apache. I'll dig up my nginx configuration in a little bit.

[timkindberg]

You rock!