Angular

一：mooc实战

1：模块：组件的容器
①：组件：页面显示的一部分内容，可以多次使用，用法：标签调用
指令：ng等 ，html中的标签
②：ng g c 驼峰命名（组件）
③：ngIf
ng-template:我是代码（控制的），不能直接显示

④：根获取子数据 ，输出@output

子组件ts
@output submitData = new EventEmitter();   //定义！！事件绑定！！的名称
this.submitData.emit(data)          //发射给根组件
根组件 html
（submitData）='getData($event)'

⑤：ViewChild，操作Dom元素

1:#给元素命名
<div #middle>
</div>
2：viewchild查找dom元素，ElementRef是dom元素的类
@ViewChild('middle') middleDom:ElementRef;
3：用
this.middleDom.innerHTML

⑥：双向绑定ngmodel
1:

---

⑦：路由
1: 目的：切换视图

<router-outlet></router-outlet>   //必须

2：懒加载，使用时显示
3：导入导出

//根模块 forRoot, 其他模块forChild
//!! 先导入，配置后，在导出
@NgModule({
  imports: [RouterModule.forRoot(routes)],  //设置根路由
  exports: [RouterModule]
})

4：使用
routerlink：获取页面点击，path:展示模块，
小组件的routing,展示组件

---

⑧：管道

{{object | json}}
{{date| date:'yyyy-mm-dd'}}
{{price | currency:'CNY':'symbol':'4.0-2'}} //整数4位，小数最多2位
{{list | slice:1:3}} //索引为1,2
 *ngFor="let item of dict | keyvalue"  //item.key/item.value的形式

⑨：依赖注入

一：界面

2：根模块的ts

3:小组件的ts

二：创建基本的结构
1：[class.样式]
[class.csstyle] = ‘表达式a==1’;
表达式为true，csstyle样式生效

2：数据绑定
[data] = ‘mydata’
等同于
data = ‘{{mydata}}’
3:() 事件绑定

---

1、创建组件

①：手动创建

• 新建component.ts文件
• 在modules的declarations中注册一下
• 写html程序显示{{组件}}

②：自动创建

ng generate component courses   
ng g c courses            //简写
ng g c mydir/MyComponent  //创建组件的时候也可以带路径，

---

2、创建服务

①：手动创建

• 新建service.ts文件
• component.ts的类class中使用 依赖注入
• 在modules的providers中注册一下
  

②：自动创建

ng generate service teacher_service   
ng g s teacher_service    //简写

---

3、创建 模块
含义：把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。
①含义：导入外部模块，browser.material(单选多选框、按钮弹框)
②app.module.ts中顶部 import {} from ‘’

③app.module.ts中 imports 注册一下

---

4、自动创建指令：ng g d MyDirective

5、构建项目：ng build

6、bootstrap的含义

组件的第三方包

---

三：
0:获取数据，赋值数据
this.
1：生成组件

ng g c courses

2：生成服务

ng g s teacher

3：运行

ng serve

4：运行软件
python+vscode
使用vscode
5：定义对象和数组

//对象
info:object = {
'name':'wuyin',
'man':'xiaoqiao'
}
//数组
list：any[] = [111,'xiaoqi',true];

6:表单事件 、事件对象

<input type = 'text' (keydown) = 'down($event)'>
<input type = 'text' (keyup) = 'up($event)'>

up(e){                       //键盘按下，抬起
	if(e.keyCode==13){       //回车键
		console.log(e.target.value); //打印值
		console.log('按下回车');
	}
}

input:表单提交事件
$event :事件对象

$event.target :获取dom，节点对象

---

四：组件的模版指令

1：{{}}

1、组件定义的属性值
<h3> 欢迎来到{{title}}！</h3>
2、调用方法
<h3>可以调用方法{{getVal()}}</h3>
3、计算数学表达式
<h3>{{1+1}}</h3>

2：绑定的方式
①、属性绑定 [ ]

<div [title]="content">鼠标放上去显示内容</div>
content:string="hello word";

②、方法绑定 ( )

<p>{{title}}</p>
<button (click)="changeData()">change</button>

title:string = '我是一个title'
changeData(){ this.title = '我是改变之后的title';}

③、双向绑定 [( )]

<font-resizer [(size)]="fontSizePx"></font-resizer>
 fontSizePx:number=14;

只针对表单，为什么使用呢？因为数据是动态变化的
④、解析html

<div [innerHTML]='htm'></div>
htm:string = '<h2>张三其人，[innerHTML]解析</h2>'

3：结构型指令 *ngIf、*ngFor、ngSwitch
①、*ngIf

//（一）改变值
<p *ngIf="isShow" >显示还是不显示？</p>
<button class="btn" (click)="toggleShow()">控制显示隐藏</button>
isShow:boolean=true;
toggleShow():void{ this.isShow=!this.isShow;}
//（二）并列
<span *ngIf = 'flag else noflag' color = 'red'>{{name}}</span>
<ng-template #noflag>{{name}}</ng-template>
flag:boolean = true;

②、*ngFor

<li *ngFor="let race of races"> {{race.name}}</li>
races:any[]=[{name:"人族"}, {name:"虫族"},{name:"神族"}];//列表

③、*ngSwitch
[ngSwitch] : 属性绑定
④、注意
一个html标签，只能有一个结构型指令。如果想要多个：

• 加一层空的 div 标签
• 加一层< ng-container >

4：属性型指令 NgClass、NgStyle、NgModel
①、NgClass 对象{}, css样式为键，值为boolean，注意：“{}”

//(一)值为 对象 
<div [ngClass]="{'orange':flag, 'size':flag}">
同时批量设置多个样式</div>

flag: boolean = true;
.orange{color:orange}  .size{ font: 20px}

②、NgStyle,键+值（ts定义的值）属性绑定

//（二）循环修改
<li [ngStyle]="{'backgroud-color':fontcolor,'font-size':fontsize}">
样式的值可以改变
</li>

fontcolor:string = 'red';
fontsize:string= '20px';

③、NgModel

<p>ngModel只能用在表单类（输入内容显示数据，双向交互）</p>  
<input [(ngModel)]="currentRace.name"><p>{{currentRace.name}}</p>
currentRace:any={name:"随机种族"};

双向数据绑定 NgModel ，必须在模块里 import FormsModule。

5：管道
作用：格式化数据

{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
currentTime: Date = new Date();

---

四：

2：内置
②md-select, ngModel :规定好的元素选择器名称
③md- 加上 普通的html 的元素关键词，
select、option、

<md-select [(ngModel)] = '3'>  //！！！外层属性可以控制 内层的值
	<md-option>
		{{值}}
	</md-option>
</md-select>

3：ngModel
必须有 name = " "