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
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
220
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
820
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
200
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
7
1.9k
Developer Joy == Developer Productivity (really!)
hollycummins
1
240
XStateでReactに秩序を与えたい
gizm000
0
740
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Patched fetch did not work
quramy
4
410
Modernisation Progressive d’Applications PHP
hhamon
0
120
はじめてみよう量子プログラミング
itokoichi01
0
230
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
57
Gamification - CAS2011
davidbonilla
79
5k
Embracing the Ebb and Flow
colly
83
4.4k
Building an army of robots
kneath
302
42k
A Tale of Four Properties
chriscoyier
155
22k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Rails Girls Zürich Keynote
gr2m
93
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
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