【angular教程240112】09(完) Angular中的數據請求 與 路由

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

一、 Angular 請求數據簡介

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

0 使用Angular內置模塊HttpClientModule和HttpClientJsonpModule:

這些模塊是Angular提供的，用于在應用中進行HTTP通信。需要在的Angular模塊中導入它，才能在服務或組件中使用HttpClient。

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

1 Angular中的GET請求:

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

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請求:

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

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

3 Angular中的JSONP請求:

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

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

4使用Axios進行數據請求:

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

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 請求數據

在Angular中進行數據請求前，需要理解HttpClientModule。這是一個Angular模塊，用于提供發(fā)送HTTP請求的方法。首先，需要在的應用模塊中導入它。

1 導入HttpClientModule:

打開的Angular項目中的app.module.ts文件，然后添加以下內容：

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進行GET請求:

打開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';data: any;constructor(private http: HttpClient) {}ngOnInit() {this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(data => {this.data = data;});}
}

這段代碼在組件初始化時發(fā)送GET請求到一個測試API，并將響應數據存儲在data屬性中。

3 展示數據: 修改app.component.html文件

添加以下內容以展示數據：

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

這將在頁面上顯示從API請求獲得的數據。

4 子組件 app-news
展示

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

請求

 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() {//服務器必須允許跨域// 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 請求數據

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

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

理解POST請求:
POST請求用于將數據發(fā)送到服務器，例如，當提交一個表單時。
在Angular中，可以使用HttpClient的post方法來執(zhí)行POST請求。
實現(xiàn)POST請求:
首先，確保已經按照之前的指導在的Angular項目中導入了HttpClientModule并注入了HttpClient。
接下來，將使用HttpClient的post方法來發(fā)送一個請求。
示例代碼:
假設想要向一個URL發(fā)送一些數據，如下所示是在Angular組件中實現(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端點const data = { name: 'John', age: 30 }; // 這里是想發(fā)送的數據this.http.post(url, data).subscribe(response => {console.log(response);// 這里處理響應數據}, error => {console.error(error);// 這里處理錯誤情況});}
}

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

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

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

四. get傳值&動態(tài)路由(routerLink進行傳參跳轉)

1.1 get傳值

1.1.1 get傳值

在一個組件的html文件傳遞數據

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

1.1.2 接收

在另外一個組件的ts文件接收數據

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

1.2 動態(tài)路由

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

app-routing.module.ts

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

1.2.2 跳轉

在一個組件的html文件傳遞數據

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

1.2.3 接收

在另外一個組件的ts文件接收數據

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

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

二、Angular 配置路由、 默認路由
三、Angular  routerLink跳轉頁面      
四、Angular routerLinkActive設置routerLink默認選中路由    

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

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

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

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

ng new my-angular-app --routing

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

2路由模塊分析:

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

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配置路由及默認路由

1配置路由:

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

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

2默認路由:

默認路由是當沒有任何其他路由匹配時應用的路由。通常，會設置一個指向首頁或者404頁面的默認路由。

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

三、Angular routerLink跳轉頁面

routerLink是Angular的一個指令，用于在應用內部進行導航。例如，在的組件模板中：

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

四、Angular routerLinkActive設置默認選中路由

routerLinkActive是一個指令，用于自動為活動的路由鏈接添加CSS類。

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

在這個例子中，當路由激活時，相應的鏈接將具有active類?？梢栽贑SS中定義.active樣式，以指示哪個鏈接是當前激活的。

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

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

一、Angular中get傳值 以及獲取get傳值
二、Angular 中動態(tài)路由 以及獲取動態(tài)路由的值
三、Angular 動態(tài)路由 js跳轉路由
四、Angular get傳值 js跳轉路由

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

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

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

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

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

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

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

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

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

三、Angular動態(tài)路由JavaScript跳轉路由

要通過JavaScript代碼跳轉路由，可以使用Angular的Router服務。

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

這個方法將會導航到像/product/123這樣的動態(tài)路由。

四、Angular GET傳值JavaScript跳轉路由

通過JavaScript代碼進行帶有GET參數的路由跳轉也是可能的。

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

這將會導航到帶有查詢參數的路由，例如/product?id=123。

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

七 Angular路由的嵌套 父子路由

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

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

一、Angular路由的嵌套的用途

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

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

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

1 配置父路由:

嵌套路由的配置開始于定義一個父路由。父路由通常會有一個path和一個component，還有一個children數組定義子路由。

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

2 定義子路由:

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

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

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

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

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