angular框架研究
Table of Contents
1 Angular介绍
1.1 什么是Angular
Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。
1.2 AngularJS与Angular的概念对照
Angular 这个名字专指现在和未来的 Angular 版本，而 AngularJS 专指 Angular 的所有 v1.x 版本。
1.3 Angular的版本与发布
Angular框架具有稳定性（stability）。稳定性可以确保组件与库、教程、工具和现有实践不会突然被废弃。
Angular 的版本号包括三个部分：major.minor.patch。比如，版本 5.2.9 表示主版本号是 5，小版本号是 2，补丁版本号是 9。
发布周期：
- 每 6 个月一个主版本
- 每个主版本中包含 1~3 个小版本
- 差不多每周一个补丁版本
兼容性说明：向后兼容性承诺的主要目标是确保在核心框架和核心工具中的变化不会破坏现有组件和应用的生态系统，并且不要给 Angular 应用和组件的开发者带来额外的升级/迁移负担。
2 Angular特性
3 Angular核心知识
3.1 架构
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现.
Angular 的基本构造块是 NgModule ，它为 组件 提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。
- 组件定义 视图 。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 每个应用都至少有一个根组件。
- 组件使用 服务 。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件中， 这能让你的代码更加模块化、更加可复用、更加高效。
组件和服务都是简单的类，这些类使用 装饰器 来标出它们的类型，并提供元数据以告知 Angular 该如何使用它们。
- 组件类的元数据将组件类和一个用来定义视图的 模板 关联起来。 模板把普通的 HTML 和 指令 与 绑定标记（markup） 组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。
- 服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过 依赖注入（DI） 使用该服务。
应用的组件通常会定义很多视图，并进行分级组织。 Angular 提供了 Router 服务来帮助你定义视图之间的导航路径。 路由器提供了先进的浏览器内导航功能。
- 组件和模板共同定义了 Angular 的视图。
- 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。
- 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。
- 依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。
3.2 模块和组件
Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule 。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。模块可以在应用启动时立即加载，也可以由路由器进行异步的惰性加载。
NgModule 和组件
组件控制屏幕上被称为视图的一小片区域。
NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件，并在引导期间创建它。 但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。
组件及其模板共同定义视图。组件还可以包含视图层次结构，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。 一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。 这种情况很常见，特别是对一些 UI 库来说。
模板与视图
通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件.
模板很像标准的 HTML，但是它还包含 Angular 的模板语法，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。 Angular 支持双向数据绑定,你的模板可以使用 数据绑定 来协调应用和 DOM 中的数据，使用 管道 在显示出来之前对其进行转换，使用 指令 来把程序逻辑应用到要显示的内容上。
3.3 服务与依赖注入
服务 是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。
Angular 把组件和服务区分开，以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。
理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些 模型 的概念）的中介者。
组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。
Angular 不会 强制 你遵循这些原则。它只会通过 依赖注入 让你能更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。
3.4 特性和工具
3.4.1 响应式编程工具
- 生命周期钩子：通过实现生命周期钩子接口，可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。
- 可观察对象（Observable）和事件处理：如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息，比如用户交互事件和异步操作结果。
3.4.2 客户端与服务器的交互工具
- HTTP：用 HTTP 客户端与服务器通讯，以获取数据、保存数据或执行服务端动作。
- 服务端渲染：Angular Universal 会通过服务端渲染（SSR）技术在服务器上生成静态的应用页面。 可以在服务器上运行 Angular 应用，以提升性能并在手机或低功耗设备上快速显示首屏，并为 Web 爬虫提供帮助（SEO）。
- Service Worker：借助 Service Worker 来减轻对网络的依赖，可以显著提升用户体验。
3.4.3 特定领域的库
- 动画：使用 Angular 的动画库，可以让组件支持动画行为，而不用深入了解动画技术或 CSS。
- Forms：通过基于 HTML 的验证和脏数据检查，来支持复杂的数据输入场景。
3.4.4 开发周期支持
- 编译：Angular 为开发环境提供了 JIT（即时）编译方式，为生产环境提供了 AOT（预先）编译方式。
- 测试平台：对应用的各个部件运行单元测试，让它们好像在和 Angular 框架交互一样。
- 国际化：Angular 的国际化工具可以帮助让应用可用于多种语言中。
- 安全指南： Angular 对常见 Web 应用的弱点和工具（比如跨站脚本攻击）提供的内置防护措施。
3.4.5 环境搭建、构建与开发配置
- CLI：Angular CLI 是一个命令行工具，可以使用它来创建项目、生成应用及库代码，还能执行很多开发任务，比如测试、打包和发布。
- npm 包：Angular 框架、CLI 和应用中使用的组件都是用 npm 打包的，并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 package.json 文件，它会指定一组初始的包，它们可以一起使用，共同支持很多常见的应用场景。
- TypeScript：TypeScript 是 Angular 应用开发的主要语言。
- 浏览器支持：各种浏览器兼容。
- 构建与运行：为项目定义不同的构建和代理服务器设置的配置方式，比如开发、预生产和生产。
- 发布：应用发布到远端服务器。
4 项目文件结构
你要在 Angular 工作空间的上下文环境中开发应用。每个工作空间中包括一个或多个项目的文件。每个项目是一组文件，由标准应用、库或一组端到端（e2e）测试组成。
Angular CLI 命令 ng new <project_name> 可以帮你开始项目。 当你运行该命令时，CLI 会在新建的工作空间（以 project_name 为根目录）中，安装必要的 Angular npm 包和其它依赖。 它还会创建如下的工作空间和最初的项目文件：
一个初始的骨架应用项目，也叫 project_name（位于 src/ 子目录下）。
一个端到端测试项目（位于 e2e/ 子目录下）。
相关配置文件。
初始的应用项目包含一个简单的 Welcome 应用，随时可以运行。
