angular 自学笔记
1、 安装node.js node –version 查看版本
2、 查看node已安装列表 npm list –depth=0 –global 找到npm安装的位置 加入环境变量
3、 安装angular Cli
npm install –g @angular/cli
cnpm i –g angular-cli
安装成功后可进行查看 ng-v
4、 使用angular Cli创建项目
ng new hello
5、安装 npm install
6、启动 (进入目录文件) 默认启动 localhost:4200
ng serve
开始使用angular
1、 创建组件
ng generate component / ng g c 组建名
2. 子向父传值
子:html:
<button id="123" (click)='dian($event)'>
hailong works!
</button>
ts:
import { Component, EventEmitter, Output } from '@angular/core';
export class HailongComponent {
@Output() vio = new EventEmitter;
dian(evt:any) {
let ew = evt.currentTarget.id;
this.vio.emit(ew)
}
}
父:html
<app-hailong (vio)='father($event)'></app-hailong>
ts:
export class AppComponent {
father(evt:any){
alert(evt)
}
}
3.父向子。
。。。。。。
4. 数据绑定:
a、属性绑定:
html:<input type="text" [value]="wang">
ts: export class HailongComponent {
private wang="hailong"}
b、事件绑定:
(常见的(click)=”dianji” ts:中调用方法)
c、css类绑定 :
html:<div [class.bd]='isbd'>border</div>
css: .bd{border: 1px solidred;width: 200px;height: 200px;}
ts: private isbd=true
d、css样式绑定 (css,ts,同上使用):
html: <button [style.color]='isbd?"red":"green"' >
e、双向绑定:
html:<input type="text" [(ngModel)]='vv'>{{vv}}
ts:private vv=''
注意:要应用模块 import {FormsModule} from '@angular/forms'
5、结构性指令:
a、ngIf:
html:<div *ngIf=”bool”>hello,If</div> (bool=true时显示,boll=flase时隐藏)
b、ngFor循环:
html:<li *ngFor=”let item of list”></li>
c、ngSwitch:(感觉不常用)、
6、依赖注入(service)
\\\
7、dom操作(Renderer2)
html:<div id='domdiv'></div>
ts:
import { Component,ViewChild,Renderer2,Input} from '@angular/core';
constructor(private render:Renderer2){ }
ngOnInit(){
letdiv = this.render.selectRootElement('#domdiv');
//div.innerHTML='<b>button</b>';
letbtn = this.render.createElement("input");
btn.type='button';
btn.value='按钮';
btn.id='abc';
div.appendChild(btn);
this.stop= this.render.listen(btn,'click',(event) => {
this.dian(event);
});
}
dian(evt){
alert('点:'+evt.currentTarget.id);
this.stop();
}
8、动态组件
9、表单验证:
html: <form #ff="ngForm"(ngSubmit)="onSubmit(ff.value)">
用户名:<inputtype='text' name='email' ngModel/><br/>
<!--ngModel的作用:根据领域对象创建一个FormControl 实例,并把它绑定到一个表单控件元素上。-->
密码:<inputtype='text' name='pwd' ngModel/><br/>
<input type='submit' value='提交'/>
</form>
ts:onSubmit(formValue){
console.log(formValue);
console.log(formValue.email);
}
10、http访问:
1、在app.module.ts中导入 import {HttpModule}from "@angular/http"; 注入HttpModule
2、在app .component.ts中导入 import{Http} from '@angular/http'; 注入constructor(private http: Http)
方法: export class TestComponent{
constructor(private http: Http) {
alert(http);
}
dian(event:any){
//alert(event.target.value);
//alert(this.http);
let url = 'http://localhost:3000/api/string';
this.http.get(url).subscribe(function (data) {
console.log(data['_body']);
});
//post请求
this.http.post(url, param).subscribe(function (data) {
console.log(data)
});
}
}
3、使用代理
一.根目录(与src同级)下创建:proxy.conf.json
{
"/api": {
"target":"http://localhost:3000",
"secure":false,
"pathRewrite":{
"^/api":""
}
}
}
二.改写package.json
修改启动命令,默认使用npm start时使用代理文件配置的代理
"start":"ng serve --proxy-config proxy.conf.json",
三.重启
必须用npm start启动
四.访问:
let url ='api/string';
11、路由
1、安装:npm i --save@angular/router
2、在app.module.ts文件中导入需要的路由模块,记得把路由的组件也要导入进来。
import { RouterModule,Routes } from '@angular/router';
import { HailongComponent} from './hailong/hailong.component';
import { ChenyingComponent} from './chenying/chenying.component';
const appRoutes: Routes =[
{ path: 'hl', component: HailongComponent },
{ path: 'cy', component: ChenyingComponent },
];
imports: [
RouterModule.forRoot(
appRoutes
)
],
3、在app.component.html中添加: <router-outlet></router-outlet>
4.链接:<a routerLink="/hl">hl</a> <a routerLink="/cy">cy</a>
12、路由分离:
1、app文件夹下 创建app-routing.module.ts
2、app-routing.module.ts中
import { NgModule } from '@angular/core';
import {D1Component} from './dynamic/d1.component';
import {D2Component} from './dynamic/d2.component';
import { RouterModule ,Routes } from '@angular/router';
const appRoutes: Routes = [
{ path: 'd1', component:D1Component},
{ path: 'd2', component:D2Component}
];
@NgModule({
declarations: [
D1Component,
D2Component
],
imports:[ RouterModule.forRoot(appRoutes)],//路由配置
exports:[RouterModule] //一定要记得这个导出,不然会报错,
})
export class AppRoutingModule{}
3、//把app.module.ts文件中的路由部分删除,添加app-routing.module.ts模块
import { AppRoutingModule} from './app-routing.module';
@NgModule({imports:[AppRoutngModule]})
13、路由参数:
const appRoutes: Routes = [
{ path: 'd1/:id', component: D1Component},
{ path: 'd2/:id/:name', component: D2Component},
{ path: 'd3', component:D3Component},
{ path: 'd4', component:D4Component,data:[{name:"aa"}]}
];
html:
<a [routerLink] = "['/d1',1]">d1</a>
<a[routerLink]="['/d2',2,aaa]">d2</a>
<a [routerLink] ="['/d3']" [queryParams]= "{id:3,name:'abc'}">d3</a>
<a routerLink="/d4">d4</a>
接参:
d1:(快照)
import{ActivatedRoute}from '@angular/router';
constructor(privaterouteInfo:ActivatedRoute){}
private id;
ngOnInit(){
this.id =this.routeInfo.snapshot.params["id"];
console.log(this.id);
};
d2:(订阅)
constructor(privaterouteInfo:ActivatedRoute){}
private id;
ngOnInit(){
this.routeInfo.params.subscribe(res=>{ //把res封装成对象了
this.id = res["id"];
});
console.log(this.id);
};
d3:(queryParams传参)
constructor(privaterouteInfo:ActivatedRoute){}
ngOnInit(){
let id =this.routeInfo.snapshot.queryParams["id"];
console.log(id);
};
d4:(路由上固定参数)
constructor(privaterouteInfo:ActivatedRoute){}
ngOnInit(){
let n = this.routeInfo.snapshot.data[0]['name'];
console.log(n);
};
14、路由跳转:
<button (click)="changeRoot()">跳转1</button>
import{ActivatedRoute,Router} from '@angular/router';
constructor(private router:Router) {}
changeRoot(){
this.router.navigate(['/d1',2]); //前两种传参方式的跳转
this.router.navigate(['/d3'],{queryParams: {id:3,name:'abc'}}); //第三种方式跳转
}
15、辅助路由
在HTML : <router-outlet></router-outlet> //主路由
<router-outlet name="aux"></router-outlet> //辅助路由
配置:{ path:'d2', component: D2Component ,outlet:"aux"}
<a [routerLink]="[{outlets: { aux: ['d2'] } }]" >d2</a><br/>
16、子路由
子路由是相对路由
d1.component.ts中
@Component({
//selector:"exe-alert",
template: `<a[routerLink]="['./d2']"[queryParams]= "{id:2}">d2</a><br/>
组件1,<div>aaaaaaaaaaaaaa</div>
<router-outlet></router-outlet>`,
})
路由配置部分:
const routes: Routes = [
{ path: 'd1', component: D1Component ,children:[
{ path:'d2', component: D2Component ,data:[{'name':'d2'}]}
]},
]
//第一种是通过标签跳转这里是./(相对路径)不是/(绝对路径)
<a [routerLink] ="['./homeDetail',10]">haha</a>
//第二种是点击按钮通过Router路由子界面
import {Router,ActivatedRoute } from "@angular/router";
constructor(privaterouter: Router,private routeInfo:ActivatedRoute){}
nav():void {
this.router.navigate(['homeDetail',100],{relativeTo:this.routeInfo});
}
17、内置管道:
1.大小写转换
<p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR-->
<p>{{ 'Angular' | lowercase }}</p><!-- Output: angular -->
2.字符串拆分(多个参数):
<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem-->
3.数值格式化
<! --number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1 ,最少小数位数默认为0 , 最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时,会自动补0
当小数位数多于规定的{最多小数位数}时,会四舍五入 -->
<p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output:3.1416 -->
4.日期格式化
<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
public today = new Date(); //页面上会显示现在的时间是2017年05月08日10时57分53秒
5.JavaScript 对象序列化
<p>{{ { name: 'semlinker'} | json }}</p> <!-- Output: { "name": "semlinker"} -->
6、货币管道
currency管道用来将数字转换为货币格式
<p>{{8.2515|currency:'USD':false}}</p>
{{8.2515 | currency:'¥'}}
<p>{{156.548 |currency:'USD':true:'4.2-2'}}</p>
USD美元
CNY人民币
EUR欧元
页面上将显示
USD8.25
0156.55这里的′USD′是美元UnitedStatesdollar的缩写,当为false时不显示0156.55这里的′USD′是美元UnitedStatesdollar的缩写,当为false时不显示$符,当为true时,则显示$符。后面的规定小数位数的参数和上面介绍的一样。
7.管道链
我们可以将多个管道连接在一起,组成管道链对数据进行处理。
<p>{{ 'semlinker' | slice:0:3 |uppercase }}</p> <!-- Output: SEM -->
18、自定义管道
1.app.component.ts中
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({ name: 'welcome' })
export class WelcomePipeimplements PipeTransform {
transform(value:string) {
if(!value) return value;
if(typeof value !=='string') {
throw new Error('Invalidpipe argument for WelcomePipe');
}
return "Welcome to" + value;
}
}
@Pipe({name: 'repeat'})
export class RepeatPipeimplements PipeTransform {
transform(value: any,times: number) {
returnvalue.repeat(times);
}
}
2.app.module.ts中
import {AppComponent,WelcomePipe,,RepeatPipe } from './app.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
WelcomePipe,
RepeatPipe
],
3.使用,app.component.html中
<p>{{ 'semlinker' |welcome }}</p>
<p>{{ 'lo' | repeat:3}}</p>
19、打包部署:
1.项目根目录下dos窗口下:
ng build --prod –aot
生成dist文件夹