英雄指南——启动程序

版本：Angular 5.0.0-alpha

本应用开始于一个空的 Angular 应用骨架。运行在线示例 (查看源码)查看应用。

创建应用

让我们开始吧。使用 WebStorm 或命令行和这个GitHub 项目 angular-examples/quickstart 创建一个名为angular_tour_of_heroes的项目。更多详细的介绍请从配置开发环境，查看创建开始项目。

启动应用并保持运行

按照配置开发环境章节的运行应用 部分介绍的，从命令行或 IDE 运行应用。

贯穿整个教程，你都在更改应用。当你准备查看你的改动时，刷新浏览器窗口。这将会重新加载应用。当你保存更新后的代码时，pub工具检测到变化,重新启动服务。

Angular 应用的基础

Angular 应用由组件 组成，组件 是 HTML 模板和控制视图部分的组件类组成的。这个自动程序有一个显示简单的字符串的组件：

// lib/app_component.dart

import 'package:angular/angular.dart';
@Component(
  selector: 'my-app',
  template: '
Hello {{name}}
',
)
class AppComponent {
  var name = 'Angular';
}

每个组件开始于一个描述 HTML 模板和组件类如何在一起工作的@Component 注解。

selector属性告诉 Angular 在index.html内的自定义标签内显示组件。

// web/index.html (inside )

Loading...

template属性定义了一个在

标题内的消息。消息以 “Hello” 开始，以 Angular 插值表达式{{name}}结束。在运行时，Angular 用组件的name属性的值替换{{name}}。插值绑定是你将在本文档中发现的许多 Angular 特性中的一个。

启动程序的代码

应用包含的代码文件请看这里。

本文档中的所有例子至少都有这些核心文件。每个文件都有不同的用途，并且随着应用的增长独自进化。

文件	目的
lib/app_component.dart	定义，随着应用的增长会成为嵌套的组件树的根组件。
test/app_test.dart	定义AppComponent的测试，虽然本教程没有包含测试，你可以从测试章节，学习如何测试英雄指南
web/main.dart	启动应用运行在浏览器
web/index.html	在它的中包含标签。这是应用存在的地方。
web/styles.css	使用到整个应用的样式的集合
pubspec.yaml	描述 Dart 包（应用）及其依赖的文件。详细信息请看 Pubspec Format.

下一步

英雄编辑器