-

本篇之前的6篇文章都是第一章的内容，这一章节主要介绍了Ember的对象模型。其中最重要的是计算属性和枚举这2章，非常之重要，一定要好好掌握！

下一章节是第二章模板，Ember应用使用的模板库是handlebar（点我查看更多有关此模板的介绍），这个模板库功能强大，有丰富的标签，包括判断标签if，if else,以及遍历标签each等等。

另外，从下一章开始，我们不再自己手动搭建Ember项目，也不用手动引入Ember库文件，而是使用官方提供的一个非常棒的构建工具——Ember CLI，要使用这个构建工具首先安装并配置。下面两个地址是介绍安装与配置的（推荐第一个）：

  1. http://www.ember-cli.com/user-guide/
  2. https://guides.emberjs.com/v2.4.0/getting-started/

Ember CLI是一个非常重要的构建工具，它可以为开发者创建文件并初始化部分固定的代码。它还可以运行、打包、测试Ember应用。

下面使用这个工具创建一个新的Ember项目chapter2_tempalte。

  1. 新建项目命令: ember new chapter2_tempalte
  2. 进入项目目录并启动服务器： cd chapter2_template
    ember server
  3. 运行项目，浏览器打开这个链接：http://localhost:4200/，如果你能看到如下信息说明安装成功了。

run proj

如果项目创建成功你可以继续往下看，如果项目创建不成功请重试，因为后面的代码都基于这个项目来演示的！！！对于创建项目后得到的每个文件和目录请你看官网文档，上面会有非常详细的说明。为了方便懒人在此就简单介绍其中几个很重要的文件和目录：

目录 说明
app 项目的主要代码都是放在这个目录下
app/controllers 存放C（MVC）层（controller）的代码文件
app/helpers 存放自定义的helper代码文件
app/models 存放M（MVC）层（model）代码文件
app/routes 存放项目路由设置代码文件
app/templates 存放项目模板代码文件
bower_components 存放使用bower命令安装的第三方插件库
bower.json 保存使用bower命令安装的第三方库的配置
package.json 保存使用npm命令安装的第三方库的配置
node_modules 存放使用npm命令安装的第三方插件库
ember-cli-build.js 设置构建规范，引入第三方库
dist 存放编译打包后的项目文件，可以直接复制到服务器中运行

上述这些文件或者目录是后面开发过程经常会用到，相对其他目录和文件来说这些目录和文件是很重要的，只要你是使用ember new appName命令生成的项目都会包括上述这些目录或者文件。其中最重要的就是app目录下的文件、目录了，从app里面的目录结果你就可以很清楚的看到这是个MVC框架的项目。Ember之所以能找到controller对应的template也是根据目录和文件的名称找到的，Ember是有自己的一套命名规则的，如果你想了解更多有关信息请移步folder-layout。

搭好环境之后开始我们的Ember之旅吧！！！
博文完整代码放在Github（博文经过多次修改，博文上的代码与github代码可能又出入，不过影响不大！），如果你觉得博文对你有点用，请在github项目上给我点个star吧。您的肯定对我来说是最大的动力！！

© 2023 mianshi8.net MIT license