Angular入门学习笔记

1.基础知识

生成模板 ng g component name
创建类 ng g class name
ng g module name --flat
ng g service name
当端口被占用时，修改端口运行应用：ng s --port 42** open

先声明构造函数里面赋值或变化

静态属性 title=’ ’
动态属性 [title]=’ ’

模块化Ngmodule–根模块Appmodule
Assets静态资源

*ngIf
*ngFor 结构型指令
*ngSwitch 条件判断
插值语法{{ }}
[()]双向事件与Property
属性绑定语法[ ]

添加，删除和操纵它们的宿主元素等方式重塑DOM

事件绑定() ，click，myclick ，(click)=“ ”
添加按钮button的click事件<button (click)='share()'></button>

@component()装饰器

它提供了该组件的元数据（选择器，模板，样式）
从@angualr/core 导入Input/Output/EventEmitter
定义一个带@Input装饰器的product属性

应用内导航

打包优化技巧 @Injectable() {provedIn;'root'}

标签的title 静态= 动态[ ]= 绑定HTML （innerHTML）

<ol> <li> 有序
<ul> <li> 无序

定义数组
Public list :any[]= [" “，” “，” "]

执行事件 （click）= 表单事件
（keydown）=
(keyup)= e.target.value获取值
let/ var dom:any=event.target
双向数据绑定 MVVM 只针对表单
FormModel 表单关联模块
[(NgModel)]=’keywords’

部署

1.本地构建
2.全局安装Angular CLI ：npm insatll -g @angular/cli
3.创建一个新的Angular CLI工作空间：ng new name

英雄指南

1.设置开发环境
2.创建新的工作空间，并初始化应用项目
3.启动开发服务器
4.修改此应用
搭建环境： ng new name
安装依赖：cnpm install
进入安装位置：cd name
运行应用：ng s --open

Angular组件 应用的外壳 Appcomponent
组件 Angular应用的基本构造块 （显示数据，监听输入，执行动作）
创建名为heroes的新组件：ng g component heroes

声明属性的几种方式

public title='hello';//1
msg='hello';//2
private username:string='hello';//3
public student:any='hello'；//4推荐：

声明对象

private userinfo:object(any)={
	username:'tom',
	age:'4'
}

Public list:any[]=[{'title':'我是新闻'},
					{'title','我是新闻2'},
					{'title','我是新闻3'}]

<ul>
	<li *ngFor='let item of list;let key=index'>//获取索引
		{{key}}----{{item.title}}
	</li>
<ul>

Public userlist:any[]=[
	{username:'张三'，Age:20},
	{username:'里斯'，Age:20}
]

<ul>
	<li *ngFor='let item of userlist'>
		{{item.username}}—{{item.age}}
	</li>
</ul>

Public cars:any[]=[{
	Cate:'宝马',
	List:[
		{Title:'宝马X1',price:'30万'},
		{Title:'宝马X2',price:'40万'},
	]},
	{Cate:'奥迪',
	List:[
		{Title:'奥迪X1',price:'30万'},
		{Title:'奥迪X2',price:'40万'},
	]},
}]

<ul>
	<li *ngFor='let item of cars'>
	  <h2>{{item.cate}}</h2>
	  <ol>
			<li *ngFor='let car of item.list'>
				{{car.title}}----{{car.price}}
			</li>
	 </ol>
	</li>
</ul>

属性绑定·
绑定HTML

//TS里面

public content="<h2>hello</h2>"

//HTML里面

<div [innerHTML]="content">
</div>

定义数组

public arr=['11','22','33'];//1
public list:any[]=["喔",11,"hello"];//2推荐
public list:Array<any>=["我","hello",111];//3

<ol>
  <li *ngFor='let item of list>{{item}}</li>
</ol>

当不满足条件时，禁用按钮

<button nz-button (click)="" [disabled]="!menuForm.valid"></button>

输入框提示

<nz-form-control nzhasFeedback nzErrorTip="这是需要的提示信息"></nz-form-control>

import { Datepipe } from '@angular/common';
@component({
	providers:[Datepipe]
})
constructor(
	private datepipe:Datepipe,
){ }

//初始化表单的时候显示日期

initForm(){
this.menuForm=this.fb.group({
	UPDATETIME:[this.datepipe.transform(new Date()，'yyyy/mm/dd HH:mm:ss')]
})
}

public today:any = new Date();

{{today|date:'yyyy-mm-dd HH:mm:ss'}}

<input type="text" (keydown)="keyDown()"/>

keyDown(){
	console.log('keydown');
}

keyDown(e){
	if(e.keycode==13){
		console.log('按了一下回车');
	}else{
		console.log(e.target.value);
	}
}

let down:any=event.target
MVVM 双向数据绑定----->表单
引入FormModule

<input type='text' [(ngModule)]='keywords'/>{{keywords}}
public keywords:string;

功能样式 styles.scss

获取表单数据：JQuery DOM操作

let usernameDom:any = document.getElementById('username');//不推荐

双向数据绑定
引入表单相关模块，才能进行双向数据绑定

import {FormsModule}  from '@angular/forms';

public  peopleInfo:any={
	username:'Tom',
	sex:'男',
	cityList:["北京","上海","广州"],
	city:"北京",
	hobby:[{title:'吃饭',check:false},
			{title:'睡觉',check:false},
			{title:'敲代码',chesk:false}],
	mark:'备注'
}

<ul>
	<li>姓名：<input type="text" id="username" [(ngModule)]="name"/></li>
</ul>

管道

<pre>{{peopleInfo.username | jspn}} </pre>

<li>性别
	<input type='radio' value='1' name='sex'><lable for='sex1'>男</lable>
	<input type='radio' value='2' name='sex'><lable for='sex2'>女</lable>
</li>

<li>城市：
	<select name='city' id='city' [(ngModule)]='peopleInfo.city'>
	<option [value]="item" *ngFor = "let item of peopleInfo.cityList">{{item}}</option>
</select>

span行内元素

<li>爱好：
	<span *ngFor="let item of peopleInfo.hobby";let key=index>
		<input type="checkbox" [id]="check"+key />
		<lable [for]="check"+key [(ngModule)]="item.check">{{item.title}}</lable>
	</span>
</li>

备注:<textarea name="mark" id="mark" cols="30" rows="10" [(ngModule)]="people.mark"></textarea>
<button (click)="doSubmit()" class="submit">获取表单内容</button>

Rxjs异步编程

国际化
assets->i18n->zh-CN.json

{
	''login":{
		"username":"小米",
		"age":6,
		"address":"上海"
	}
}

HTML里用到

<lable>{{"login.username"|translate}}</lable>
<lable>{{"login.age"|translate}}</lable>
<lable>{{"login.address"|translate}}</lable>

RXJS异步数据流的编程

目前常见的异步编程的几种方法
1.回调函数
2.事件监听/发布订阅
3.promise
4.Rxjs

import {observable} from 'rxjs'
getRxjsData(){
	return new Observable((observer)=>{
		setTimeout(()=>{
			var username="小明--Rxjs";
			observer.next(username);
		},2000);
	})
}

获取数据

var rxjsData = this.request.getRxjsData()
rxjsData.subscribe((data)=>{
	console.log(data);
})

Rxjs可以中途撤回，可以发射多值，可以提供多种工具函数

import {observable} from 'rxjs'
getRxjsData(){
	return new Promise((resole)=>{
		setTimeout(()=>{
			var username="小明--Rxjs";
			resole.next(username);
		},2000);
	})
}

获取数据

var rxjsData = this.request.getRxjsData()
var d = rxjsData.subscribe((data)=>{
	console.log(data);
})

取消订阅

setTimeout(()=>{
	d.unsubscribe();
},1000)

多次执行

getRxjsIntervalData(){
	let count = 0;
	return new observable<any>((observer)=>{
		setInterval(()=>{
			count++;
			var username="小明“+count；
			observer.next(username);
		},3000);
	})
}

调用

var s = this.request.getRxjsIntervalData();
s.subscribe((data)=>{
	console.log(data);
})

工具函数 map filter

import { map.filter } from 'rxjs/operators';

用工具方法对返回的数据进行处理

var s = this.request.getRxjsintervalData();
s.pipe(
	filter((value)=>{
		if(value%2==0){
		return true;
		}
	}
)

map

var s = this.request.getRxjs();
s.pipe(
	map((value)=>{
	return value*value
	}
)
.subscribe((data)=>{
	console.log(data);
})

Angular中get,post和服务器交互作用使用HttpClientModule
1.在app.module.ts引入

imports:[ HttpClientModule ]

2.用到的地方引入HttpClient并在构造函数声明

import { HttpClient } form "angular/common/http";
constructor(public http:HttpClient){}

3.get请求数据 Rxjs获取异步请求的数据

var api = "URL地址”；
this.http.get(api).subscribe(response=>{
	console.log(response);
	});

post请求

const httpOptions = {
	headers:new HttpHeaders({'centent_type':'application/json});
	var api = 'URL地址’;
	this.http.post(api,{username='小明',age:20}
	httpoptions).subscribe(response=>{
		console.log(response);
	});
}

Angular Jsonp请求数据
在app.module.ts中，引入HttpClientModule，HttpClientJsonModule并注入

import { HttpClientModule, HttpClientJsonModule } from '@angular/common/http';
import:[BrowserModule,
		HttpClientModule, 
		HttpClientJsonModule ]
let api=" ";
this.http.Jsonp(api,'callback').subscribe((s)=>{
	console.log(" ");
}

Jsonp请求，服务器必须支持axios请求数据

Angular中使用第三方模块axios请求数据
1.安装axioscnpm install axios --save
2.用到的地方引入axiosimport axios from 'axios';
3.看文档使用

路由就是根据不同的URL地址动态的让根组件挂载其他组件来实现一个单页面应用

1.创建有路由的项目
2.有组件
3.在根模块引入并注入
4.在路由的模块中引入组件，在routes中配置路由

动态路由
get传值
1.跳转

<li *ngFor="let item of list;let key=index;">
	<a [routerLink]="['/newscontent']" [queryparams]="{aid:key}">
		{{key}}-----{{item}}
	</a>
</li>

2.接收

import { ActivateRoute } from '@angular/router';
constructor(public router:Activated Route){}
this.route.queryparamas.subscribe((data))=>{
	console.log(data);
})

动态路由
1.配置动态路由

{ path:'newscontent/:aid',component:NewsContentComponent}

2.跳转

<ul>
	<li *ngFor='let item of list;let key=index;'>
		<a [routerLink]="['/newscontent/'key]">{{key}}----{{item}}</a>
	</li>
</ul>

3.接收

import {ActivatedRouter} from '@angular/route';
constructor(public route:ActivatedRouter){}
this.route.params.subscribe((data)=>{
	console.log(data);
})

JS跳转路由
1.动态路由
1.引入声明模块

import {router}form '@angular/router';
constructor(public router:Router){}

2.跳转

this.router.navigate(['/home']);//1
this.router.navigate(['/newscontent/','1234']);//2

get传值
1.动态路由
1.引入声明模块

import {router}form '@angular/router';
constructor(public router:Router){}

2.跳转

this.router.navigate(['/news']){
	queryParams;{
		aid:123
}});

Angular路由的嵌套 父子路由

Angular中内置模块以及自定义模块
当组件较少时，可直接放置在根模块，当组件过多时，应用加载慢 其他模块要把另外模块使用的暴露出去,根模块引入子模块

Angular自定义模块以及配置路由实现模块懒加载
ng g module module/user
ng g module module/user --routing //会添加路由，推荐
配置路由—>自定义模块

const routes:routes=[
{payh:'加载当前自定义模块',component:UserComponent}];

<a [routeLink]="['/user']">用户定义</a>

app app-routing-module.ts

路由懒加载

const routes:routes=[
	{path:'user';,loadChildren:'./module/user/user,module #userModule'}
];

一个组件封装成一个模块，主要用来实现懒加载

const routes:routes=[
	{path:'',component:productComponent,
	children:[{path:'cart',component:CartComponent};
		{path:'pcontent',component:PcontentComponent}]
		},{path:'plist',component:plistComponent}
];

用到的界面

<router-outlet></router-outlet>