Angular

https://cloud.tencent.com/developer/devdocs

1.设计原则
(1)YAGNI
You Aren‘t Gonna Need It,你不会需要它;不写不需要的功能

(2)KISS
Keep It Simple and Stupid,让你的代码越简单/傻瓜越好
(3)OCP
Open Close Principle,开闭原则,对外界修改封闭(不允许修改已有代码)，对外界的扩展开放

(4)High Cohesion, Low Coupling

高聚合,低耦合;功能相关代码紧密在一起;功能不相干代码拆分越明确越好

(5)迪米特法则/最少知识原则
一个对象/组件，数据/操作越少越好

Angular由Google在2009年创建的MVVM框架,适用于中大型的企业级SPA应用。

V1.x官网: https://angularjs.org/
Angularjs用JS编写
V2.x~8.x官网: https://angular.io/ Angular 用TS编写
V2.x~8.x中文网: https://angular.cn/
提示: V1到V2的升级变化非常大!
注意: Angular 8.x要求Node.js版本必须是10.9以上!

3.创建第一个 Angular项目
①安装Node.js和NPM
Node.js版本必须>=10.9
②安装全局的Angular脚手架工具
npm i  -g  @angular/cli

默认会在C:\Users\web\AppData\Roaming\npm目录下安装ng.cmd可执行文件及其相关文件
③运行全局脚手架，创建一个 Angular空白项目

　　ng new myngapp01

此步需要联网从NPM官网下载第三方模块

Would you like to add Angular routing? y

Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]

④进入项目根目录,运行该项目(Node.js 项目)
npm  start 或者 ng  serve

4.Angular项目引导启动流程
①系统运行main.ts
②main.ts启动主模块AppModule
③在主模块中引导启动主组件AppComponent

④主组件中声明了模板和样式,最终渲染在index.html中<app-root/>

注意：组件必须在某个模块{AppModule}中声明

 使用快捷命令创建:
ng g  component  组件名

(3)Angular核心概念之二----数据绑定
①innerHTML绑定: {{ }}
②属性绑定: [ attr ] =""
③事件绑定: ( click)= "fn( )"
④循环绑定: *ngFor 
⑤选择绑定: *nglf 

⑥选择绑定: [ngSwitch] *ingSwitchCase  *ngSwitchDefault
⑦样式绑定: [ngStyle]   [ngClass]

⑧样式绑定指令: [ngClass]
⑨双向数据绑定指令:

1.Angular核心概念之三一指令(Directive)
指令:是一种特殊的模板页面内容,可以对页面执行特殊的处理;
例如:< any*ngFor="">
Angular中常见指令:
①循环绑定指令: *ngFor
<any *ngFor="let tmp of 集合对象">

②选择绑定指令: *ngIf
<any *nglf= " expression" >
提示: *nglf 会影响DOM结构

③选择绑定指令: [ngSwitch] *ngSwitchCase *ngSwitchDefault
<any [ngSwitch]= "变量名">
<any *ngSwitchCase= "值"> ... </any>

...

< any"ngSwitchDefault> ... </any>

</any>

④样式绑定指令: [ngStyle]
<any [ngStyle]= "obj">
⑤样式绑定指令: [ngClass]
<any [ngClass]="obj">

2.(了解)如何自定义指令
可使用工具ng  g  directive 指令名      快速的创建一个指令

< div  appNeedStrong> ... </div>

@Directive({ selector: ‘appNeedStrong‘ })
export class MyDirective {
contructor( el: ElementRef){
el.nativeElemet.xxx.....
　　}
}

3.Angular中的双向数据绑定
方向1: Model=>View
方向2: View=>Model
Angular中实现双向数据绑定的方法:
<input   [(ngModel)]="userName">

提示: ngModel指令处于FormsModule,必须在当前模块中声明导
入才能使用:

import { FormsModule } from ‘@angular/forms‘;
@NgModule({
imports: [ FormsModule ]
})

如果想监视模型数据的改变(就像Vue.js 中的watch函数)，可以使用
ngModelChange事件:

<input  [(ngModel)]= "userName"  (ngModelChange)="fn()">

示例：创建密码输入框,随着用户的输入,后面的提示信息不停的在改变:

"密码不能为空"
"密码长度不能少于6位"
"密码长度合法"
"密码长度不能超过12位"

使用Angular实现TodoList

4.Angular核心概念之四---管道
Vue.js中的过滤器(filter): <p>{{1| sex(‘zh‘}}</p>
Angular中的类似的概念称为管道(pipe): <p>{{1 |sex:zh‘ }}</p>
Vue.js没有内置任何过滤器;但Angular内置了很多好用的管道:
①lowercase:把数据转换为小写形式

②uppercase:把数据转换为大写形式
③slice:获取字符串或数组中的一部分
④json:把对象转换为JSON字符串
⑤date:把日期/数字转换为特定格式的日期字符串
⑥number:数字格式化(每E位加逗号，并指定小数位数)
⑦currency:把数字以货币形式显示