文档章节

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

ubuntuvim
 ubuntuvim
发布于 2016/03/31 17:11
字数 2668
阅读 163
收藏 2

转载于:环境搭建以及使用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.jsonbower.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之后我们就可以在页面中直接使用了,并且不需要再在页面上引入相关的cssjs文件。 打开文件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.hbsapp/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吧。您的肯定对我来说是最大的动力!!

© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
加载中

评论(8)

ubuntuvim
ubuntuvim 博主

引用来自“ubuntuvim”的评论

ember install ember-cli-sass<br>
ember install ember-cli-bootstrap-sassy<br>
这两个命令只是为了引入bootstrap而已,可以不安装的,用另外的方式安装bootstrap就可以了。
参考网址上的第一幅截图下来的代码有介绍的。参考网址:http://blog.ddlisting.com/2016/03/25/ember-js-ru-men-zhi-nan-zhi-er-shi-lu-you-ding-yi/

引用来自“山水人家”的评论

谢谢
不客气,因为我用的不是win系统没遇到你说的错误,希望另一种安装bootstrap的方法能帮到你!如果问题还是无法解决欢迎给我留言。
山水人家

引用来自“ubuntuvim”的评论

ember install ember-cli-sass<br>
ember install ember-cli-bootstrap-sassy<br>
这两个命令只是为了引入bootstrap而已,可以不安装的,用另外的方式安装bootstrap就可以了。
参考网址上的第一幅截图下来的代码有介绍的。参考网址:http://blog.ddlisting.com/2016/03/25/ember-js-ru-men-zhi-nan-zhi-er-shi-lu-you-ding-yi/
谢谢
ubuntuvim
ubuntuvim 博主
ember install ember-cli-sass<br>
ember install ember-cli-bootstrap-sassy<br>
这两个命令只是为了引入bootstrap而已,可以不安装的,用另外的方式安装bootstrap就可以了。
参考网址上的第一幅截图下来的代码有介绍的。参考网址:http://blog.ddlisting.com/2016/03/25/ember-js-ru-men-zhi-nan-zhi-er-shi-lu-you-ding-yi/
山水人家
已用时间 00:00:03.71
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (E:\emberProgram\shuntian-app\node_modules\ember-cli-sass\node_modules\broccoli-sass-source-maps\node_modules\node-sass\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack at emitTwo (events.js:87:13)
gyp ERR! stack at ChildProcess.emit (events.js:172:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\emberProgram\\shuntian-app\\node_modules\\ember-cli-sass\\node_modules\\broccoli-sass-source-maps\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp
ags=" "--libsass_library="
gyp ERR! cwd E:\emberProgram\shuntian-app\node_modules\ember-cli-sass\node_modules\broccoli-sass-source-maps\node_modules\node-sass
gyp ERR! node -v v4.4.1
gyp ERR! n
山水人家
gyp ERR build error
gyp ERR stack Error ''C:\windows \MIcrosoft.NET\Framework\v4.0.30319\msbuild.exe" failed
at ....
山水人家
Error: Can’t find Python executable “python”,(windows操作系统)我在网上找了一下https://mlusiak.com/2013/12/22/fixing-failing-npm-packages-on-windows/按这个网址上的操作了一遍,但是还是不行
ubuntuvim
ubuntuvim 博主

引用来自“山水人家”的评论

你好,我在执行ember install ember-cli-sass
时出错了, 是不是有什么预装软件之类的没有装?
终端提示什么错误了??
山水人家
你好,我在执行ember install ember-cli-sass
时出错了, 是不是有什么预装软件之类的没有装?
【第一篇】基于 @vue/cli3 与 koa 创建 ssr 工程

什么是基于同构代码的 SSR 服务(Server-side rendering based on isomorphic code) 首先,我们需要先明白什么是 spa (single page application),以及基于 vue 的 spa 是如何工作的,这里...

水滴前端
05/29
0
0
Ember.js 入门指南——组件定义

不得不说,Ember的更新是在是太快了!!本教程还没写到一半就又更新到v2.1.0了!!!!不过为了统一还是使用官方v2.0.0的参考文档!! 从本篇开始进入新的一章——组件。这一章将用6篇文章介...

ubuntuvim
2015/10/09
506
0
Go+Vue.js快速搭建Web应用

摘要:如何实现用go和vue搭建一个简单的web应用。当然本文只是一个很初级的例子,希望这篇文章能对你有所帮助。 最近一段时间在项目中使用了go和vue,因此写下该篇文章来供大家参考。 环境准...

点融黑帮
2017/12/20
0
0
模型,保存数据到数据库

文章来源:http://blog.ddlisting.com/2016/04/09/mo-xing-bao-cun-shu-ju-dao-shu-ju-ku/ 接着前面两篇: 环境搭建以及使用Ember.js创建第一个静态页面 引入计算属性、action、动态内容 由于...

ubuntuvim
2016/04/13
102
2
模型高级特性,引入模型关联关系

博文原址:模型高级特性,引入模型关联关系 接着前面五篇: 环境搭建以及使用Ember.js创建第一个静态页面 引入计算属性、action、动态内容 模型,保存数据到数据库 发布项目,加入CRUD功能 ...

ubuntuvim
2016/04/27
35
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
1
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
10
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部