简介

Angular 是一个基于 TypeScript 构建的开发平台。它包括：

一个基于组件的框架，用于构建可伸缩的 Web 应用

一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等

一套开发工具，可帮助你开发、构建、测试和更新代码

借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。 Angular 的设计目标之一就是让更新更容易，因此你可以用最小的成本升级到最新的 Angular 版本。最重要的是，Angular 的生态系统由包括 170 万名开发人员、库作者和内容创作者在内的多元团队构成。

组件

组件是构成应用的砖块。组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。@Component() 装饰器会指定如下 Angular 专属信息：

一个 CSS 选择器，用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。

一个 HTML 模板，用于指示 Angular 如何渲染此组件。

一组可选的 CSS 样式，用于定义模板中 HTML 元素的外观。

模板

每个组件都有一个 HTML 模板，用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。

Angular 使用额外的语法扩展了 HTML，使你可以从组件中插入动态值。当组件的状态更改时，Angular 会自动更新已渲染的 DOM。

依赖注入

依赖注入让你可以声明 TypeScript 类的依赖项，而无需操心如何实例化它们，Angular 会为你处理这些琐事。这种设计模式能让你写出更加可测试、也更灵活的代码。尽管了解依赖注入对于开始用 Angular 并不是至关重要的事，但我们还是强烈建议你将其作为最佳实践，并且 Angular 自身的方方面面都在一定程度上利用了它。

---

英雄之旅

学习和完成的工作

• 使用 Angular 的内置指令来显示 / 隐藏元素，并显示英雄数据的列表。
• 创建 Angular 组件以显示英雄的详情，并显示一个英雄数组。
• 为只读数据使用单向数据绑定。
• 添加可编辑字段，使用双向数据绑定来更新模型。
• 把组件中的方法绑定到用户事件上，比如按键和点击。
• 让用户可以在主列表中选择一个英雄，然后在详情视图中编辑他。
• 使用管道来格式化数据。
• 创建共享的服务来管理这些英雄。
• 使用路由在不同的视图及其组件之间导航。

---

步骤

• 1 根据教程进行相应操作

ng generate component heroesTrip 等

根据angular官网上的英雄之旅的教程完成整个英雄之旅的架构和功能实现。

• 2 根据对angular的理解在已有项目中加入自己构想。

由于在学习angular之前我们学习了bootstrap架构，为了让整个项目看起来没那么单调且尽量地好看，我自己去网上学习了angular material和如何将bootstrap在angular中使用；在整个学习和应用中，我发现bootstrap与angular并没有想象中那么契合，很多时候，在静态网页中能使用的样式，在angular中却不能生效。
最后通过逐步调整，最终我还是在angular中成功使用了bootstrap。