Building Contacto app using EmberCLI

Installation

First install Node.js. Then:

npm install -g bower
npm install -g phantomjs

This app requires EmberCLI to be installed. You can install it via npm using npm install -g ember-cli. But the recommended way is to install via git repo.

git clone https://github.com/stefanpenner/ember-cli.git
cd ember-cli
npm link

ember new contacto
cd contacto
npm link ember-cli

Bootstrap SASS Ember Addon

$ bower install --save bootstrap-sass-official
$ npm install --save-dev broccoli-sass

Rename app/styles/app.css to app/styles/app.scss

Import the bootstrap in app/styles/app.scss

@import 'vendor/bootstrap-sass-official/assets/stylesheets/bootstrap';

For Bootstrap glyphicons to work properly, we need to make the tree, merge and export in Brocfile.js For this, we need some extra packages to be installed:

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

The replace Brocfile.js content:

module.exports = app.toTree();

with

// Put the bootstrap fonts in the place that the bootstrap css expects to find them.
var pickFiles = require('broccoli-static-compiler');
var bootstrapFonts = pickFiles('vendor/bootstrap-sass-official/assets/fonts/bootstrap', {
    srcDir: '/',
    destDir: '/assets/bootstrap'
});

// Merge the bootstrapFonts with the ember app tree
var mergeTrees = require('broccoli-merge-trees');
module.exports = mergeTrees([app.toTree(),bootstrapFonts]);

Run the application

$ ember server

and open http://localhost:4200

Create Application Adapter

$ ember g adapter application

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://boiling-shore-3684.herokuapp.com'
});

Create Model

ember g model contact

import DS from 'ember-data';

export default DS.Model.extend({
  first  : DS.attr('string'),
  last   : DS.attr('string'),

  fullName: function() {
    return this.get('first') + ' ' + this.get('last');
  }.property('first', 'last')
});

Create Routes

ember g route index

import Ember from 'ember';

export default Ember.Route.extend({
  redirect: function() {
    this.transitionTo('contacts.index');
  }
});

ember g route contacts/index

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('contact');
  }
});

Update Router

import Ember from 'ember';

var Router = Ember.Router.extend({
  location: ContactoENV.locationType
});

Router.map(function() {
  this.resource('contacts', { path: '/contacts' }, function() {
    this.route('show', { path: '/:id' });
  });
});

export default Router;

Handlebars Templates

application.hbs

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Contacto</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">
  {{outlet}}
</div>

ember g template contacts/index

contacts/index.hbs

<div class="row">
<div class="col-md-6 col-md-offset-3">
  <div class="list-group">
    {{#each contact in controller}}
      {{#link-to "contacts.show" contact class="list-group-item"}}
        <img class="img-circle" {{ bind-attr src=contact.avatar}}>
        {{contact.fullName}} <span class="badge">></span>
      {{/link-to}}
    {{/each}}
  </div>
</div>
</div>

<div class="row">
  <div class="col-md-4">
    {{#link-to 'contacts.new' class="btn btn-default"}}
      <span class="glyphicon glyphicon-plus"></span> Add New Contact
    {{/link-to}}
  </div>
  <div class="col-md-4 col-md-offset-4"></div>
</div>

Update `app.scss`

@import 'vendor/bootstrap-sass-official/assets/stylesheets/bootstrap';

html, body {
  margin-top: 30px;
}

.img-circle {
  width: 25px;
  height: 25px
}

.list-group-item {
  padding: 8px 10px;
}

$ ember g route contacts/show

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('contact', params.id);
  }
});

contacts/show.hbs

<div class="page-header">
  <h1>Details of {{fullName}} {{#link-to 'contacts.edit' model class="btn btn-default btn-lg"}}
    <span class="glyphicon glyphicon-pencil"></span> Edit
  {{/link-to}}
  </h1>
</div>

<p>First Name: {{first}}</p>
<p>Last Name: {{last}}</p>

Remaining code is at https://github.com/millisami/contacto

millisami/emberjs-with-ember-cli.md