Ember.js path only working with "app/#/path" and not "app/path"

Question

I'm very new to Ember.js and I'm following this nettuts+ tutorial

I'm having an issue with routing in Ember.js.

I create my routes as follows:

App.Router.map( function() {

  this.resource( 'index', { path: '/' } ); 
  this.resource( 'gallery' ); 

});

And my template as follows:

<script type="text/x-handlebars" data-template-name="gallery">
  <h2>This is the gallery</h2>
</script>

And my links as follows:

<nav>
  {{#linkTo "index"}}Home{{/linkTo}}
  {{#linkTo "gallery"}}Gallery{{/linkTo}}
</nav>

When I want to access the "Gallery" path by clicking the link, it works fine and updates the url to: /ember-app/#/gallery but as per the Tutorial, the url path: /ember-app/gallery should render the proper template as well.

But, it doesnt and gives me a 404 error.

I'd really like to find out how to create a path without the /#/path and simply /path

Am I doing something wrong?

Answer 1

You have to tell Ember that you want to use the history api.

App.Router.reopen({
  location: 'history'
});

http://emberjs.com/guides/routing/specifying-the-location-api/