Angular前端框架学习——day01
注：以下学习笔记均来源于Angular官方文档。
学习Angular之前应该具备HTML、CSS、JavaScript和最新标准的一些知识，比如类和模块。Angular是基于TypeScript语法进行开发的，所以最好了解TypeScript的基础语法，比如TypeScript的基础类型。
一、什么是Angular？
Angular是一个基于Typescript构建的开发平台。它包括：
一个基于组件的框架，用于构建可伸缩的Web应用。
一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等。
一套开发工具，可帮助你开发、构建、测试和更新代码。
二、Angular应用：知识要点
（1）组件
组件包括三个部分：
带有@Component装饰器的TypeScript类。
HTML模板。
样式文件。
@Component装饰器会指定如下Angular专属信息：
一个CSS选择器，用于定义如何在HTML模板中使用组件。模板中与此选择器匹配的HTML元素将成为该组件的实例。
一个HTML模板，用于指示Angular如何渲染此组件。
一组可选的CSS样式，用于定义模板中HTML元素的外观。
最小化的Angular组件：
在HTML模板中使用此组件：
Angular渲染此组件，生成如下DOM：
（2）模板
每个组件都有一个HTML模板，用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。
Angular支持动态插入值。
当组件的状态更改时，Angular会自动更新已渲染的DOM。
此功能的应用之一是插入动态文本：
这里message的值来自组件类：
当应用加载组件及其模板时，用户将看到以下内容：
Angular还支持属性绑定。
Angular还可以声明事件监听器来监听并响应用户的操作，比如按键、鼠标移动、单击和触摸等。
Angular还可以用指令来为模板添加额外的功能。
Angular中最常用的指令是*ngIf和*ngFor。你可以使用指令执行各种任务，比如动态修改DOM结构。你还可以用自定义指令来创建出色的用户体验。
*ngIf指令的例子：
（3）依赖注入
依赖注入工作原理示例：
文件logger.service.ts中定义了一个Logger类。它包含一个writeCount函数，该函数将一个数字记录到控制台。
hello-world-di.component.ts文件中定义了一个Angular组件。该组件包含一个按钮，它会使用此Logger类的writeCount函数。要访问此功能，可通过向构造函数中添加private logger: Logger来把Logger服务注入到HelloWorldDI类中。
（4）Angular CLI
Angular CLI是开发Angular应用最快、最简单和推荐的方式。举例：
（5）自带库
Angular提供的一些库包括：
Angular路由：高级的客户侧导航功能与基于Angular组件的路由机制。支持惰性加载、嵌套路由、自定义路径匹配规则等。
Angular表单：统一的表单填报与验证体系。
Angular HttpClient：健壮的HTTP客户端库，它可以支持更高级的客户端-服务器通讯。
Angular动画：丰富的动画体系，用于驱动基于应用状态的动画。
Angular PWA：一些用于构建渐进式Web应用（PWA）的工具，包括Service Worker和Web应用清单（Manifest）。
Angular原理图：一些搭建脚手架、重构和升级的自动化工具。用于简化大规模应用的开发。
