Question

I have state like

mysite.com/#/index
This is the default page loaded on initilization

There are other subroutes
mysite.com/#/about
mysite.com/#/contact

If someone types mysite.com/#/about Can I control the loading of substate about ?

Answer 1

The Ember Router does this automatically, as long as you have defined routes (URLs) in your Router.

Something like the following will automatically navigate to the correct state when the URL mysite.com/#/about is entered. If you want to control what happens when that state is entered and exited, specify this inside the enter() and exit() functions.

App.router = Ember.Router.create({
    enableLogging: true,
    //location: 'history',
    root: Ember.Route.extend({
        home: Ember.Route.extend({
            route: '/',
            redirectsTo: 'index'
        }),
        index: Ember.Route.extend({
            route: '/index',
            connectOutlets: function (router) {
                router.get('applicationController').connectOutlet('index');
            }
        }),
        about: Ember.Route.extend({
            route: '/about',

            enter: function() {
                //stuff
            }

            exit: function() {
                //stuff
            }

            connectOutlets: function (router) {
                router.get('applicationController').connectOutlet('about',);
            }
        })
    })
});