Angular 应用的外壳

你首先须要使用 Angular CLI 来建立一个初始化的应用。随后，你将对你已经初始化的应用进行修改来让你构建出 Tour of Heroes app（英雄指南） 这个应用。

在教程的本部分，你须要完成下面的操做：

1. 设置的你的环境。
2. 建立一个新的工做区（workspace）和初始化应用项目。
3. 启动应用服务器。
4. 对应用进行修改。

设置你的环境

但愿对你的开发环境进行设置，请参考下面的连接中的指南：Getting started：

• 先决条件
• 安装 Angular CLI

你不须要按照 Getting started 页面中说明的内容从头至尾的进行一次，你只须要完成上面提示的 2 个部分就能够将环境设置好了。

继续下一步来建立《英雄指南》的工做区而且将这个应用初始化。

建立一个新工做区而且初始化应用

Angular 的工做区就是你开发应用所在的上下文环境。一个工做区包含一个或多个项目所需的文件。每一个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。 在本教程中，你将建立一个新的工做区。

但愿建立一个新工做区而且初始一个应用项目，你须要：

1. 确保你如今没有位于 Angular 工做区的文件夹中。例如，在前面的教程中，你已经建立了 Getting Started workspace（开始使用工做区），请回到上级目录中。
2. 运行 CLI 命令  ng new 而后提供空间的名字  angular-tour-of-heroes， 完整的命令以下显示：
   ng new angular-tour-of-heroes
3. ng new 命令会提示你输入要在初始应用项目中包含哪些特性，请按 Enter 或 Return 键接受其默认值。

Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能须要几分钟。

它还会建立下列工做区和初始项目的文件：

• 新的工做区，其根目录名叫 angular-tour-of-heroes。
• 一个最初的骨架应用项目，一样叫作 angular-tour-of-heroes（位于 src 子目录下）。
• 一个端到端测试项目（位于 e2e 子目录下）。
• 相关的配置文件。

初始应用项目是一个简单的 "欢迎" 应用，随时能够运行它。

启动应用服务器

进入工做区目录，并启动这个应用。

cd angular-tour-of-heroes
ng serve --open

ng serve 命令会构建本应用、启动开发服务器、监听源文件，而且当那些文件发生变化时从新构建本应用。

--open 标志会打开浏览器，并访问 http://localhost:4200/。

你会发现，这个应用已经启动了，而且能够经过浏览器进行访问了。

Angular 组件

你所看到的这个页面就是application shell（应用的外壳）。 这个外壳是被一个名叫 AppComponent 的 Angular 组件（component）控制的。

Components（组件）  是 Angular 应用中的基本构造块。 它们在屏幕上显示数据，监听用户输入，而且根据这些输入执行相应的动做。

对应用进行修改

用你喜欢的编辑器或 IDE 打开这个项目，并访问 src/app 目录，来对这个起始应用作一些修改。

你会在这里看到 AppComponent 外壳的三个实现文件：

1. app.component.ts— 组件的类代码，这是用 TypeScript 写的。
2. app.component.html— 组件的模板，这是用 HTML 写的。
3. app.component.css—  组件的私有 CSS 样式。

修改应用的标题

打开组件的类文件 (app.component.ts)，并把 title 属性的值修改成 'Tour of Heroes' （英雄指南）。

title = 'Tour of Heroes';

打开组件的模板文件 app.component.html 并清空 Angular CLI 自动生成的默认模板。改成下列 HTML 内容：

<h1>{{title}}</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>{{title}}</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; }

小结

• 你使用 Angular CLI 建立了初始的应用结构。
• 你学会了使用 Angular 组件来显示数据。
• 你使用双花括号插值表达式显示了应用标题。

 

https://www.cwiki.us/display/AngularZH/The+Application+Shell