Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Emberjs with Ember-Cli

Emberjs with Ember-Cli

Using Ember-Cli to build an Emberjs app

millisami

July 26, 2014
Tweet

Other Decks in Programming

Transcript

  1. Ember.js with Ember-cli Dev Meetup, Jul 26, 2014 at CloudFactory

    By: Sachin Sagar Rai, @millisami http://nepalonrails.com
  2. Why Ember? 1. Building ambitious web applications 2. Convention over

    Configuration 3. Follow the convention, trivial choices are the enemy 4. Write less code 5. Built for productivity 6. On n on…
  3. Router Architecture Model Controller View Templates Events flow up from

    view layer to router Data flows down from models via bindings
  4. Router Architecture Model Controller View Templates Events flow up from

    view layer to router Router updates models & controllers based on events Data flows down from models via bindings
  5. What is Ember-Cli 1. Assets Compilation 2. Modules 3. Testing

    using Cli 4. Dependency Management The command line interface for building ambitious web applications.
  6. git clone https://github.com/stefanpenner/ember-cli.git cd ember-cli npm link Installation ember new

    contacto cd contacto npm link ember-cli ember server # Generating an emberjs app # Installing ember-cli
  7. Router 1 import Ember from 'ember'; 2 3 var Router

    = Ember.Router.extend({ 4 location: ContactoENV.locationType 5 }); 6 7 Router.map(function() { 8 this.resource('contacts', { path: '/contacts' }, function() { 9 this.route('show', { path: '/:id' }); 10 this.route('edit', { path: '/:id/edit' }); 11 this.route('new'); 12 }); 13 }); 14 15 export default Router; app/router.js
  8. Route 1 import Ember from 'ember'; 2 3 export default

    Ember.Route.extend({ 4 model: function () { 5 return this.store.find('contact'); 6 } 7 }); app/routes/contacts/index.js
  9. Models 1 import DS from 'ember-data'; 2 3 export default

    DS.Model.extend({ 4 first : DS.attr('string'), 5 last : DS.attr('string'), 6 avatar : DS.attr('string'), 7 8 fullName: function() { 9 return this.get('first') + ' ' + this.get('last'); 10 }.property('first', 'last') 11 }); app/models/contact.js
  10. Controllers 1 import Ember from 'ember'; 2 3 export default

    Ember.Controller.extend({ 4 actions: { 5 submit: function () { 6 var self = this; 7 return this.get('content').save().then(function () { 8 self.transitionToRoute('contacts.index'); 9 }); 10 } 11 } 12 }); app/controllers/contacts/new.js
  11. Views 1 import Ember from 'ember'; 2 3 export default

    Ember.View.extend({ 4 click: function() { 5 this.get('controller').send('deleteUser', 10); 6 } 7 }); app/views/clickable.js
  12. Templates 1 <div class="col-md-4"> 2 <div class="list-group"> 3 {{#each contact

    in controller}} 4 {{#link-to "contacts.show" contact class="list-group-item"}} 5 <img class="img-circle" {{ bind-attr src=contact.avatar}}> 6 {{contact.fullName}} <span class="badge">></span> 7 {{/link-to}} 8 {{/each}} 9 </div> 10 </div> 11 12 <div class="col-md-8"> 13 {{#link-to 'contacts.new' class="btn btn-default"}} 14 <span class="glyphicon glyphicon-plus"></span> Add New Contact 15 {{/link-to}} 16 </div> app/templates/contacts/index.hbs