学习-angular 7入门

1、安装脚手架：npm install -g @angular/cli

安装之后，输入命令 ng v：
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.3
@angular-devkit/core         7.3.3
@angular-devkit/schematics   7.3.3
@schematics/angular          7.3.3
@schematics/update           0.13.3
rxjs                         6.3.3
typescript                   3.2.4

2、创建angular项目，命令格式：ng new 项目名称
选择是否需要路由，以及css等.
可以使用ng new 项目名称 --skip-install，会跳过安装项目依赖的过程

3、启动项目：ng serve --open

4、创建组件：ng g component components/组件名称
表示在components文件下创建一个组件

5、声名属性

  /*
    修饰符---合java基本一样
    public 默认、protected、private
  */
  public title = "这是一个title属性,lalalaaaa";

  mas = "这是一条数据msg";//默认public

  username:string = "张三";//声名属性类型

  student:any = "学生";//任意类型

  userinfo:any = {//对象
    username:"李四",
    age:18,
    sex:"男"
  }
  //集合
  list:any[] = ["111", "222", "333"]；
  items:Array<number> = [111, 222, 333]

6、标签属性绑定值

//使用[ ]
<div [title]="title">学生</div>

7、模板中绑定html

content= "<h3>这是一个html标签---h3</h3>";

<div >{{content}}</div>//原样输出
<div [innerHTML]="content"></div>//会解析html在输出

8、条件判断

<div *ngIf="flag == true">
  <img src="assets/images/t1.jpg" alt="" width="100" height="80">
</div>

<li *ngFor="let item of numlist; let key=index;">
      <span [ngSwitch] = "key">
        <p *ngSwitchCase = 0 > {{key}}--{{item}} </p>
        <p *ngSwitchCase = 1 > {{key}}--{{item}} </p>
        <p *ngSwitchDefault> {{key}}--{{item}} </p>
      </span>
</li>

9、click点击事件, keydown/keyup键盘事件

<button (click)="click()">点击</button>

click() {
    alert("点击了");
  }

<button (keydown)="keydown($event)">点击</button>

keydown(e) {
    if(e.keyCode = 13){
       console.log("敲击了键盘回车键")
    }
  }

10、数据的双向绑定, 需要导入FormsModule

<input type="text" [(ngModel)]="val">
<p>输入的内容：{{val}}</p>

11、服务创建：ng g service 目录/服务名称；
如需使用该服务还需要在根模块中引入并配置，在具体的模块中使用该服务也需要引入。

//引入服务
import {RequestService} from '../../services/request.service';
//声名服务
constructor(public request:RequestService) { }
//使用服务
let data = this.request.getData();

12、回调函数、promise、以及rejs获取异步方法里面的数据

回调：
getCallBack(cb){
    setTimeout(() => {
      var username = "张三"; 
      //return username; 外部无法接收
      cb(username);
    }, 3000);
  }

promise：
  getPromiseData (){
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        var username = "李四"; 
        resolve(username);
      }, 3000);
    });
  }

Rxjs：
getRxjsData (){
    return new Observable(observable => {
      setTimeout(() => {
        var username = "王五"; 
        observable.next(username);
      }, 3000);
    });
  }

调用：
this.request.getCallBack(callBackData => {
      console.log(callBackData);
});

this.request.getPromiseData().then(promiseData => {
      console.log(promiseData);
});

this.request.getRxjsData().subscribe(rxjsDate => {
      console.log(rxjsDate);
})

13、angular中get和post请求以及jsonp请求

getData(){
    let api = 'http://a.itying.com/api/productlist'
    this.http.get(api).subscribe((response:any) => {
      console.log(response);
      this.list = response.result;
    });
}

postData() {
    const httpOptions = {headers: new HttpHeaders({'Content-type': 'application/json'})}
    let api = 'http://127.0.0.1:3000/login';
    this.http.post(api, {'useename':'张三', 'age':20, 'sex':'man'}, httpOptions)
    .subscribe((res:any) => {
      console.log(res);
    });
}

//需要注入HttpClientJsonpModule
//使用jonp获取服务器数据，跨域的一种解决方案,服务器必须支持jsonp
jsonpData(){
    let api = 'http://a.itying.com/api/productlist'
    this.http.jsonp(api, 'callback').subscribe((response:any) => {
      console.log(response);
    });
}

14、路由的使用，app-routinh.module.ts中定义

//根模块需要导入路由
//路由模块需要导入已经创建的组件
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'todoList', component: TodoListComponent},
  //默认挂载的组件
  {path: '**', redirectTo: 'home'}
];

页面路由跳转1：
//跳转到newscontent页面，并且把index传过去 
<li *ngFor="let item of list; let key = index">
    <a [routerLink]="[ '/newscontent' ]" [queryParams]="{index:key}" >{{key}}---{{item}}</a>
</li>
//跳转后对应的url：http://localhost:4200/newscontent?index=4

//获取路由传值
//如果要获取传递过去的参数，要引入ActivatedRoute
import { ActivatedRoute } from '@angular/router';
constructor(public activeRoute:ActivatedRoute) { }//声名ActivatedRoute
ngOnInit() {
    //获取路由传递过来的值
    this.activeRoute.queryParams.subscribe(data => {
      if(data.index){
        console.log('路由传值index : ' + data.index);
      }
    });
}

//页面路由跳转2：动态路由
//配置：
const routes: Routes = [
  {path: 'newscontent/:index', component: NewscontentComponent},
  //默认挂载的组件
  {path: '**', redirectTo: 'home'}
];

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

//获取动态路由传值,同样需要引入ActivatedRoute
this.activeRoute.params.subscribe(date => {
      console.log(date);
});

//js动态路由跳转

猜你喜欢