Ember.js Error in specifying URL type of location='history' in App.Route

Question

I have started learning the ember.js framework and I am stuck at how to use the setting of the URL type feature that the framework has.

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

I have this simple application.js

App = Ember.Application.create();

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

App.Router.map(function () {
    this.route('about');
});

App.ApplicationRoute = Ember.Route.extend({

    model: function () {
        return appdata;
    }
});

App.IndexRoute = Ember.Route.extend({
    setupController: function (controller) {
        // Set the IndexController's `title`
        controller.set('indextitle', "My Index title");
    },
    renderTemplate: function () {
        this.render({ outlet: 'indexoutlet' });
    }
});

App.AboutRoute = Ember.Route.extend({
    model: function () {
        return appdata;
    },
    renderTemplate: function () {
        this.render({ outlet: 'aboutoutlet' });
    }
});

var appdata = { mytext: '', theplaceholder: 'Enter new text', attr:'Yeap!' }

If I don't use the

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

the application works fine and it goes to the 'about' route by appending the URL the '~/EmberjsTest.aspx#/about' as it supposed to do.

However because I do not like the hash symbol in the URL of the page, I would prefer if it was removed and to do that the guide says we should put this code:

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

But when I do it I get an error in the Chrome console saying: 'Assertion failed: The URL '/EmberjsTest.aspx' did match any routes in your application'

What am I doing wrong?

Thanks in advance

Answer 1

If you want to use the history API then you have two options.

1. Serve your Ember app from '/' so that Ember can just work with it's "normal" index/root route.

2. Create a route in your Ember app that can handle '/EmberjsTest.aspx' .

   this.route("index", { path: "/EmberjsTest.aspx" });

Note that if you go with option 2 you'll probably have to update all of your routes to include '/EmberjsTest.aspx' in their path s.

this.resource("posts", {path: "/EmberjsTest.aspx/posts" })