Here is why I choose to use Ember, and the quickest way to get started.

• You're going to either create your own framework or use someone else's. The Ember community has thought about a lot of solutions already, saving you time and money.
• Documentation: Ember used to have a reputation for poor documentation, but now, it's well know that it's much better, (I'm looking at you, Angular). Start with the Ember Guides and I will give you more resources later.
• Yehuda Katz. A core contributor to jQuery, Rails, and other high profile projects, he is known for high quality software, and sticking around for a long time to see the project grow. And for the Rails folks in the room, Ember Data and ActiveModel Serializers are a match made for each other.
• Ember embraces web standards. Google, and Angular, has a reputaiton for making up their own way of doing things. Ember uses Handlebars, ES6 modules, Web Components, etc. You know if another standard comes out that it will be adoped by Ember.
• Ember CLI. The team is really focused on supporting a quick development workflow through tools like Ember CLI. This cuts out a lot of boilerplate.
• For me, Ember is a natural extension of Backbone, without all the setup. and wiring shit up. There is a clear seperation of concerns which makes it ideal for a large-scale app.
• Convention over Configuration decreases the number of design decisions you have to make.

I'm not trying to single out Angluar in particular, other than that the class I am preparing this blog post for is presenting both. I don't have any experience with Angular, so these are all quotes below:

"kills the DOM...various ng-attribute references cluttered the page around and this was mixed with what is called "mustache-esque" template bindings."

Angular's creator describes it as a metaframework - a framework for creating your application's framework. Thus, if you get two different Angular apps, their internals will look completely different.

This is not the approach Ember takes, where you buy in to the framework's conventions. So, one could argue that once you learn the conventions, you'll spend much less time on boilerplate writing a new Ember app than a new Angular app. This doctrine also belongs to Rails, and it's worked out pretty well for them.

To dive deeper, read A Five Part Blog Post Series Comparing Angular and Ember and Backbone, Angular, or Ember.

Angular vs Ember slides.

You'll need the following modules if you don't have them already

npm install -g phantomjs bower

First step is to install the command line tool globally:

npm install -g ember-cli

Then, install the Ember Chrome Extension.

Examine carefully the output of the help option for the ember command.

ember --help

ember new emberNotes
cd emberNotes
ember serve

Take a look (in your editor) at app/templates/application.hbs. Go ahead and change the h2 element to "Welcome to Notes" or something similar. The {{outlet}} tag is where our content will end up.

Browse to the List of Ember Generators.

ember g model note
ember g controller notes
ember g template note
ember g route index

Edit app/routes/index.js:

1. Include a model attribute of the route, that points to:
2. A dummy data variable

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
      return data.result;
    }
});

var data = {
  "status": "ok",
  "result": [
    { noteBody: "Twilight Sparkle"},
    { noteBody: "Applejack"},
    { noteBody: "Fluttershy"},
    { noteBody: "Rarity"},
    { noteBody: "Pinkie Pie"},
    { nodeBody: "Rainbow Dash"}
  ]
};

And, in app/templates/index.hbs:

{{#each this}}
  <li>{{noteBody}}</li>
{{/each}}

Now, let's add images to your data. Add a picture attribute, something like this:

"result": [
    {
      noteBody: "Twilight Sparkle",
      picture: "http://img4.wikia.nocookie.net/__cb20140420032412/mlp/images/thumb/e/e0/Twilight_Sparkle_after_drying_herself_S1E03.png/209px-Twilight_Sparkle_after_drying_herself_S1E03.png"
    },
    {
      noteBody: "Applejack",
      picture: "http://img3.wikia.nocookie.net/__cb20121029101939/mlp/images/thumb/e/ee/Applejack_proud_of_herself_S1E01.png/209px-Applejack_proud_of_herself_S1E01.png"
    },
   ]

and in your index.hbs

{{#each this}}
  <li>
    <img {{bind-attr src="picture"}} />
    {{noteBody}}
  </li>
{{/each}}

Now, with more Ponies!

in index.hbs

<div>
{{input type="text" value=name placeholder="Enter your pony name"}}
</div>

<div>
  <p>Hello, my pony name is: <b>{{name}}</b>, and I think Ember is great!</p>
</div>

• Ember CLI docs
• Prototyping an Ember App in 20 minutes

• http://emberjs.com/guides/
• http://emberwatch.com
• https://emberflare.com
• http://www.embercasts.com
• http://www.confreaks.com/events/emberconf2014
• http://emberweekly.com
• https://www.codeschool.com/courses/warming-up-with-ember-js
• http://pluralsight.com/training/courses/TableOfContents?courseName=fire-up-emberjs
• https://courses.tutsplus.com/courses/lets-learn-ember
• http://voidcanvas.com/emberjs-tutorial-two-way-data-binding/

And if you're a Rails dev, too:

• https://emberbites.com