用Stagehand快速搭建Angular Web应用：web-angular模板使用教程

用Stagehand快速搭建Angular Web应用：web-angular模板使用教程

【免费下载链接】stagehandDart project generator - web apps, console apps, servers, and more.项目地址: https://gitcode.com/gh_mirrors/sta/stagehand

还在为手工搭建 Dart 前端项目而烦恼吗？Stagehand是 Dart 官方出品的项目脚手架生成器，只需一条命令即可快速搭建 Angular Web 应用。本文将以web-angular 模板为例，手把手教你从零生成一个带 Material Design 风格的 AngularDart 项目，并介绍其目录结构与运行方法，帮你 5 分钟跑通第一个 Angular Web 应用。

什么是Stagehand？Dart项目脚手架生成器

Stagehand 是 Dart 团队维护的命令行工具，提供 console-full、server-shelf、web-simple、web-angular 等多种模板。它能自动生成规范化的项目结构、配置文件与示例代码，省去手动创建pubspec.yaml、analysis_options.yaml等文件的繁琐步骤。

其中web-angular 模板专为需要复杂交互与组件化开发的前端项目设计，默认集成 AngularDart 与 AngularDart Components（Material Design 组件库），适合构建表单、后台管理面板等中大型 Web 应用。

Stagehand快速安装方法

安装 Stagehand 非常简单，前提是你已经装好了 Dart SDK。在终端执行：

dart pub global activate stagehand

安装完成后，输入stagehand即可查看全部可用模板列表。

一键生成Angular Web应用：web-angular模板使用步骤

在准备存放项目的目录中运行生成命令：

stagehand web-angular

Stagehand 会询问项目名称，输入后即可生成一个完整的 AngularDart 工程。随后安装依赖：

dart pub get

整个过程只需两条命令，一个可运行的 Angular Web 应用骨架就诞生了。

web-angular模板项目结构解析

生成后的项目结构非常清晰，核心文件如下：

• lib/app_component.dart：应用根组件，使用@Component注解定义选择器my-app
• lib/app_component.html：根组件模板，默认渲染 "My First AngularDart App"
• lib/src/todo_list/todo_list_component.dart：Todo List 功能组件
• lib/src/todo_list/todo_list_service.dart：数据服务，演示依赖注入
• web/index.html：应用入口页面，包含my-app挂载点
• web/main.dart：程序启动入口，调用runApp启动应用
• test/app_test.dart：组件测试用例，基于angular_test编写

其中pubspec.yaml已自动配置好angular、angular_components依赖以及build_runner、build_web_compilers等构建工具，开箱即用。

本地运行AngularDart项目的方法

在项目根目录执行以下命令即可本地预览：

dart run build_runner build webdev serve

启动后浏览器访问本地服务地址，就能看到默认的 Todo List 应用。页面包含一个 Material 风格的输入框、添加按钮和任务列表，支持回车添加、勾选完成与删除任务，非常适合作为学习 AngularDart 组件的入门示例。

用Material Design组件快速搭建界面

web-angular 模板最大的亮点是预置了 AngularDart Components 组件库。在todo_list_component.html中可以看到material-input、material-fab、material-checkbox、material-icon等现成组件，配合ngModel双向绑定、NgFor列表渲染即可实现完整交互逻辑。

修改lib/src/todo_list/todo_list_component.dart中的items列表与增删方法，或替换app_component.html的模板内容，就能把示例改造成你自己的业务页面。

运行测试验证项目质量

模板自带一个最小测试用例，运行：

dart test

即可验证组件是否正确渲染标题。test/app_test.dart中演示了NgTestBed的用法，是编写 AngularDart 组件测试的绝佳参考。

结语

通过 Stagehand 的 web-angular 模板，你可以在几分钟内完成 Angular Web 应用的项目初始化，把精力集中在业务逻辑而非环境配置上。如果你需要命令行工具、REST 服务或其他类型项目，Stagehand 的 console-full、server-shelf 等模板同样值得一试。现在就安装 Stagehand，开始你的第一个 AngularDart 项目吧！

【免费下载链接】stagehandDart project generator - web apps, console apps, servers, and more.项目地址: https://gitcode.com/gh_mirrors/sta/stagehand