angular8 版本的学习
为什么选择 angular：
内容分布：
AngularJS：
Angular8 的优点：
[]进行数据绑定，()事件绑定Angular 是一个完整的框架，而 React 是一个类库，其对应Angular的各种特性，需要寻找各种开源社区类库，如下表所示。
Angular使用HTML+CSS+组件类，而 React 中所有都是js
Node、npm/cnpm、angular cli。
npm install -g @angular/cling version
推荐插件：angular files、angular language Service、Angular Snippets
chrome插件：augury
创建项目：
ng new <项目名># 跳过安装，只创建文件ng new <项目名> --skip-install --style css --routing false
启动开发服务器：
ng serve
@Component 注解标记一个 Class 为 Angular Component@Component 中的 templateUrl 或者 template 将模板和组件联系起来@Component 中的 styleUrls 或者 styles 将样式和组件联系起来
https://docs.emmet.io/cheat-sheet
ng serve --host 0.0.0.0http://<电脑IP>:4200消除滚动条：
::-webkit-scrollbar {display: none;}
[class.样式类名]="判断表达式"是在应用单个 class 时常用的技巧{{}}就是和方括号等效的组件封装的意义和方法：
[class.className]="条件表达式"[ngClass]="{'One': true, 'Two': true, 'Three': false}"[ngStyle]="{'color': someColor, 'font-size': fontSize}"
引用多个模板元素：
可以使用@ViewChildren，在 @ViewChildren中可以使用引用名或者使用 Angular 组件/指令的类型。声明类型为QueryList<?>
scroll-behavior: smooth;: 轮播图的过渡效果-webkit-overflow-scrolling: touch;：触摸可滚动scroll-snap-type: x mandatory;：在 x 轴强制吸附效果scroll-snap-align: start;：吸附的位置在起始位置
就是属性绑定+事件绑定
<input [value]="username" (input)="username = $event.target.value" />
[value]="username" — 绑定 username 值到input的value(input)="表达式" -绑定表达式到 input的input事件username = $event.target.value- 在input事件触发时执行
$event 表达式，提供事件的数据
FormsModule 中提供的指令
使用[(ngModel)]="变量"形式进行双向绑定
其实是一个语法糖[ngModel]="username" (ngModelChange)="username=$event"
模块就是提供相对独立功能的一组代码
从某种角度说，它像一个小型应用
@NgModule 注解
实际项目中会有一个 Common 模块替代跟模块的作用，包含很多跟模块的功能，而跟模块只做一个引导作用。
ng g m Home --routing
装饰器/注解就是一个函数，但它是一个返回函数的函数，它是ts 的一个特性。
自己的装饰器建立在 shared 目录下的 decorators 目录。
结构型指令：ngIf、ngFor、ngSwitch
属性型指令：ngClass、ngStyle、ngModel
自己的指令文件建立在 shared 目录下的 directives 目录。
指令所在的元素叫宿主。
指令和组件的区别：
指令：我不太在意用的div也好什么也好无所谓，但是我可以改变你自己的行为。
指令可以理解为没有模板的组件，它需要一个宿主元素
指令没有模板，指令要寄宿在一个元素之上 - 宿主（Host）@HostBinding绑定宿主的属性或者样式。@HostListener绑定宿主的事件。
组件的样式中也可以使用:host这样一个伪类选择器代表宿主元素。
避免组件嵌套导致冗余数据和事件传递：
投影组件的可定制化自由度比较大，但是这不意味着说比一般组件要好，它对组件的控制力要弱
简单回答：动态内容
<ng-content select="样式类/HTML标签/指令"></ng-content>
跟路由下的组件必须在 app.module.ts中 imports 添加。
angular 提供动态路由，定义路径变量path。
管道的作用就是在视图上提供便利的值变换的方法
在 home-grand 组件实现了一个自定义管道
angular 注入器分级别，应用级、模块级、组件级。
让彼此耦合性降低了。
home 模块中新建 service 管理数据。
什么是脏值检测？
当数据改变时更新视图（DOM）
什么时候会触发脏值检测？
浏览器事件（如click、mouseover、keyup等）setTimeout()和setInterval()
HTTP 请求
如何进行检测？
检查两个状态值：当前状态和新状态
在上面的步骤中，进行完第一遍的脏值检测后会立刻进行第二遍脏值检测。
在 AfterViewChecked、AfterViewInit 中不能该有模板中有绑定的属性，不然会无限循环。
只会关注@Input注解属性的变化。
绑定不是无代价的
ChangeDetectionStrategy.OnPush 提高木偶组件性能
讲请求看成一句英文，有动词（POST或GET等），也有名词（/posts 资源路径）
5-3