你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来让你构建出 Tour of Heroes app(英雄指南) 这个应用。
在教程的本部分,你需要完成下面的操作:
希望对你的开发环境进行设置,请参考下面的链接中的指南:Getting started:
你不需要按照?Getting started?页面中说明的内容从头到尾的进行一次,你只需要完成上面提示的 2 个部分就可以将环境设置好了。
继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。
Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。 在本教程中,你将创建一个新的工作区。
希望创建一个新工作区并且初始一个应用项目,你需要:
ng new
?然后提供空间的名字??angular-tour-of-heroes,
?完整的命令如下显示:
ng new angular-tour-of-heroes
ng new
?命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。Angular CLI 会安装必要的 Angular?npm
?包和其它依赖项。这可能需要几分钟。
它还会创建下列工作区和初始项目的文件:
angular-tour-of-heroes
。angular-tour-of-heroes
(位于?src
?子目录下)。初始应用项目是一个简单的 "欢迎" 应用,随时可以运行它。
进入工作区目录,并启动这个应用。
cd angular-tour-of-heroes
ng serve --open
ng serve
?命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。
--open
?标志会打开浏览器,并访问?http://localhost:4200/
。
你会发现,这个应用已经启动了,并且可以通过浏览器进行访问了。
你所看到的这个页面就是application shell(应用的外壳)。 这个外壳是被一个名叫?AppComponent
?的 Angular?组件(component)控制的。
Components(组件)??是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
用你喜欢的编辑器或 IDE 打开这个项目,并访问?src/app
?目录,来对这个起始应用做一些修改。
你会在这里看到?AppComponent
?外壳的三个实现文件:
app.component.ts
—?组件的类代码,这是用 TypeScript 写的。app.component.html
—?组件的模板,这是用 HTML 写的。app.component.css
—??组件的私有 CSS 样式。打开组件的类文件 (app.component.ts
),并把?title
?属性的值修改为 'Tour of Heroes' (英雄指南)。
title = 'Tour of Heroes';
打开组件的模板文件?app.component.html
?并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容:
<h1>{}</h1>
双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的?title
?属性的值绑定到 HTML 中的?h1
?标记
浏览器自动刷新,并且显示出了新的应用标题。
大多数应用都会努力让整个应用保持一致的外观。 因此,CLI 会生成一个空白的?styles.css
?文件。 你可以把全应用级别的样式放进去。
打开?src/styles.css
?并把下列代码添加到此文件中。
/* Application-wide Styles */ h1?{ ??color:?#369; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-size:?250%; } h2, h3?{ ??color:?#444; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-weight:?lighter; } body { ??margin:?2em; } body, input[type="text"], button { ??color:?#888; ??font-family: Cambria, Georgia; } /* everywhere else */ * { ??font-family:?Arial,?Helvetica,?sans-serif; } |
---|
本教程的源文件以及英雄指南的完整全局样式可以在?在线例子?/?下载范例?中看到。
下面是本页所提到的源代码:
src/app/app.component.ts
import { Component } from?'@angular/core'; ? @Component({ ??selector:?'app-root', ??templateUrl:?'./app.component.html', ??styleUrls: ['./app.component.css'] }) export class AppComponent { ??title =?'Tour of Heroes'; } |
---|
src/app/app.component.html
<h1>{}</h1> |
---|
src/styles.css
/* Application-wide Styles */ h1?{ ??color:?#369; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-size:?250%; } h2, h3?{ ??color:?#444; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-weight:?lighter; } body { ??margin:?2em; } body, input[type="text"], button { ??color:?#888; ??font-family: Cambria, Georgia; } /* everywhere else */ * { ??font-family:?Arial,?Helvetica,?sans-serif; } |
---|
https://www.cwiki.us/display/AngularZH/The+Application+Shell