配置开发环境

版本：Angular 5.0.0-alpha

使用通用的 Dart 工具箱构建新的 Angular 项目是非常简单的。本页将带领你通过获取和运行在这个指南和教程中特定的初级应用程序。

先决条件

怎么获取这些预备工具的详细信息,请看开始.

• Dart SDK 2.0.0-dev.52.0 或兼容版本
• WebStorm 或你喜欢的IDE(推荐)

创建开始项目

在这个指南和教程中的例子都是基于GitHub项目.你可以通过下面的方式获取项目文件:

• 下载
• 克隆仓库
• 使用 WebStorm 的 Git 支持

使用 WebStorm 的 Git 支持

一旦完成了一些一次性的配置，使用 WebStorm 创建一个应用很简单。

1. 启动 Webstorm。
2. 如果还没有这样做，请看 在 WebStorm 配置 dart 支持。
3. 在欢迎界面,选择Check out from Version Control > Git，或通过菜单选择VCS > Git > Clone…，就会有一个Clone Repository对话框显示出来.
4. 填写下面的字段:
   • Git Repository URL: https://github.com/angular-examples/quickstar
   • Parent Directory: (你喜欢在哪里存放练习代码)
   • Directory Name: angular_tour_of_heroes (或其它任意 有效的包名)
5. 点击 Clone

获取依赖

在 WebStorm 中:

1. 打开新建的项目.
2. 在项目视图中,双击pubspec.yaml.
3. 在pubspec.yaml编辑器视图的右上角:
   1. 点击 Enable Dart support。
   2. 点击 Get dependencies。

WebStorm 会花几秒钟的时间来分析源代码并做一些其它的管理。这只会发生一次。在此之后，你就可以使用WebStorm通常的IDE功能，包括运行这个应用。

如果你没有使用 WebStorm, 你可以在终端窗口中使用下面的命令:

pub get

自定义项目

使用WebStorm,或你喜欢的编辑器:

1. 打开web/index.html，使用符合你应用的标题替换<title>中的内容，例如:<title>Angular Tour of Heroes</title>。
2. 打开pubspec.yaml，更新符合应用的description。例如: description: Tour of Heroes。
3. 可选.如果你想改变你的项目名称，那么使用适合应用的名字——通常和早先创建的目录名字相同，在项目中查找和替换 pubspec 当前的name值(angular_app)。

全局范围的重命名将会改动：pubspec.yaml、web/main.dart和 test/app_test.dart。

运行应用

注意：在 WebStorm 版本 2017.3.4，还没有运行 web 应用的集成支持。

在WebStorm中:

1. 在项目视图中,右击web/index.html。
2. 选择 Run ‘index.html’。

你会在浏览器窗口看到下面的应用：

从命令行运行程序,使用pub来构建和启动服务:

 pub run build_runner serve

之后查看应用程序,访问localhost:8080。

重新加载应用

每当修改了应用,刷新浏览器窗口.当你保存了更新代码,pub工具检测到变化,重新启动服务。

下一步

如果你是 Angular 新手,我们推荐继续学习 Angular。如果你想比刚才创建应用知道的更多,请看启动程序。

学习Angular