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
CSC509 Lecture 03
javiergs
PRO
0
330
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
260
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
CSC305 Lecture 04
javiergs
PRO
0
250
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Scaling GitHub
holman
463
140k
Six Lessons from altMBA
skipperchong
28
4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building an army of robots
kneath
306
46k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
331
21k
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