Emberjs with Ember-Cli

Using Ember-Cli to build an Emberjs app

Transcript

1. Ember.js with Ember-cli Dev Meetup, Jul 26, 2014 at CloudFactory By: Sachin Sagar Rai, @millisami http://nepalonrails.com
2. Goal What are we building ?
3. Contacts Manager App Backend api provided by:
 https://github.com/rpflorence/addressbook-api Deployed at:
 http://boiling-shore-3684.herokuapp.com
4. 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…
5. Part 1 Ember.js Basic Concepts
6. Router Architecture Model Controller View Templates
7. Router Architecture Model Controller View Templates Data flows down from models via bindings
8. Router Architecture Model Controller View Templates Events flow up from view layer to router Data flows down from models via bindings
9. 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
10. Part 2 Ember.js app with Ember-Cli
11. http://ember-cli.com
12. 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.
13. Dependencies 1. Nodejs (http://nodejs.org/) 2. Phantomjs (http://phantomjs.org/)
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. The Gist/Code at http://bit.ly/emberjs-with-ember-cli Demo http://boiling-hollows-7521.herokuapp.com Deployed at
23. Questions? Reach me at Twitter: @millisami Mail: millisami@gmail.com Blog: http://nepalonrails.com