How should controller dependencies work in Ember.js

Question

My simple SPA has 3 parts together on one page:

1. A list of photos
2. A list of frames
3. A list of final products (photo in frame)

User chooses a photo and a frame to form a new product. New photos and frames can be added too.

I think the controllers should look like this:

App.ProductsController = Ember.Controller.extend({
    needs: ['photos', 'frames'],
    photosBinding: 'photos',
    framesBinding: 'frame',
    actions: {
        newProduct: function () { ... }
    },
    ....
});

App.PhotosController = Ember.Controller.extend({ ... });
App.FramesController = Ember.Controller.extend({ ... });

As I am very new to Ember, I don't know how I should work out the rest of it.

1. Do photos and frames need their own routes? If yes, how should I prevent the user from modifying the URL and showing something that should not be displayed. If no, how do the controllers connect to their models?
2. I want the creation of new photos and frames to be handled by their respective controllers, how can I do this?

Answer 1

photos and frames both sound like resources of you application you will need resources for both

App.Router.map(){
 this.resource('photos');  //for photo list
 this.resource('frames'); // for frames list
}

and so on....please go through ember documentation on ember website you will be easily able to do this DOCS

for more details this is details article on communication between controllers by madhatted