EmberJS(1)Installation and First App

EmberJS(1)Installation and First App

Make sure my node version is 0.12.+, I was using 0.11.+, it is not working with that version.

Some Error Message from libtool during installation
libtool: unrecognized option `-static'
Try `libtool --help' for more information.
make[1]: *** [/Users/carl/install/node-v0.12.2/out/Release/libcares.a] Error 1
make: *** [node] Error 2

Solution:
Do which -a libtool, disable the customer one, it will works. But I wrongly delete the system one. So I tried with libtool 1.5 and 2.4 and 2.4.6 version. But all of them are not working.

http://nodejs.org/dist

Instead, I download the binary file from here http://nodejs.org/dist/v0.12.2/node-v0.12.2-darwin-x64.tar.gz

Install EmberJS
> npm install -g ember-cli
> npm install -g phantomjs

Create new Project
> ember new easyember

Templates
Expressions {{firstName}}, Outlets {{outlet}}, Components, reusable parts

Router
Models
Route
tell the template which model it should display

The Application load defaults
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
export default Ember.Route.extend({
setupController: function(controller) {
// `controller` is the instance of ApplicationController
controller.set('title', "Hello world!");
}
});

app/controllers/application.js
export default Ember.Controller.extend({
appName: 'My First Example'
});

Simple Routes
Install ‘Ember Inspector’ on chrome, go to chrome://extensions, check the allows checkbox.

here is the application.hbs
<h1>{{appName}}</h1>
<h2>{{title}}</h2>
{{outlet}}

Here is the favorites.hbs to foreach all the title
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>

Here is the routes, routes/favorites.js
import Ember from 'ember';
import $ from 'jquery';

export default Ember.Route.extend({
model: function() {
// the model is an Array of all of the posts
// fetched from this url
return $.ajax('http://localhost:5000/tasks');
}
});

It will automatically load the Ember.ArrayController since the $ajax return an Array.

Error Message:
Refused to connect to 'http://localhost:5000/tasks' because it violates the following Content Security Policy directive: "connect-src 'self' http://sillycat.ddns.net ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report"

Solution:
https://github.com/rwjblue/ember-cli-content-security-policy
Change the config/environment.js as follow:
var ENV = {
modulePrefix: 'easyember',
environment: environment,
baseURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},

APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' https://sillycat.ddns.net",
'font-src': "'self' http://sillycat.ddns.net",
'connect-src': "'self' http://sillycat.ddns.net http://localhost:5000", // Allow data (ajax/websocket) from api.mixpanel.com and custom-api.local
'img-src': "'self'",
'style-src': "'self' 'unsafe-inline' http://sillycat.ddns.net", // Allow inline styles and loaded CSS from http://fonts.googleapis.com
'media-src': "'self'"
}
};

Dynamic Segments
router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

export default Router.map(function() {
this.route('favorites');
this.route('post', {path: '/posts/:post_id'});
});

routes/post.js
import Ember from 'ember';
import $ from 'jquery';

export default Ember.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
{{#each item in controller}}
<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/