理解Angular的概念/参加Angular学习活动#1
Angular講座的概述（计划）
-
- 1. Angularのコンセプトを理解する
-
- 2. Angularの代表的なライブラリを知る
- 3. Angularにおける設計手法を考える
在理解框架的过程中，重要的是
框架不仅仅是一种工具，而且通常背后有着一致的“概念”。例如。
-
- Ruby on Rails: 「設定より規約」 ⇒ 細かいルールを定めるのではなく、最適な設定がビルドインされており、開発者が特別な設定を行うのはそれを破りたいときだけだ
-
- React: 「宣言的/関数的」 ⇒ 全てのReactコンポーネントは、データを引数にとりレンダリング情報を出力する関数であり、これにより宣言的かつ単一方向のレンダリングを実現している。
- Vue: 「親しみやすい」 ⇒ ReactやAngularと重複する機能が多いが、それらをより簡潔に、簡単に書けるようになっている。
作为工具的功能通常可以通过谷歌搜索获得许多信息，并且它们往往相当易变。然而，该框架的概念并不经常改变，即使在不同版本之间，而且也有助于使用各种库。
Angular的概念是什么？
Angular的概念可以说是“方便处理大规模设计”。而这是通过以下三个主要概念来保证的。
-
- 模块
-
- 组件和绑定
- 服务依赖注入（DI）
使用这些概念来充分发挥Angular的优势是必要的条件，相反，如果觉得这些不必要且繁重，那么React或Vue可能更适合。
接下来，逐一确认以下事项。
Angular概念①：模块
Angular 具有独立于 JavaScript（ES2015）定义的模块的模块结构，称为 NgModule。 NgModule 表示应用程序的功能和视图单元，并且具有将它们连接起来的作用。
还有一个选项，模块不仅可以是自己制作的，还可以作为外部库的模块被引用。
所有的Angular应用都需要有一个名为AppModule的模块，这个模块必须包含应用中所需的所有其他模块。换句话说，在Angular应用中，需要明确指定模块之间的依赖关系。
这个方面可能会使流程变得复杂，但在管理模块的可重用性和规则约束方面非常有帮助。可以说它正是进行企业级设计更容易的一面。
Angular概念②：组件与模板
组件是在Angular中唯一能定义视图的元素。组件分为两部分，一部分是表示渲染的HTML模板和CSS等，另一部分是表示获取和处理该视图中显示的数据和显示元素的逻辑的类。
然而，在Angular中，主要的实体是类，并且通过将HTML模板和样式与该类关联起来的方式实现此功能。（此关联使用了Typescript的装饰器）
在Angular中，HTML模板是在普通HTML的基础上增加了Angular自有的扩展，通过绑定来交互类内的数据和逻辑。
Angular的概念②: 组件和模板 – 通过绑定进行关联
在Angular中，将模板元素与组件进行绑定是其重要特征之一。绑定包括事件绑定和属性绑定两种形式。
事件绑定
根据用户的操作来更新应用程序的数据，视图与类之间的互动。通常情况下，我们会将方法与用户的操作进行绑定。
属性绑定
将系统内部的状态更改反映到视图中，实现 类 → 视图 的交互。通常，通过将类属性或Getter方法的返回值与显示部分进行绑定来完成。
此外，还存在一种叫做 pipe 的机制，可用于在绑定时对值进行处理。
Angular的概念③：服务的依赖注入（DI）
不依赖于视图的数据和逻辑需要在与特定视图独立的领域中进行保留，以实现可重复使用性和可维护性。这些所保留的内容就是所谓的“服务”。
当将服务类与组件或其他服务进行关联时，不仅仅简单地从组件引用它，而是使用依赖注入（Dependency Injection: DI）。
依存性注入：依赖注入（DI）是什么。
依赖注入（DI）是一种经常在Java等服务器端领域使用的方法，它保持了解耦的同时构建依赖关系。
以 Angular 中内建的方式将实现依赖注入的机制称为 DI 容器。主要的行为如下所示。
-
- 使用服务的类需要描述需要哪些服务。
-
- 将服务注册到DI容器中。
- DI容器在启动时解决依赖关系，并将生成的服务注入到类中。
Angular的概念
Angular的概念在于为企业级大规模设计提供便捷性。
Angular具有与Javascript独立的独特模块结构，明确地描述系统结构。通过将这些模块分离到管理视图的组件和管理逻辑的服务中，确保松耦合的设计，并使用DI解决依赖性问题。视图使用由Angular扩展的HTML作为模板，并通过双向绑定的事件绑定和属性绑定与类逻辑连接。
