Angular 应用的外壳

2019-05-22 04:40:54 浏览数 (1)

你首先需要使用 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 子目录下）。
  • 相关的配置文件。

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

启动应用服务器

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

代码语言：javascript复制
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' （英雄指南）。

代码语言：javascript复制
title = 'Tour of Heroes';

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

代码语言：javascript复制
<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

css angularjs html

0 人点赞