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
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
460
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
QA x AIエコシステム段階構築作戦
osu
0
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
効率的な開発手段として VRTを活用する
ishkawa
1
180
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
20250708_JAWS_opscdk
takuyay0ne
2
150
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
iOS開発スターターキットの作り方
akidon0000
0
180
テスト駆動Kaggle
isax1015
1
880
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for humans not robots
tammielis
253
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Building Adaptive Systems
keathley
43
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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: millisami@gmail.com Blog: http://nepalonrails.com