Q:

How to create two separate pages in ember

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages. 
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page. 
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}. 
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp. 
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade? 

A:

I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js

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

// Color.js

// here all color resources
App.ColorRoute = Ember.Route.extend({
  // your implementation
});

// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
  // your implementation
});

In your ApplicationResources.groovy
modules = {
    application {
        dependsOn 'jquery', 'handlebars', 'ember'
        resource url:'js/App.js'
    }
    shade {
        dependsOn 'application'
        resource url: 'js/Shade.js'
    }
    color {
        dependsOn 'application'
        resource url: 'js/Color.js'
    }
}

In shade.gsp
<r:require modules="shade"/>

In color.gsp
<r:require modules="color"/>

