How to think in ember from an angular background

Question

I have a new project where I have to use ember. How can I transition to ember bearing in mind that I have strong understanding and experience in angular.

Answer 1

I have extensive experience in both frameworks. And I've blogged about their differences extensively. I'm also a contributor to both frameworks (moreso Angular than Ember).

A few things to keep in mind:

1. Controllers in angular !== controllers in Ember.

They're two different things, sort of. Controllers in Ember exist to add behaviors to the model you've returned from your Route. Controllers in Angular are more of a means to set up your model and other business logic related to your view.

2. Start with a Route

Angular is not as "route-centric" as Ember. In Angular, a route isn't even really a requirement.

In Ember, you always start with a route... and a "Route". Some disambiguation: In Ember there is the router and there is the Route. The Router is where you set up your route (Think 'ui.router' or 'routerProvider' in Angular). The Route is a class that has a model function on it. The purpose of this is to load data your view needs ahead of the transition. A Route class is like a much less clunky, much more robust, version of "resolve" in Angular.

3. Handlebars is ugly as hell... deal with it (for now)

So you'll start seeing {{#each}} and {{bind-attr poop="yuck"}} all over the place. Welcome to Handlebars. It's like an uglier version of Angular templating, but you need to use {{bind-attr}} to bind attributes on an element.

Do not panic! There is a much better solution called HTMLBars that is (allegedly) on the way.

4. actions instead of methods on $scope or controller

In Ember, to bind to a click event, it's not quite as straight forward in my opinion, but basically:

Angular

JS

app.controller('MyCtrl', function($scope) {
  $scope.foo = function(){ 
    console.log('wee');
  };
});

HTML

<button ng-click="foo()">foo</button>

Ember

JS

App.MyController = Ember.Controller.extend({
  actions: {
    foo: function() {
      console.log('wee');
    },
  },
});

HBS

<button {{action 'foo'}}>foo</button>

5. The learning curve is STEEPER for Ember

One of the reasons it's so hard to learn is it does a lot for you. It has a very, very broad surface area. But you're going to struggle. Moreso than you did with Angular, I guarantee it. Ember is newer, it's not (quite) as popular, so resources are a little thin. But it's got a lot of traction and overall it's a really great framework.

I find the API documentation and the GitHub repo to be full of useful tidbits.

6. Use Ember-CLI

I can't stress this enough. If you're just starting a new Ember project, use Ember-CLI. You won't regret it. It handles setting up your builds, unit tests, and compiling using ES6 modules. It will greatly streamline your development process.

Other than that, best of luck to you. Don't get disheartened. Learning new things is always tough. But you're broadening your skillset, which is a good thing.