# Ember.js architecture overview

**URL:** <https://discuss.emberjs.com/t/ember-js-architecture-overview/6666>\
**Category:** Uncategorized\
**Created:** [November 11, 2014, 4:09pm UTC](https://discuss.emberjs.com/t/ember-js-architecture-overview/6666 "2014-11-11T16:09:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgish](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgish/32/13333_2.png) [@kgish](https://discuss.emberjs.com/u/kgish)\
**Post date:** [November 11, 2014, 4:09pm UTC](https://discuss.emberjs.com/t/ember-js-architecture-overview/6666/1 "2014-11-11T16:09:20Z")

</div>

I’ve been studying Ember.js now for some time and feel that I still do not understand the essence of its architecture. I am still struggling with a number of concepts that should be pretty basic by now but which continue to trip me up.

Is there some flow diagram available which gives one a good overview of the relationships between routes, models and controllers, the order of hook calls, flow of events, that kind of thing?

---

<div class="post-metadata">

**Author:** ![kylecoberly](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylecoberly/32/15828_2.png) [@kylecoberly](https://discuss.emberjs.com/u/kylecoberly)\
**Post date:** [November 11, 2014, 7:15pm UTC](https://discuss.emberjs.com/t/ember-js-architecture-overview/6666/2 "2014-11-11T19:15:39Z")

</div>

I’m sure someone around here has an awesome chart, but this may help:

- Routes, models, controllers, and views are all Ember objects
- The router maps a URL to a route
- A route gets a model (could be anything from plain JSON data, to an AJAX call that returns JSON, to an Ember data query…) and assigns it to a controller. It also looks up or generates a view, which generally has a handlebars template that it spits out.
- A route’s view can see that route’s controller, but the controller can’t (shouldn’t?) see the view.
- The route’s view’s template can bind to properties on that route’s controller or call its actions, but can’t see the route itself or call any of the controller’s functions
- A template can embed additional views inside of it, all of which can see the controller that template is a part of. The purpose of this is allow those sub-views to respond to primitive events (like clicks) and let them tell the controller to do something in response
- A route’s controller can’t see the template directly, but interacts with it via bindings.
- A route’s controller cannot see that route’s view.
- A route’s controller can send an action that isn’t handled in the controller back up to the route to handle it there.
- Controllers can all see each other (even ones that aren’t a part of any route), via the “needs” property, and can call or alias any of each other’s properties or functions. Views can’t (shouldn’t?), templates can’t.
- A component is a view, controller, and template all in one. It knows absolutely nothing about its surrounding context, but is called on a template, and can bind to stuff on that template’s controller.

Where this can get confusing is that a route, its controller, its view, and its template are all kind of tied together, but you can also have controllers, views, and templates that aren’t a part of any route. Those are where you get a lot of the power-user magic, but they use the same terminology as the stuff that’s so critical to the structure of an Ember app, it’ll get auto-generated if you don’t declare it yourself. This is actually likely to change in Ember 2.0, and while I argued against it on the RFC, in writing this out I think I see the point now.

Hope this helps!