Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Emberjs with Ember-Cli
Search
millisami
July 26, 2014
Programming
6
3.9k
Emberjs with Ember-Cli
Using Ember-Cli to build an Emberjs app
millisami
July 26, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
220
OSS開発者という働き方
andpad
5
1.7k
🔨 小さなビルドシステムを作る
momeemt
3
660
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
390
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
TDD 実践ミニトーク
contour_gara
1
280
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
250
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
Improving my own Ruby thereafter
sisshiki1969
1
150
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
A designer walks into a library…
pauljervisheath
207
24k
Typedesign – Prime Four
hannesfritz
42
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Docker and Python
trallard
45
3.5k
Building an army of robots
kneath
306
46k
Transcript
Ember.js with Ember-cli Dev Meetup, Jul 26, 2014 at CloudFactory
By: Sachin Sagar Rai, @millisami http://nepalonrails.com
Goal What are we building ?
Contacts Manager App Backend api provided by: https://github.com/rpflorence/addressbook-api Deployed at:
http://boiling-shore-3684.herokuapp.com
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…
Part 1 Ember.js Basic Concepts
Router Architecture Model Controller View Templates
Router Architecture Model Controller View Templates Data flows down from
models via bindings
Router Architecture Model Controller View Templates Events flow up from
view layer to router Data flows down from models via bindings
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
Part 2 Ember.js app with Ember-Cli
http://ember-cli.com
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.
Dependencies 1. Nodejs (http://nodejs.org/) 2. Phantomjs (http://phantomjs.org/)
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
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
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
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
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
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
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
The Gist/Code at http://bit.ly/emberjs-with-ember-cli Demo http://boiling-hollows-7521.herokuapp.com Deployed at
None
Questions? Reach me at Twitter: @millisami Mail:
[email protected]
Blog: http://nepalonrails.com