Understanding Ember with a background in AngularJS

Warning: I know nothing about Angular. I’ll take a crack a few of these!

A good way to think about what-goes-where is to consider how long it’s lifetime is.

While it’s on the screen? Component. While the application is running? Service. Indefinitely? Model.

You can also loosely toss data around in Ember. The approach to models you see in the guides is from Ember Data, which is technically a separate library (albeit a great and well-integrated one). You can do your application with regular 'ole AJAX requests if you’d like and just treat them like POJOs. The advantage of modeling them with Ember data is that you can cache requests, provide a common interface in your application that is then translated for the kind of server you’re using (via an adapter), and asynchronously load related records. Functions are totally legal in Ember Data models, as are properties that are calculated off of other properties (we call them “Computed Properties”). If you you choose to model this stuff in Ember instead of POJOs, you also get all of the magic and sugar that comes with Ember objects, like bindings.

As far as being totally offline, I think you’re fine. The magic is that whether you’re storing data remotely, or just in localstorage, your application does the same this.store.find() kind of stuff. Instead of using the RESTAdapter, you would use a LocalStorageAdapter. With the caveat that I’ve never used this before, take a look at this.

The architecture stuff just changed a lot, so you’ll find a lot of references to views and controllers online that are out of date. The good news is that it’s much simpler now- controllers and views are combined into components now. So, your flow goes something like…

Router (catches URL and sends request to route) → Route (looks up the model and applies it to a controller) → Controller (is going away, so it just passively holds the model) → Template (is bound to the controller, it can take our model and apply it to a component) → Component (has all of the display logic for this route) → Template (is bound to the component, and can use all of its properties and actions)

The controller and first template are getting deprecated very soon in favor of being about to go Route → Component, they just couldn’t be removed in time for 2.0. Here’s a somewhat-more-official guide to this.

1 Like