Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Latest commit

 

History

History
History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>Ember | Full Stack JavaScript Engineering</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.1.0">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="../auth_auth/README.html" />
    
    
    <link rel="prev" href="../day10/README.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="../gitbook/style.css">


        
    <div class="book" data-level="14" data-basepath=".." data-revision="1412284764662">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                        <i class="fa fa-check"></i>
                        
                         Introduction
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="1" data-path="pre-work/README.html">
            
                
                    <a href="../pre-work/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                         Prework
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="2" data-path="communication/connect_to_irc.html">
            
                
                    <a href="../communication/connect_to_irc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                         Connect to IRC
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3" data-path="setup/README.html">
            
                
                    <a href="../setup/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                         Setup
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="3.1" data-path="setup/ToolsOverview.html">
            
                
                    <a href="../setup/ToolsOverview.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                         JavaScript Tools Overview
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3.2" data-path="setup/computer_setup.html">
            
                
                    <a href="../setup/computer_setup.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                         Computer Setup
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3.3" data-path="setup/initial_toolchain_practice.html">
            
                
                    <a href="../setup/initial_toolchain_practice.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                         Make sure grunt works
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3.4" data-path="setup/install_node_from_source.html">
            
                
                    <a href="../setup/install_node_from_source.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                         For Linux: Compile Node from Source
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="4" data-path="hello-world-node/README.html">
            
                
                    <a href="../hello-world-node/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                         Hello World Node
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="4.1" data-path="hello-world-node/async_demo.html">
            
                
                    <a href="../hello-world-node/async_demo.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                         Async Demo
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="4.2" data-path="hello-world-node/hello_express.html">
            
                
                    <a href="../hello-world-node/hello_express.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                         Hello Express
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="4.3" data-path="hello-world-node/grunt.html">
            
                
                    <a href="../hello-world-node/grunt.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                         Grunt
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="5" data-path="underscore-functional/README.html">
            
                
                    <a href="../underscore-functional/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                         Underscore and Functional Programming
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="5.1" data-path="underscore-functional/underscore.html">
            
                
                    <a href="../underscore-functional/underscore.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                         Underscore
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="5.2" data-path="underscore-functional/functional.html">
            
                
                    <a href="../underscore-functional/functional.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                         Functional Programming
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="6" data-path="yeoman-assets-rwd/README.html">
            
                
                    <a href="../yeoman-assets-rwd/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                         Generators, Asset Pipeline, and RWD
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="6.1" data-path="yeoman-assets-rwd/sass.html">
            
                
                    <a href="../yeoman-assets-rwd/sass.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                         Sass
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="6.2" data-path="yeoman-assets-rwd/responsive.html">
            
                
                    <a href="../yeoman-assets-rwd/responsive.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.2.</b>
                        
                         Responsive Web Design
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="6.3" data-path="yeoman-assets-rwd/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html">
            
                
                    <a href="../yeoman-assets-rwd/Personal_Blog_Site_Tutorial_with_Yeoman_and_Zurb.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.3.</b>
                        
                         Personal Blog Site Tutorial with Yeoman and Zurb
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="7" data-path="heroku/Heroku.html">
            
                
                    <a href="../heroku/Heroku.html">
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                         Heroku
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="8" data-path="casper/acceptance_testing_with_casperjs.html">
            
                
                    <a href="../casper/acceptance_testing_with_casperjs.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                         Acceptance Testing with CasperJS
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="9" data-path="day6/README.html">
            
                
                    <a href="../day6/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                         Day Six
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="9.1" data-path="day6/day6_readings.html">
            
                
                    <a href="../day6/day6_readings.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.1.</b>
                        
                         Readings
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="9.2" data-path="day6/Browserify.html">
            
                
                    <a href="../day6/Browserify.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.2.</b>
                        
                         Browserify
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="9.3" data-path="day6/Browserify_lab.html">
            
                
                    <a href="../day6/Browserify_lab.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.3.</b>
                        
                         Browserify lab
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="9.4" data-path="day6/requirejs.html">
            
                
                    <a href="../day6/requirejs.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.4.</b>
                        
                         Require.js
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="10" data-path="day7/README.html">
            
                
                    <a href="../day7/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.</b>
                        
                         Day Seven
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="10.1" data-path="day7/unit_testing.html">
            
                
                    <a href="../day7/unit_testing.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.1.</b>
                        
                         Unit Testing
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="10.2" data-path="day7/REST.html">
            
                
                    <a href="../day7/REST.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.2.</b>
                        
                         REST
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="11" data-path="day8/README.html">
            
                
                    <a href="../day8/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.</b>
                        
                         Day Eight
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="11.1" data-path="day8/superagent_testing.html">
            
                
                    <a href="../day8/superagent_testing.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.1.</b>
                        
                         Test With Super Agent
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="11.2" data-path="day8/mongo_mongoose_and_the_rest.html">
            
                
                    <a href="../day8/mongo_mongoose_and_the_rest.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.2.</b>
                        
                         Mongo, Mongoose and the REST
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="12" data-path="day9/README.html">
            
                
                    <a href="../day9/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.</b>
                        
                         Day Nine
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="12.1" data-path="day9/ajax.html">
            
                
                    <a href="../day9/ajax.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.1.</b>
                        
                         AJAX
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="13" data-path="day10/README.html">
            
                
                    <a href="../day10/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>13.</b>
                        
                         Day Ten
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter active" data-level="14" data-path="ember/README.html">
            
                
                    <a href="../ember/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>14.</b>
                        
                         Ember
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="15" data-path="auth_auth/README.html">
            
                
                    <a href="../auth_auth/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.</b>
                        
                         Auth
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="15.1" data-path="auth_auth/basic_authentication.html">
            
                
                    <a href="../auth_auth/basic_authentication.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.1.</b>
                        
                         Server Auth
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="15.2" data-path="auth_auth/angular_jwt_basic.html">
            
                
                    <a href="../auth_auth/angular_jwt_basic.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.2.</b>
                        
                         Angular Client Auth
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="16" data-path="ec2/README.html">
            
                
                    <a href="../ec2/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>16.</b>
                        
                         EC2
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17" data-path="backbone/README.html">
            
                
                    <a href="../backbone/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.</b>
                        
                         Backbone
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="17.1" data-path="backbone/overview.html">
            
                
                    <a href="../backbone/overview.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.1.</b>
                        
                         Backbone Overview
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17.2" data-path="backbone/models.html">
            
                
                    <a href="../backbone/models.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.2.</b>
                        
                         Backbone Models
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17.3" data-path="backbone/views.html">
            
                
                    <a href="../backbone/views.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.3.</b>
                        
                         Backbone Views
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17.4" data-path="backbone/collections.html">
            
                
                    <a href="../backbone/collections.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.4.</b>
                        
                         Backbone Collections
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17.5" data-path="backbone/routers.html">
            
                
                    <a href="../backbone/routers.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.5.</b>
                        
                         Backbone Routes
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="17.6" data-path="backbone/backbone_crud.html">
            
                
                    <a href="../backbone/backbone_crud.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.6.</b>
                        
                         Backbone CRUD
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="18" data-path="angular/angular_part_1.html">
            
                
                    <a href="../angular/angular_part_1.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.</b>
                        
                         Angular
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="18.1" data-path="angular/angular_part_2.html">
            
                
                    <a href="../angular/angular_part_2.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.1.</b>
                        
                         Angular Part 2
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="18.2" data-path="Angular/angular_part_3.html">
            
                
                    <a href="../Angular/angular_part_3.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.2.</b>
                        
                         Angular Part 3
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="18.3" data-path="auth_auth/angular_jwt_basic.html">
            
                
                    <a href="../auth_auth/angular_jwt_basic.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.3.</b>
                        
                         Angular JWT
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >Full Stack JavaScript Engineering</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_31">
                    
                        <h1 id="learning-ember-via-the-ember-cli">Learning Ember via the Ember CLI</h1>
<p>Here is why I choose to use Ember, and the quickest way to get started.</p>
<h2 id="why-ember">Why Ember?</h2>
<ul>
<li>You&#39;re going to either create your own framework or use someone else&#39;s. The
Ember community has thought about a lot of solutions already, saving you time
and money.</li>
<li>Documentation: Ember used to have a reputation for poor documentation, but
now, it&#39;s well know that it&#39;s much better, (I&#39;m looking at you, Angular). Start
with the <a href="http://emberjs.com/guides/" target="_blank">Ember Guides</a> and I will give you more
resources later.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li><a href="http://en.wikipedia.org/wiki/Convention_over_configuration" target="_blank">Convention over Configuration</a> decreases the number of design decisions you have to make.</li>
</ul>
<h2 id="why-not-angular">Why not Angular?</h2>
<p>I&#39;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&#39;t have any experience
with Angular, so these are all quotes below:</p>
<p><blockquote>&quot;kills the DOM...various ng-attribute references cluttered the page around 
and this was mixed with what is called &quot;mustache-esque&quot; template bindings.&quot;
</blockquote>
  <a href="http://ryantablada.com/post/why-i-chose-ember-js" target="_blank">source</a></p>
<p><blockquote>Angular&#39;s creator describes it as a metaframework - a framework for
creating your application&#39;s framework. Thus, if you get two different Angular
apps, their internals will look completely different.</p>
<p>This is not the approach Ember takes, where you buy in to the framework&#39;s
conventions. So, one could argue that once you learn the conventions, you&#39;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&#39;s worked out pretty well for
them.
</blockquote>
<a href="http://discuss.emberjs.com/t/how-do-we-beat-angularjs-in-the-developers-mindset/3948/3" target="_blank">source</a></p>
<p>To dive deeper, read <a href="http://www.benlesh.com/2014/04/embular-part-1-comparing-ember-and.html" target="_blank">A Five Part Blog Post Series Comparing Angular and Ember</a>
and <a href="http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/" target="_blank">Backbone, Angular, or Ember</a>.</p>
<p>Angular vs Ember <a href="https://docs.google.com/presentation/d/1e0z1pT9JuEh8G5DOtib6XFDHK0GUFtrZrU3IfxJynaA/preview?slide=id.g177e4bd2b_0148" target="_blank">slides</a>.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>You&#39;ll need the following modules if you don&#39;t have them already</p>
<pre><code>npm install -g phantomjs bower
</code></pre><h2 id="installation">Installation</h2>
<p>First step is to install the command line tool globally:</p>
<pre><code>npm install -g ember-cli
</code></pre><p>Then, install the <a href="https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi" target="_blank">Ember Chrome Extension</a>.</p>
<h2 id="kicking-the-tires">Kicking the Tires</h2>
<p>Examine carefully the output of the help option for the <code>ember</code> command.</p>
<pre><code>ember --help
</code></pre><h2 id="our-first-app-setup">Our First App Setup</h2>
<pre><code>ember new emberNotes
cd emberNotes
ember serve
</code></pre><p>Take a look (in your editor) at <code>app/templates/application.hbs</code>. Go ahead and 
change the <code>h2</code> element to &quot;Welcome to Notes&quot; or something similar. The 
<code>{{outlet}}</code> tag is where our content will end up.</p>
<h1 id="generating-more">Generating More</h1>
<p>Browse to the <a href="https://github.com/cavneb/loom-generators-ember-appkit/tree/master/loom/generators" target="_blank">List of Ember Generators</a>.</p>
<pre><code>ember g model note
ember g controller notes
ember g template note
ember g route index
</code></pre><p>Edit <code>app/routes/index.js</code>:</p>
<ol>
<li>Include a model attribute of the route, that points to:</li>
<li>A dummy data variable</li>
</ol>
<pre><code class="lang-javascript">import Ember from <span class="hljs-string">'ember'</span>;

export <span class="hljs-keyword">default</span> Ember.Route.extend({
    model: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> data.result;
    }
});

<span class="hljs-keyword">var</span> data = {
  <span class="hljs-string">"status"</span>: <span class="hljs-string">"ok"</span>,
  <span class="hljs-string">"result"</span>: [
    { noteBody: <span class="hljs-string">"Twilight Sparkle"</span>},
    { noteBody: <span class="hljs-string">"Applejack"</span>},
    { noteBody: <span class="hljs-string">"Fluttershy"</span>},
    { noteBody: <span class="hljs-string">"Rarity"</span>},
    { noteBody: <span class="hljs-string">"Pinkie Pie"</span>},
    { nodeBody: <span class="hljs-string">"Rainbow Dash"</span>}
  ]
};
</code></pre>
<p>And, in <code>app/templates/index.hbs</code>:</p>
<pre><code>{{#each this}}
  &lt;li&gt;{{noteBody}}&lt;/li&gt;
{{/each}}
</code></pre><p>Now, let&#39;s add images to your data. Add a picture attribute, something like this:</p>
<pre><code>&quot;result&quot;: [
    {
      noteBody: &quot;Twilight Sparkle&quot;,
      picture: &quot;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&quot;
    },
    {
      noteBody: &quot;Applejack&quot;,
      picture: &quot;http://img3.wikia.nocookie.net/__cb20121029101939/mlp/images/thumb/e/ee/Applejack_proud_of_herself_S1E01.png/209px-Applejack_proud_of_herself_S1E01.png&quot;
    },
   ]
</code></pre><p>and in your <code>index.hbs</code></p>
<pre><code>{{#each this}}
  &lt;li&gt;
    &lt;img {{bind-attr src=&quot;picture&quot;}} /&gt;
    {{noteBody}}
  &lt;/li&gt;
{{/each}}
</code></pre><p>Now, with more Ponies!</p>
<h2 id="two-way-data-binding">Two-way Data Binding</h2>
<p>in index.hbs</p>
<pre><code>&lt;div&gt;
{{input type=&quot;text&quot; value=name placeholder=&quot;Enter your pony name&quot;}}
&lt;/div&gt;

&lt;div&gt;
  &lt;p&gt;Hello, my pony name is: &lt;b&gt;{{name}}&lt;/b&gt;, and I think Ember is great!&lt;/p&gt;
&lt;/div&gt;
</code></pre><h2 id="more-on-ember-cli">More on Ember CLI</h2>
<ul>
<li><a href="http://iamstef.net/ember-cli/" target="_blank">Ember CLI docs</a></li>
<li><a href="https://www.youtube.com/watch?v=Hm8XsgKT0Qw" target="_blank">Prototyping an Ember App in 20 minutes</a></li>
</ul>
<h2 id="top-ten-resources-for-staying-up-to-date-on-ember">Top Ten Resources for Staying Up to Date on Ember</h2>
<ul>
<li><a href="http://emberjs.com/guides/" target="_blank">http://emberjs.com/guides/</a></li>
<li><a href="http://emberwatch.com" target="_blank">http://emberwatch.com</a></li>
<li><a href="https://emberflare.com" target="_blank">https://emberflare.com</a></li>
<li><a href="http://www.embercasts.com" target="_blank">http://www.embercasts.com</a></li>
<li><a href="http://www.confreaks.com/events/emberconf2014" target="_blank">http://www.confreaks.com/events/emberconf2014</a></li>
<li><a href="http://emberweekly.com" target="_blank">http://emberweekly.com</a></li>
<li><a href="https://www.codeschool.com/courses/warming-up-with-ember-js" target="_blank">https://www.codeschool.com/courses/warming-up-with-ember-js</a></li>
<li><a href="http://pluralsight.com/training/courses/TableOfContents?courseName=fire-up-emberjs" target="_blank">http://pluralsight.com/training/courses/TableOfContents?courseName=fire-up-emberjs</a></li>
<li><a href="https://courses.tutsplus.com/courses/lets-learn-ember" target="_blank">https://courses.tutsplus.com/courses/lets-learn-ember</a></li>
<li><a href="http://voidcanvas.com/emberjs-tutorial-two-way-data-binding/" target="_blank">http://voidcanvas.com/emberjs-tutorial-two-way-data-binding/</a></li>
</ul>
<p>And if you&#39;re a Rails dev, too:</p>
<ul>
<li><a href="https://emberbites.com" target="_blank">https://emberbites.com</a></li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../day10/README.html" class="navigation navigation-prev " aria-label="Previous page: Day Ten"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../auth_auth/README.html" class="navigation navigation-next " aria-label="Next page: Auth"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
Morty Proxy This is a proxified and sanitized view of the page, visit original site.