angular 自学笔记

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>&nbsp;&nbsp;

<a[routerLink]="['/d2',2，aaa]">d2</a>&nbsp;&nbsp;

<a [routerLink] ="['/d3']" [queryParams]= "{id:3,name:'abc'}">d3</a>&nbsp;&nbsp;

<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文件夹