随着Flutter在日本越来越受欢迎，我想写一个关于在使用Flutter的编程语言Dart上开发Web应用的人所需的AngularDart相关步骤和库的文章。我尽量用简单易懂的语言写得详细一些，所以文章可能有点长。作为步骤，只需安装SDK、webdev、stagehand和angular_cli，并将pubspec.yaml中的版本更新到最新即可。

关于AngularDart

Angular是一种流行的JavaScript框架，而AngularDart是使用Dart语言编写的具有几乎相同思想的框架。虽然TypeScript版的Angular和AngularDart都是由Google深度参与开发的产品，但为什么会有两个版本是很多人都感到疑惑的。以下是关于这一点的简要说明。

1. 受AngularJS启发，Dart版Angular在2014年开发。

 

1. AngularJS的2版本(现在的Angular)使用TS进行开发，决定将Dart版也从TS转译。

 

1. 虽然我们努力进行2版本的开发，但是由于Angular的开发者必须精通三种语言(TypeScript、JavaScript、Dart)，所以开发进度并不顺利(还需要准备大量用于桥接的类)。

 

TS版和Dart版走上了不同的道路，根据各自语言的特点进行开发(2017年)。由此，删除了不必要的类，并且能够进行适当的性能调优，开发速度显著提升，直到现在。

蜂鸟

蜂鸟成为了话题。这是否会导致AngularDart被抛弃呢？我想有些人可能会这样想，但最近AngularDart的开发变得更加活跃。在AngularDart5.0发布之后，开发似乎停滞了下来，我印象中是这样的。可能是资源主要投入在蜂鸟和SDK的开发上了吧。虽然不清楚是否已经有所进展，但从最近几周来看，开发变得相当活跃。从资源的投入情况来看，我觉得Google突然放弃AngularDart的可能性很小。
作为一个注重测试性的人，我不太喜欢以canvas为基础的渲染方式的蜂鸟……嗯，考虑到Flutter的架构，使用canvas将其顺利转移到Web上在某种程度上是自然的。我认为使用Flutter开发移动应用程序并且快速创建移动版Web也是很适合的需求。

稍微偏离了话题，但是关于AngularDart的闲谈就到这里，我们立刻开始整理AngularDart的开发环境设置步骤吧。

搭建开发环境

以下是必须的内容。

• Dart SDK

 

webdev

如果还能使用以下内容，开发工作将会更加顺利。

• stagehand

 

• Intellij IDEA(WebStorm)のDartプラグイン

angular_cli
angular analyzer plugin

达特软件开发包

这个是没有它就无法开始的东西呢。这个SDK中还包含了像 Dart 包管理器 pub 这样的功能。

Dart SDK的安装

我们可以通过各个操作系统的软件包管理器安装最新版本的SDK（2.2.1-dev.4.0）。我自己会下载zip文件并将其添加到环境变量中。

请注意，由于我们将使用后文提及的最新版webdev，请安装最新版本2.2.1-dev.4.0，该版本截至目前为止（2019/04/14）是最新的。

只要通过下面的命令能够显示版本信息，就是OK的。

$ dart --version
Dart VM version: 2.2.1-dev.4.0 (Wed Apr 10 21:16:14 2019 +0200) on "linux_x64"

网站开发

使用webdev工具可以实现实时加载、热加载等功能。此外，发布版本的构建也可以使用webdev。

WebDev的安装

使用DartSDK中提到过的pub命令来进行安装。

pub global activate webdev

通常情况下，不需要指定最新版本（如果未指定，则会使用最新的稳定版本），但这次我们将指定为2.0.0-alpha.2，因为要使用最新的非稳定版本（2.0的稳定版已于2019年4月24日发布）。

虽然略去了global activate的详细说明，简单来说，它可以使您能够从命令行中启动Dart的源代码。但是，为了实现这一点，需要将路径设置为通过global activate安装的目录。安装目录将位于主目录下的.pub-cache/bin目录中。因此，在Linux上，需要通过以下方式设置路径。

PATH=＄HOME/.pub-cache/bin:$PATH

如果在以下命令中显示版本信息，则表示路径设置正确。

$ webdev --version
2.0.0

当你在AngularDart项目的根目录下执行”webdev serve –auto=restart”命令时，可以在实时重载状态下进行开发。虽然webdev可以进行许多操作，但我打算在另一篇文章中详细介绍。

为了使用AngularDart进行开发，下面是必要的最低基本要求，但仅凭这些对于初学者来说可能会遇到一些困难，因此建议您设置以下环境。

舞台助理

使用命令行可以生成Dart的各种模板。

安装Stagehand。

和webdev类似，使用pub命令进行安装。

pub global activate stagehand

在安装后，您可以在任意位置创建一个项目目录，在该目录下运行以下命令，即可生成AngularDart的模板。

stagehand web-angular

虽然在上述中生成了模板，但各种版本有些过时，让我们将pubspec.yaml文件的内容更新到最新版本。

name: qiita_sample01
description: A web app that uses AngularDart Components

environment:
  sdk: '>=2.1.0 <3.0.0'

dependencies:
  angular: ^5.3.0
  angular_components: ^0.12.0

dev_dependencies:
  angular_test: ^2.3.0
  build_runner: ^1.3.1
  build_test: ^0.10.7
  build_web_compilers: ^1.2.0
  pedantic: ^1.5.0
  test: ^1.6.2

在终端中运行”pub get”来获取依赖库，在此状态下运行”webdev serve –auto=restart”会以实时重新加载模式运行生成的示例应用程序。

Angular CLI (命令行界面)

使用Angular Dart的命令行可以生成组件（dart、html）。当创建Angular Dart组件时，通常需要创建一个组件类（Dart）、对应的HTML文件以及定义该HTML的样式的CSS文件，但是每次手动创建这三个文件都很麻烦，所以使用angular_cli可以快速创建模板，省去很多麻烦（目前不会生成CSS文件）。

安装 Angular CLI

与webdev和stagehand类似，你可以使用pub命令进行安装。

pub global activate angular_cli

当您运行以下命令时，将在当前目录下生成sample_component.dart和sample_component.html文件。您可以使用-p参数指定目录。

ngdart generate component SampleComponent -p .

Dart插件（IntelliJ）

在VS Code等各种编辑器中都有插件存在，但我认为到目前为止最强大支持开发的是Intellij IDEA。它不仅具备代码补全功能，还能进行一些重构和代码自动生成，以及静态检查等。我在编写Dart代码时始终都使用Intellij。另外，后面提到的Angular分析插件也非常强大。

安装Dart插件

请按照Intellij的插件安装方式，在插件市场选项卡中搜索Dart即可安装Dart插件。

角度分析器插件

在HTML文件中，可以进行组件的静态检查，包括补全选择器（组件），补全组件属性和动作等。以前它的运行不稳定，但最近非常稳定且操作也很舒适。

Angular分析器插件的配置

要使其生效，需要在项目根目录下的analysis_option.yaml文件中启用angular分析器插件（如果是使用stagehand创建的模板，需要删除注释）。

analyzer:
  plugins:
    - angular

如果无法正常运行，请尝试重新启动集成开发环境。

大体就是这种感觉吧。要真正制作一个应用程序，可能需要了解各种库的使用方法（json_serializable、json_annotation、http、collection、quiver），不过关于这些的解释我会在另一篇文章中详细说明（因为已经有很多人对这些库进行了解说，只要搜索一下就能立刻找到）。

最终

现在AngularDart注重开发者的生产力，努力进行各种重构和周边工具的改进。我从AngularDart 2.0开始使用，对这方面的改进赞叹不已。特别是在错误信息方面，改善非常出色（虽然可以说以前很糟糕…）
对于初次接触Dart的Flutter开发者，推荐尝试一下AngularDart。