【angular教程240112】09(完) Angular中的數(shù)據(jù)請(qǐng)求 與 路由

Angular中的數(shù)據(jù)請(qǐng)求 內(nèi)置模塊HttpClient實(shí)現(xiàn)（get post jsonp 以及第三方模板axios請(qǐng)求數(shù)據(jù)
一、 Angular get 請(qǐng)求數(shù)據(jù)
二、 Angular post提交數(shù)據(jù)
三、 Angular Jsonp請(qǐng)求數(shù)據(jù)
四、 Angular中使用第三方模塊axios請(qǐng)求數(shù)據(jù)
五、Angular內(nèi)置模塊HttpClientModule HttpClientJsonpModule 的使用

一、 Angular 請(qǐng)求數(shù)據(jù)簡介

當(dāng)然，了解如何在Angular中使用不同的方法來請(qǐng)求數(shù)據(jù)。首先，需要了解Angular中的HttpClient模塊，它是用于發(fā)送網(wǎng)絡(luò)請(qǐng)求的主要方式。然后，將展示如何使用axios，這是一個(gè)流行的第三方庫，用于發(fā)送HTTP請(qǐng)求。

0 使用Angular內(nèi)置模塊HttpClientModule和HttpClientJsonpModule:

這些模塊是Angular提供的，用于在應(yīng)用中進(jìn)行HTTP通信。需要在的Angular模塊中導(dǎo)入它，才能在服務(wù)或組件中使用HttpClient。

import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';@NgModule({imports: [HttpClientModule,HttpClientJsonpModule// other imports],// declarations and bootstrap
})
export class AppModule { }

1 Angular中的GET請(qǐng)求:

在Angular中，可以使用HttpClient模塊來執(zhí)行GET請(qǐng)求。這通常用于從服務(wù)器檢索數(shù)據(jù)。

import { HttpClient } from '@angular/common/http';constructor(private http: HttpClient) {}getData() {this.http.get('YOUR_API_URL').subscribe(data => {console.log(data);});
}

2 Angular中的POST請(qǐng)求:

POST請(qǐng)求通常用于向服務(wù)器發(fā)送數(shù)據(jù)。在Angular中，可以這樣做：

postData() {this.http.post('YOUR_API_URL', {yourDataObject}).subscribe(data => {console.log(data);});
}

3 Angular中的JSONP請(qǐng)求:

JSONP用于跨域請(qǐng)求。在Angular中，可以使用HttpClientJsonpModule和HttpClient來發(fā)送JSONP請(qǐng)求。

jsonpRequest() {this.http.jsonp('YOUR_JSONP_API_URL', 'callback').subscribe(data => {console.log(data);});
}

4使用Axios進(jìn)行數(shù)據(jù)請(qǐng)求:

axios是一個(gè)第三方庫，可以在Angular項(xiàng)目中使用它來發(fā)送HTTP請(qǐng)求。

import axios from 'axios';axiosGet() {axios.get('YOUR_API_URL').then(response => {console.log(response.data);});
}axiosPost() {axios.post('YOUR_API_URL', {yourDataObject}).then(response => {console.log(response.data);});
}

二、 詳解 Angular get 請(qǐng)求數(shù)據(jù)

在Angular中進(jìn)行數(shù)據(jù)請(qǐng)求前，需要理解HttpClientModule。這是一個(gè)Angular模塊，用于提供發(fā)送HTTP請(qǐng)求的方法。首先，需要在的應(yīng)用模塊中導(dǎo)入它。

1 導(dǎo)入HttpClientModule:

打開的Angular項(xiàng)目中的app.module.ts文件，然后添加以下內(nèi)容：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // 添加這行
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,HttpClientModule // 添加這行],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

2 使用HttpClient進(jìn)行GET請(qǐng)求:

打開app.component.ts文件，添加以下內(nèi)容：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'my-angular-app';data: any;constructor(private http: HttpClient) {}ngOnInit() {this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(data => {this.data = data;});}
}

這段代碼在組件初始化時(shí)發(fā)送GET請(qǐng)求到一個(gè)測(cè)試API，并將響應(yīng)數(shù)據(jù)存儲(chǔ)在data屬性中。

3 展示數(shù)據(jù): 修改app.component.html文件

添加以下內(nèi)容以展示數(shù)據(jù)：

<div><h1>Welcome to {{ title }}!</h1><pre>{{ data | json }}</pre>
</div>

這將在頁面上顯示從API請(qǐng)求獲得的數(shù)據(jù)。

4 子組件 app-news
展示

<button  (click)="getData()">get請(qǐng)求數(shù)據(jù)</button>
<ol><li  *ngFor="let item of list">- {{item.title}}</li>
</ol>

請(qǐng)求

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss'],
})
export class NewsComponent implements OnInit {constructor(public http: HttpClient) {}ngOnInit(): void {}public list: any[] = [];getData() {//服務(wù)器必須允許跨域// let api = 'https://jsonplaceholder.typicode.com/posts';let api = 'http://a.itying.com/api/productlist';this.http.get(api).subscribe((response: any) => {console.log(response);this.list = response.result;});}

}

三、 詳解 Angular post 請(qǐng)求數(shù)據(jù)

介紹了如何設(shè)置Angular項(xiàng)目和使用HttpClient模塊進(jìn)行GET請(qǐng)求?，F(xiàn)在，看看如何使用這個(gè)模塊來執(zhí)行POST請(qǐng)求。

Angular中的POST請(qǐng)求
POST請(qǐng)求通常用于將數(shù)據(jù)發(fā)送到服務(wù)器。例如，可能想要提交表單數(shù)據(jù)或發(fā)送JSON對(duì)象到后端API。

理解POST請(qǐng)求:
POST請(qǐng)求用于將數(shù)據(jù)發(fā)送到服務(wù)器，例如，當(dāng)提交一個(gè)表單時(shí)。
在Angular中，可以使用HttpClient的post方法來執(zhí)行POST請(qǐng)求。
實(shí)現(xiàn)POST請(qǐng)求:
首先，確保已經(jīng)按照之前的指導(dǎo)在的Angular項(xiàng)目中導(dǎo)入了HttpClientModule并注入了HttpClient。
接下來，將使用HttpClient的post方法來發(fā)送一個(gè)請(qǐng)求。
示例代碼:
假設(shè)想要向一個(gè)URL發(fā)送一些數(shù)據(jù)，如下所示是在Angular組件中實(shí)現(xiàn)的示例代碼。

1 修改app.component.ts文件：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'my-angular-app';constructor(private http: HttpClient) {}postData() {const url = 'YOUR_API_ENDPOINT'; // 替換為的API端點(diǎn)const data = { name: 'John', age: 30 }; // 這里是想發(fā)送的數(shù)據(jù)this.http.post(url, data).subscribe(response => {console.log(response);// 這里處理響應(yīng)數(shù)據(jù)}, error => {console.error(error);// 這里處理錯(cuò)誤情況});}
}

2 修改app.component.html文件，添加一個(gè)按鈕來觸發(fā)POST請(qǐng)求：

<div><h1>Welcome to {{ title }}!</h1><button (click)="postData()">Send POST Request</button>
</div>

注意事項(xiàng):
確保使用的URL和數(shù)據(jù)格式與的后端API兼容。
subscribe方法用于處理異步響應(yīng)。第一個(gè)函數(shù)處理成功的響應(yīng)，第二個(gè)函數(shù)處理錯(cuò)誤。
測(cè)試:
運(yùn)行的Angular應(yīng)用并點(diǎn)擊按鈕，的應(yīng)用會(huì)向指定的URL發(fā)送POST請(qǐng)求。
可以在瀏覽器的開發(fā)者工具中查看網(wǎng)絡(luò)活動(dòng)，以確認(rèn)請(qǐng)求是否成功發(fā)送。
通過這個(gè)例子，應(yīng)該能夠開始在Angular中使用POST請(qǐng)求了。當(dāng)熟悉了基礎(chǔ)概念之后，可以開始探索更復(fù)雜的用例，例如發(fā)送表單數(shù)據(jù)、處理不同類型的響應(yīng)等。

四. get傳值&動(dòng)態(tài)路由(routerLink進(jìn)行傳參跳轉(zhuǎn))

1.1 get傳值

1.1.1 get傳值

在一個(gè)組件的html文件傳遞數(shù)據(jù)

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

1.1.2 接收

在另外一個(gè)組件的ts文件接收數(shù)據(jù)

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

1.2 動(dòng)態(tài)路由

1.2.1 配置動(dòng)態(tài)路由

app-routing.module.ts

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

1.2.2 跳轉(zhuǎn)

在一個(gè)組件的html文件傳遞數(shù)據(jù)

        <ul><li *ngFor="let item of list;let key=index;"><!--  key 就是待會(huì)傳遞的數(shù)據(jù) 他的名稱是aid --><a [routerLink]="[ '/newscontent/', key ]">{{key}}---{{item}}</a></li></ul>

1.2.3 接收

在另外一個(gè)組件的ts文件接收數(shù)據(jù)

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

五 Angular中的路由 路由概述 配置路由 路由重定向 路由選中 默認(rèn)路由 一、Angular創(chuàng)建一個(gè)默認(rèn)帶路由的項(xiàng)目、路由模塊分析

二、Angular 配置路由、 默認(rèn)路由
三、Angular  routerLink跳轉(zhuǎn)頁面      
四、Angular routerLinkActive設(shè)置routerLink默認(rèn)選中路由    

在Angular中，路由是一種導(dǎo)航方法，它允許用戶在不同的視圖之間導(dǎo)航。這是一個(gè)單頁應(yīng)用（SPA）的核心特性。將逐步介紹如何在Angular中設(shè)置和使用路由。

一、Angular創(chuàng)建帶路由的項(xiàng)目及路由模塊分析

1創(chuàng)建帶路由的Angular項(xiàng)目:

當(dāng)使用Angular CLI創(chuàng)建新項(xiàng)目時(shí)，可以選擇包含路由功能。使用以下命令創(chuàng)建新項(xiàng)目并包含路由支持：

ng new my-angular-app --routing

這將創(chuàng)建一個(gè)新的Angular項(xiàng)目my-angular-app，并在其中包含路由功能。

2路由模塊分析:

在創(chuàng)建的項(xiàng)目中，會(huì)發(fā)現(xiàn)app-routing.module.ts文件。這是Angular中的路由模塊，用于配置和管理路由?；窘Y(jié)構(gòu)如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';const routes: Routes = [// 這里配置路由
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

二、Angular配置路由及默認(rèn)路由

1配置路由:

在app-routing.module.ts文件中，可以定義路由數(shù)組。每個(gè)路由都是一個(gè)對(duì)象，至少包含兩個(gè)屬性：path和component。

const routes: Routes = [{ path: 'home', component: HomeComponent },{ path: 'about', component: AboutComponent }// 其他路由...
];

2默認(rèn)路由:

默認(rèn)路由是當(dāng)沒有任何其他路由匹配時(shí)應(yīng)用的路由。通常，會(huì)設(shè)置一個(gè)指向首頁或者404頁面的默認(rèn)路由。

{ path: '', redirectTo: '/home', pathMatch: 'full' }

三、Angular routerLink跳轉(zhuǎn)頁面

routerLink是Angular的一個(gè)指令，用于在應(yīng)用內(nèi)部進(jìn)行導(dǎo)航。例如，在的組件模板中：

<nav><a routerLink="/home">Home</a><a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
<router-outlet>是放置路由內(nèi)容的占位符。

四、Angular routerLinkActive設(shè)置默認(rèn)選中路由

routerLinkActive是一個(gè)指令，用于自動(dòng)為活動(dòng)的路由鏈接添加CSS類。

<nav><a routerLink="/home" routerLinkActive="active">Home</a><a routerLink="/about" routerLinkActive="active">About</a>
</nav>

在這個(gè)例子中，當(dāng)路由激活時(shí)，相應(yīng)的鏈接將具有active類?？梢栽贑SS中定義.active樣式，以指示哪個(gè)鏈接是當(dāng)前激活的。

這些步驟概述了在Angular中設(shè)置和使用路由的基礎(chǔ)知識(shí)。實(shí)際應(yīng)用中，路由可能會(huì)更加復(fù)雜，包括嵌套路由、路由守衛(wèi)（用于權(quán)限控制）等。但這些基礎(chǔ)概念是開始使用Angular路由的基礎(chǔ)。

六、 Angular中路由傳值（get傳值、動(dòng)態(tài)路由）以及通過js跳轉(zhuǎn)路由

一、Angular中g(shù)et傳值 以及獲取get傳值
二、Angular 中動(dòng)態(tài)路由 以及獲取動(dòng)態(tài)路由的值
三、Angular 動(dòng)態(tài)路由 js跳轉(zhuǎn)路由
四、Angular get傳值 js跳轉(zhuǎn)路由

在Angular中，路由傳值是一種重要的技術(shù)，它允許在不同組件之間傳遞信息。以下是關(guān)于如何實(shí)現(xiàn)GET傳值、動(dòng)態(tài)路由傳值，以及如何通過JavaScript代碼來跳轉(zhuǎn)路由的詳細(xì)指導(dǎo)。

一、Angular中GET傳值及獲取GET傳值

GET傳值:
在Angular中，GET傳值通常是指通過查詢參數(shù)（query parameters）來傳遞值。例如，可能有一個(gè)URL類似于/product?id=123。
要在路由鏈接中添加查詢參數(shù)，可以使用[queryParams]綁定。

<a [routerLink]="['/product']" [queryParams]="{id: 123}">Product</a>

獲取GET傳值:
在目標(biāo)組件中，可以使用ActivatedRoute服務(wù)來獲取這些查詢參數(shù)。
首先，需要在的組件中注入ActivatedRoute。

import { ActivatedRoute } from '@angular/router';constructor(private route: ActivatedRoute) {}ngOnInit() {this.route.queryParams.subscribe(params => {console.log('Product ID:', params['id']);});
}

二、Angular中動(dòng)態(tài)路由及獲取動(dòng)態(tài)路由的值

動(dòng)態(tài)路由:
動(dòng)態(tài)路由是指路由路徑中包含一些動(dòng)態(tài)變化的部分，如/product/123。
在定義路由時(shí)，使用冒號(hào)（:）來指定動(dòng)態(tài)部分。

{ path: 'product/:id', component: ProductComponent }```獲取動(dòng)態(tài)路由的值:
同樣地，可以使用ActivatedRoute服務(wù)獲取動(dòng)態(tài)參數(shù)的值。
```typescriptngOnInit() {this.route.params.subscribe(params => {console.log('Product ID:', params['id']);});
}

三、Angular動(dòng)態(tài)路由JavaScript跳轉(zhuǎn)路由

要通過JavaScript代碼跳轉(zhuǎn)路由，可以使用Angular的Router服務(wù)。

import { Router } from '@angular/router';constructor(private router: Router) {}navigateToProduct(id: number) {this.router.navigate(['/product', id]);
}

這個(gè)方法將會(huì)導(dǎo)航到像/product/123這樣的動(dòng)態(tài)路由。

四、Angular GET傳值JavaScript跳轉(zhuǎn)路由

通過JavaScript代碼進(jìn)行帶有GET參數(shù)的路由跳轉(zhuǎn)也是可能的。

navigateWithQueryParams() {this.router.navigate(['/product'], { queryParams: { id: 123 } });
}

這將會(huì)導(dǎo)航到帶有查詢參數(shù)的路由，例如/product?id=123。

總結(jié)
GET傳值是使用查詢參數(shù)在路由間傳遞數(shù)據(jù)的方法。
動(dòng)態(tài)路由允許在URL的一部分中傳遞變量值。
使用Router服務(wù)可以通過JavaScript代碼進(jìn)行路由跳轉(zhuǎn)，無論是到動(dòng)態(tài)路由還是帶有查詢參數(shù)的路由。
這些概念是Angular路由的核心部分，理解和掌握它們將對(duì)構(gòu)建復(fù)雜的Angular應(yīng)用至關(guān)重要。

七 Angular路由的嵌套 父子路由

一、Angular路由的嵌套的用途
二、Angular 中配置使用嵌套路由 

在Angular中，嵌套路由（也稱為子路由）是一種強(qiáng)大的功能，它允許在應(yīng)用中創(chuàng)建更豐富的頁面層次結(jié)構(gòu)。下面將詳細(xì)介紹嵌套路由的用途和配置方法。

一、Angular路由的嵌套的用途

嵌套路由主要用于以下情況：

創(chuàng)建更復(fù)雜的UI結(jié)構(gòu):
在單頁應(yīng)用（SPA）中，不同的視圖組件可以嵌套在一起，形成多層次的用戶界面。通過使用嵌套路由，可以在父路由下組織子視圖，使結(jié)構(gòu)更加清晰。
模塊化路由管理:
對(duì)于大型應(yīng)用，嵌套路由有助于將路由邏輯分解到不同的模塊中，使代碼更加模塊化和可管理。
保持UI狀態(tài):
在某些情況下，可能希望保留父視圖的狀態(tài)（如導(dǎo)航菜單或頁眉），同時(shí)更改子視圖。嵌套路由使得這成為可能。

二、Angular中配置使用嵌套路由

1 配置父路由:

嵌套路由的配置開始于定義一個(gè)父路由。父路由通常會(huì)有一個(gè)path和一個(gè)component，還有一個(gè)children數(shù)組定義子路由。

const routes: Routes = [{path: 'parent',component: ParentComponent,children: [// 子路由在這里定義]}
];

2 定義子路由:

在children數(shù)組中，可以定義任意數(shù)量的子路由。每個(gè)子路由也有自己的path和component。

children: [{ path: 'child1', component: Child1Component },{ path: 'child2', component: Child2Component }
]

使用展示子視圖:
在父組件的模板中，使用標(biāo)簽來指定子視圖的展示位置。

<!-- ParentComponent的模板 -->
<h1>父組件</h1>
<router-outlet></router-outlet> <!-- 子視圖將在這里渲染 -->
導(dǎo)航到嵌套路由:
使用routerLink進(jìn)行導(dǎo)航時(shí)，路徑應(yīng)該相對(duì)于父路由。
html<a [routerLink]="['/parent/child1']">Child 1</a>
<a [routerLink]="['/parent/child2']">Child 2</a>

完整示例:
假設(shè)有ParentComponent、Child1Component和Child2Component，上述代碼展示了如何設(shè)置它們之間的嵌套路由。
通過嵌套路由，可以構(gòu)建更為復(fù)雜和功能豐富的應(yīng)用界面。它是Angular強(qiáng)大的路由功能之一，可以幫助有效地管理大型應(yīng)用的路由結(jié)構(gòu)。在實(shí)際應(yīng)用中測(cè)試的路由配置，才能確保按預(yù)期工作。