EmberJS(1)Installation and First App
EmberJS(1)InstallationandFirstApp
Makesuremynodeversionis0.12.+,Iwasusing0.11.+,itisnotworkingwiththatversion.
SomeErrorMessagefromlibtoolduringinstallation
libtool:unrecognizedoption`-static'
Try`libtool--help'formoreinformation.
make[1]:***[/Users/carl/install/node-v0.12.2/out/Release/libcares.a]Error1
make:***[node]Error2
Solution:
Dowhich-alibtool,disablethecustomerone,itwillworks.ButIwronglydeletethesystemone.SoItriedwithlibtool1.5and2.4and2.4.6version.Butallofthemarenotworking.
http://nodejs.org/dist
Instead,Idownloadthebinaryfilefromherehttp://nodejs.org/dist/v0.12.2/node-v0.12.2-darwin-x64.tar.gz
InstallEmberJS
>npminstall-gember-cli
>npminstall-gphantomjs
CreatenewProject
>emberneweasyember
Templates
Expressions{{firstName}},Outlets{{outlet}},Components,reusableparts
Router
Models
Route
tellthetemplatewhichmodelitshoulddisplay
TheApplicationloaddefaults
app/app.js
app/controllers/application.js
app/templates/application.hbs
app/routes/application.js
app/templates/application.hbs
<h1>{{appName}}</h1>
<h2>{{title}}</h2>
app/routes/application.js
exportdefaultEmber.Route.extend({
setupController:function(controller){
//`controller`istheinstanceofApplicationController
controller.set('title',"Helloworld!");
}
});
app/controllers/application.js
exportdefaultEmber.Controller.extend({
appName:'MyFirstExample'
});
SimpleRoutes
Install‘EmberInspector’onchrome,gotochrome://extensions,checktheallowscheckbox.
hereistheapplication.hbs
<h1>{{appName}}</h1>
<h2>{{title}}</h2>
{{outlet}}
Hereisthefavorites.hbstoforeachallthetitle
<ul>
{{#eachitemincontroller}}
<li>{{item.title}}</li>
{{/each}}
</ul>
Hereistheroutes,routes/favorites.js
importEmberfrom'ember';
import$from'jquery';
exportdefaultEmber.Route.extend({
model:function(){
//themodelisanArrayofalloftheposts
//fetchedfromthisurl
return$.ajax('http://localhost:5000/tasks');
}
});
ItwillautomaticallyloadtheEmber.ArrayControllersincethe$ajaxreturnanArray.
ErrorMessage:
Refusedtoconnectto'http://localhost:5000/tasks'becauseitviolatesthefollowingContentSecurityPolicydirective:"connect-src'self'http://sillycat.ddns.netws://localhost:35729ws://0.0.0.0:35729http://0.0.0.0:4200/csp-report"
Solution:
https://github.com/rwjblue/ember-cli-content-security-policy
Changetheconfig/environment.jsasfollow:
varENV={
modulePrefix:'easyember',
environment:environment,
baseURL:'/',
locationType:'auto',
EmberENV:{
FEATURES:{
//Hereyoucanenableexperimentalfeaturesonanembercanarybuild
//e.g.'with-controller':true
}
},
APP:{
//Hereyoucanpassflags/optionstoyourapplicationinstance
//whenitiscreated
},
contentSecurityPolicy:{
'default-src':"'none'",
'script-src':"'self'https://sillycat.ddns.net",
'font-src':"'self'http://sillycat.ddns.net",
'connect-src':"'self'http://sillycat.ddns.nethttp://localhost:5000",//Allowdata(ajax/websocket)fromapi.mixpanel.comandcustom-api.local
'img-src':"'self'",
'style-src':"'self''unsafe-inline'http://sillycat.ddns.net",//AllowinlinestylesandloadedCSSfromhttp://fonts.googleapis.com
'media-src':"'self'"
}
};
DynamicSegments
router.js
importEmberfrom'ember';
importconfigfrom'./config/environment';
varRouter=Ember.Router.extend({
location:config.locationType
});
exportdefaultRouter.map(function(){
this.route('favorites');
this.route('post',{path:'/posts/:post_id'});
});
routes/post.js
importEmberfrom'ember';
import$from'jquery';
exportdefaultEmber.Route.extend({
model:function(params){
return$.ajax('http://localhost:5000/tasks/'+params.post_id);
},
serialize:function(post){
return{post_id:Ember.get(post,'id')};
}
});
post.hbs
{{#eachitemincontroller}}
<p>
{{item.title}}
</p>
<p>
{{item.desc}}
</p>
{{/each}}
References:
http://guides.emberjs.com/v1.11.0/ember-cli/glossary/
https://github.com/emberjs/ember.js/
http://www.emberjs.cn/guides/
https://github.com/tastejs/todomvc/tree/gh-pages/examples/emberjs
http://guides.emberjs.com/v1.11.0/templates/the-application-template/
https://github.com/jbdemonte/sample-express-ember-gulp
http://guides.emberjs.com/v1.11.0/concepts/naming-conventions/