Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:04
Show Gist options
  • Save millisami/79ce069ce1d4efc3c6f4 to your computer and use it in GitHub Desktop.
Save millisami/79ce069ce1d4efc3c6f4 to your computer and use it in GitHub Desktop.
Emberjs app using ember-cli

Building Contacto app using EmberCLI


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
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();


// 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: ''

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() {

ember g route contacts/index
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {

Update Router

import Ember from 'ember';

var Router = Ember.Router.extend({
  location: ContactoENV.locationType
}); {
  this.resource('contacts', { path: '/contacts' }, function() {
    this.route('show', { path: '/:id' });

export default Router;

Handlebars Templates

<!-- 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>
      <a class="navbar-brand" href="/">Contacto</a>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
    </div><!--/.nav-collapse -->

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

<div class="row">
  <div class="col-md-4">
    {{#link-to '' class="btn btn-default"}}
      <span class="glyphicon glyphicon-plus"></span> Add New Contact
  <div class="col-md-4 col-md-offset-4"></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) {

<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

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

Remaining code is at

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment