本应用开始于一个空的 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: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
var name = 'Angular';
}
每个组件开始于一个描述 HTML 模板和组件类如何在一起工作的@Component 注解。
selector属性告诉 Angular 在index.html内的自定义标签<my-app>内显示组件。
// web/index.html (inside <body>)
<my-app>Loading...</my-app>
template属性定义了一个在<h1>标题内的消息。消息以 “Hello” 开始，以 Angular 插值表达式{{name}}结束。在运行时，Angular 用组件的name属性的值替换{{name}}。插值绑定是你将在本文档中发现的许多 Angular 特性中的一个。
启动程序的代码
应用包含的代码文件请看这里。
本文档中的所有例子至少都有这些核心文件。每个文件都有不同的用途，并且随着应用的增长独自进化。
| 文件 | 目的 |
|---|---|
| lib/app_component.dart | 定义<my-app>，随着应用的增长会成为嵌套的组件树的根组件。 |
| test/app_test.dart | 定义AppComponent的测试，虽然本教程没有包含测试，你可以从测试章节，学习如何测试英雄指南 |
| web/main.dart | 启动应用运行在浏览器 |
| web/index.html | 在它的<body>中包含<my-app>标签。这是应用存在的地方。 |
| web/styles.css | 使用到整个应用的样式的集合 |
| pubspec.yaml | 描述 Dart 包（应用）及其依赖的文件。详细信息请看 Pubspec Format. |
下一步
网友评论