codecamp

Angular 英雄之旅-创建项目

应用的外壳

首先,使用 Angular CLI 来创建最初的应用程序。在本教程中,你将修改并扩展这个入门级的应用程序,以创建出《英雄之旅》应用。

在教程的这个部分,你将完成下列工作:

  1. 设置开发环境。
  2. 创建新的工作区,并初始化应用项目。
  3. 启动开发服务器。
  4. 修改此应用。

要查看本页所讲的范例程序,请参阅现场演练 / 下载范例

搭建开发环境

要想搭建开发环境,请遵循搭建本地环境中的步骤进行操作。

创建新的工作区和一个初始应用

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

要想创建一个新的工作区和一个初始应用项目,需要:

  1. 确保你现在没有位于 Angular 工作区的文件夹中。比如,如果你之前已经创建过 "快速上手" 工作区,请回到其父目录中。
  2. 运行 CLI 命令 ​ng new​,空间名请使用 ​angular-tour-of-heroes​,如下所示:
  3. ng new angular-tour-of-heroes
  4. ng new​ 命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。

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

它还会创建下列工作区和初始项目的文件:

  • 新的工作区,其根目录名叫 ​angular-tour-of-heroes​。
  • 一个最初的骨架应用项目,位于 ​src/app​ 子目录下。
  • 相关的配置文件。

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

启动应用服务器

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

cd angular-tour-of-heroes
ng serve --open
ng serve​ 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。
--open​ 标志会打开浏览器,并访问 ​http://localhost:4200/​。

你会发现本应用正运行在浏览器中。

Angular 组件

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

组件是 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>{{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: #333;
  font-family: Cambria, Georgia, serif;
}
button {
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
button:hover {
  background-color: black;
  color: white;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* 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 (excerpt)
  • /* 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: #333;
      font-family: Cambria, Georgia, serif;
    }
    button {
      background-color: #eee;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: black;
      font-size: 1.2rem;
      padding: 1rem;
      margin-right: 1rem;
      margin-bottom: 1rem;
      margin-top: 1rem;
    }
    button:hover {
      background-color: black;
      color: white;
    }
    button:disabled {
      background-color: #eee;
      color: #aaa;
      cursor: auto;
    }
    
    /* everywhere else */
    * {
      font-family: Arial, Helvetica, sans-serif;
    }

小结

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


Angular 英雄之旅-介绍
Angular 英雄之旅-英雄编辑器
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Angular 开发指南

Angular 特性预览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }