5分钟创建一个Ember.js网站

5分钟创建一个Ember.js网站

Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型 - 视图 - 控制器）架构模式。在Ember.js中，路由用作模型，句柄模板作为视图，控制器处理模型中的数据。今天来演示一下用ember创建一个网站

1、安装Ember

npm install -g ember-cli

2、创建一个应用

ember new ember-quickstart

3、启动服务器

cd ember-quickstart
ember serve

几秒钟后会看到一下信息

Livereload server on http://localhost:7020
Serving on http://localhost:4200/

打开浏览器就会输入 http://localhost:4200 就会看到一个欢迎页面

4、修改app/templates/application.hbs

<h1>PeopleTracker</h1>

{{outlet}}

5、定义路由

ember generate route scientists

命令执行后将显示以下信息

installing route
  create app/routes/scientists.js
  create app/templates/scientists.hbs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

6、打开app/templates/scientists.hbs

增加一下内容

<h2>List of Scientists</h2>

7、在浏览器中输入http://localhost:4200/scientists，将看到h2的内容

8、增加一个model文件

app/routes/scientists.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

修改app/templates/scientists.hbs

<h2>List of Scientists</h2>

<ul>
  {{#each this.model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

Ok，一个简单的应用创建完成了，是不是很方便