环境搭建以及使用Ember.js建立第一个静态页面

原文：环境搭建以及使用Ember.js建立第一个静态页面

本篇将为读者介绍Ember项目开发环境的搭建，并建立一个静态页面。

安装Ember CLI

本教程使用的是2.4.3版本的Ember CLI工具集，若是你的是1.13.8版本在启动项目时会提示以下错误：

Future versions of Ember CLI will not support v5.9.1. Please update to Node 0.12 or io.js.

可是项目仍然能够正常访问，不过建议仍是升级到2.4.3版本，免得出现未知错误很差解决。
升级命令：npm install -g ember-cli@2.4.3

查看ember命令是否安装成功，在终端或者控制台下输入下面的命令

ember -v

若是出现以下信息说明环境搭建成功。

version: 2.4.3
node: 5.9.1
npm: 2.13.4
os: darwin x64

若是你用的电脑不是Mac最后一行os有所不一样，这个没关系。第一行是Ember CLI的版本号，第二行是node的版本号，第三行是npm的版本号，最后一个是系统版本。

注意

若是你的执行ember -v得不到上述的版本信息也没关系，仍然按照下面的教程新建项目新建完成项目以后再更行Ember CLI的版本，更新教程请参考Could this be a shame in the making?，只须要根据Project Update部分更新项目便可，更新到最后一步ember init时候会以下确认信息，所有y便可。

? Overwrite .travis.yml? Yes, overwrite
? Overwrite .watchmanconfig? Yes, overwrite
? Overwrite README.md? Yes, overwrite
? Overwrite app/app.js? Yes, overwrite
? Overwrite app/index.html? Yes, overwrite
? Overwrite app/router.js? Yes, overwrite
? Overwrite bower.json? Yes, overwrite
? Overwrite ember-cli-build.js? Yes, overwrite
? Overwrite package.json? Yes, overwrite
? Overwrite tests/helpers/resolver.js? Yes, overwrite
? Overwrite tests/helpers/start-app.js? Yes, overwrite
? Overwrite tests/index.html? Yes, overwrite

更新过程可能还会出现以下选择版本的问题，请根据下面例子选择：

Installed packages for tooling via npm.
  conflict Unable to find suitable version for qunit-notifications
    1) qunit-notifications ~0.0.6
    2) qunit-notifications ~0.1.0
? Answer 2
  conflict Unable to find suitable version for ember
    1) ember >= 1.8.1 < 2.0.0
    2) ember >=1.4 <2
    3) ember > 1.5.0-beta.3
    4) ember ~2.4.3
    5) ember >=1.4
? Answer 4
Installed browser packages via Bower.

最后验证是否更新成功，执行ember -v会获得以下版本信息：

ubuntuvimdeMacBook-Pro:library-app ubuntuvim$ ember -v
ember-cli: 2.4.3
node: 5.9.1
os: darwin x64

更多有关开发环境的详细介绍请看www.ember-cli.com。

建立一个新项目

安装好开发环境以后，直接使用Ember CLI命令建立新项目。下面是建立命令：

ember new library-app

等待命令执行完成，安装过程须要下载所必须的npm插件，跟网络有关系，请耐心等待。

运行项目

等待项目建立完成以后就能够直接使用命令运行项目了，首先进入项目目录下，而后执行ember cli命令运行项目。

//  进入项目目录下
cd library-app
//  执行启动命令
ember server

//的内容为注释，请直接忽略。

等待启动完毕后，打开浏览器执行http://localhost:4200，若是能在页面上看到Welcome to Ember说明项目建立成功。而且能够在浏览器控制台上看到以下图的日志信息：

开启调试模式

在开发阶段最好是把打开调试模式，开启以后能够在浏览器的控制台下看到ember项目执行过程的相关信息，有助于发现问题。
修改library-app/config/environment.js文件的内容，在下面代码段中增长配置：

// ……
if (environment === 'development') {
  // ENV.APP.LOG_RESOLVER = true;
  ENV.APP.LOG_ACTIVE_GENERATION = true;
  ENV.APP.LOG_TRANSITIONS = true;
  ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
  ENV.APP.LOG_VIEW_LOOKUPS = true;
}
//……

重启项目（按Ctrl+C终止在执行ember servere），必须重启才能其效果，能够在浏览器控制台看到了不少的日志信息。好比下图

添加Bootstrap和Sass到项目中

为了美化项目界面引入Bootstrap，这两个插件的安装也是直接使用Ember CLI命令安装，命令以下：

ember install ember-cli-sass
ember install ember-cli-bootstrap-sassy

等待安装完成以后能够在项目目录下的pachage.json和bower.json看到这两个插件的配置信息。

//  bower.json
"bootstrap-sass": "^3.3.6"
// package.json
"ember-cli-sass": "5.3.1"

在项目下增长样式文件

建立文件library-app/app/styles/app.scss，若是项目已经存在文件library-app/app/styles/app.css则重命名为app.scss，样式会被Ember CLI引入到项目中。
在文件中增长以下内容：

@import "bootstrap";

使用快捷键Ctrl+C关闭在用命令ember server启动项目。若是终端没出现错误说明配置是正确的。那么请继续往下看！！

建立项目导航条

在前面引入的了Bootstrap以后咱们就能够在页面中直接使用了，而且不须要再在页面上引入相关的css和js文件。
打开文件library-app/app/templates/application.hbs，清空原有代码再添加以下代码：

<div class="container">
    {{partial 'navbar'}}
    {{outlet}}
</div>

Ember.js项目的页面使用的是Handlebarsjs模板，{{}}是模板的语法。在Ember.js的官方参考教程中有一章是专门介绍如何使用Handlebarsjs模板的，或者根据Ember.js 入门指南之八handlebars基础学习。
在上述代码中{{partial}}是一个ember helper能够用于调用模板，这里就是调用了模板navbar，不过这个功能在2.4的参考文档中移除了能够在1.13.0的文档中看到，更多有关信息请看参考网址。
代码中{{outlet}}也是一个helper，可是这个是一个特殊的helper，你能够把这个helper理解为一个占位符。全部子模板都会渲染到{{outlet}}所在的位置。更多信息请看Ember.js 入门指南之十四番外篇，路由、模板的执行、渲染顺序。

建立一个模板

仍然是使用命令建立模板。

ember g template navbar

等待命令执行完毕以后能够看到library-app/app/templates/navbar.hbs这个文件。下面在文件中增长一个导航条。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{#link-to 'index' class="navbar-brand"}}Library App{{/link-to}}
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

代码中{{link-to}}是Handlebars模板的标签，在第一个{{link-to}}标签中index是一个路由的名字，模板被编译以后这个标签就转成一个广泛HTML标签的<a>，若是你想指定编译以后的标签名请使用属性tagName指定，好比上述代码的第二个link-to标签，在后面的文章中会使用组件（component）重构这个标签。
为了美化界面在页面的顶部加了css的填充，修改样式文件app.scss。

@import "bootstrap";

body {
    padding-top: 20px;
}

等待项目重启完成，能够在页面上看到黑色的导航条，好像咱们而且没有在任何地方使用这个模板navbar，为什么能在首页上显示呢？？其实咱们已经在application.hbs中调用了！在这个模板中有这样一句代码{{partial 'navbar'}}，在此根据模板名调用了模板navbar。若是删除了application.hbs中的{{partial}}界面上就什么都不显示了！请读者自行实验。

建立关于界面并在导航菜单上增长一个菜单项

一样的，使用Ember CLI命令建立一个路由（route），有关路由的信息能够查看官方参考文档或者直接看教程Ember.js 入门指南之二十路由定义，文章上有详细的介绍，欢迎阅读！执行下面的命令建立路由，建立路由的过程当中会同时建立路由对应的模板，因此执行一个命令会获得2个文件：app/templates/about.hbs、app/routes/about.js，同时会在app/router.js中app/自动增长一条路由配置语句this.route('about');。而后在模板about.hbs中增长一些信息：

{{! app/templates/about.hbs }}

# About Page

等待项目重启完成，执行http://localhost:4200/about能够看到刚刚在模板about.hbs中增长的信息。

可是"About Page"怎么会显示在导航条下方呢？好像并无指定啊，也没有想前面那样使用表达式{{partial}}调用模板，有关这个内容的介绍请看Ember.js 入门指南之十四番外篇，路由、模板的执行、渲染顺序，还记得在主模板application.hbs中的{{outlet}}吗？除了application.hbs以外的全部模板都是子模板，子模板会自动渲染到父模板的{{outlet}}上。可是是如何触发显示的呢？很简单，由于咱们访问了about这个路由，路由会自动根据名字查找到同名的模板并显示（Ember默认规则）。

再建立一个模板index，仍然是使用Ember CLI命令建立，执行命令：ember g template index，获得模板后再模板内添加一些内容：

{{! app/templates/index.hbs}}

# Home Page

而后执行http://localhost:4200/，神奇的事情发生了，能够直接看到模板index的内容，而且并无访问http://localhost:4200/index。这又是为何呢？请看Ember.js 入门指南之二十路由定义中关于index路由的解释。简单讲，index路由就是每一个路由默认首页路由，不须要手动建立，这个路由对应的URL是/，当你执行http://localhost:4200/时候实际就是执行http://localhost:4200/index而后渲染的模板就是index.hbs，因此就获得界面显示的效果。
而后在导航栏上在添加一个连接，最后得打以下代码（先后部分代码省略）：

等待项目重启完成，能够看到导航栏上多了一项，而且点击“Home”和“About”看到显示不一样的内容。效果以下图：

到此教程第一篇介绍完毕，若是你看过官方参考文件或者是看过ember teach上的教程理解起来应该是没难度的！多一份耐心就多一份收获。

家庭做业

最后给你留了一份做业，想学好就必需要动手实践才行啊！！！

做业内容：

1. 建立一个名为contact的路由和模板
2. 在导航菜单上增长一个菜单项"Contact"，而且点击这个菜单项看到的是模板contact.hbs的内容。

为了照顾懒人我把完整的代码放在GitHub上，若有须要请参考参考。博文通过屡次修改，博文上的代码与github代码可能有出入，不过影响不大！若是你以为博文对你有点用，请在github项目上给我点个star吧。您的确定对我来讲是最大的动力！！