Ember Demo

README.md

http://blog.jusfeel.cn/2015/12/29/ember-js-embercli-and-emberdata-resources/

If your web development team wants to add a little data-heavy widget to an existing page, AngularJS is a great option. For a fancier, more dynamic app-like web page, you might want something like Ember.If you want to deliver a cross-platform, desktop-level productivity experience like Apple’s iCloud.com, then you want to build with SproutCore.

Slogan: Framework to Build Web App with native UX

Framework: Convention, convention, convention Web: URL, URL, URL App: Fast, Fast, Fast

+Intro 8 mins

• Convention to follow(route, model, template)
• ES6 with transpilers (Babel)
• ember-cli.com (Angular is building it as well)
  • development server
  • unit test/integration test/acceptance test ready
  • deployment ready - one line of code

+Try 10 mins - simple web site app

• structure
• route, nested route
• link-to helper

+Demo 2 mins Who is using it - http://builtwithember.io/ Who is building it - http://emberjs.com/team/ User experience - http://www.hillwave.cn vs. http://www.jusfeel.cn

readme.txt

http://blog.jusfeel.cn/2015/12/29/ember-js-embercli-and-emberdata-resources/

Slogan: Framework to Build Web App with native UX

Framework: Convention, convention, convention
Web: URL, URL, URL
App: Fast, Fast, Fast

+Intro 8 mins
- Convention to follow(route, model, template)
- ES6 with transpilers (Babel)
- ember-cli.com (Angular is building it as well)
  - development server
  - unit test/integration test/acceptance test ready
  - deployment ready - one line of code

+Try 10 mins

+Demo 2 mins
Who is using it - http://builtwithember.io/
Who is building it - http://emberjs.com/team/
User experience - http://www.hillwave.cn vs. http://www.jusfeel.cn

about.template.hbs

<h1>About</h1>

I am hao.

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
{{link-to "Me" "about"}} | {{link-to "Services" "services"}}
<br>
<br>
{{outlet}}
<br>
<br>

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('about', {path: '/about'});
  this.route('services', { path: '/services'}, function() {
  	this.route('web', { path: '/web-development'});
    this.route('it', { path: '/it-development'}); 
  });
});

export default Router;

services.it.route.js

import Ember from 'ember';

const works = [
	"Small company",
  "Middle-sized company network",
  "Corp with multiple Lan"
];

export default Ember.Route.extend({
  model() {
  	return works;
  }
});

services.it.template.hbs

<p>
I can help you manage IT system to the optimal state.

<h3>Please check my works</h3>
{{#each model as |work|}}
<p>{{work}}</p>
{{/each}}
</p>

services.template.hbs

<h1>Services</h1>
<ul>
	<li>{{#link-to "services.web"}}Web Development{{/link-to}}</li>
  <li>{{#link-to "services.it"}}IT Management{{/link-to}}</li>
</ul>
 {{outlet}}

services.web.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

services.web.template.hbs

<p>
I am a web developer. I like coding.
</p>

twiddle.json

{
  "version": "0.6.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember-template-compiler.js"
  }
}