环境搭建以及运用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.js建立第一个静态页面》

开启调试形式

在开辟阶段最好是把翻开调试形式,开启以后能够在浏览器的掌握台下看到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),必需重启才其结果,能够在浏览器掌握台看到了许多的日记信息。比以下图

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

增加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.js建立第一个静态页面》

到此教程第一篇引见终了,假如你看过官方参考文件或许是看过ember teach上的教程明白起来应该是没难度的!多一份耐烦就多一份收成。

家庭功课

末了给你留了一份功课,想学好就必需要着手实践才行啊!!!

功课内容:

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

为了照应懒人我把完全的代码放在GitHub上,若有须要请参考参考。博文经由屡次修正,博文上的代码与github代码能够有相差,不过影响不大!假如你以为博文对你有点用,请在github项目上给我点个star吧。您的一定对我来说是最大的动力!!

    原文作者:ember_teach
    原文地址: https://segmentfault.com/a/1190000005154925
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞