【angular教程240112】09(完) Angular中的数据请求 与 路由

这篇具有很好参考价值的文章主要介绍了【angular教程240112】09(完) Angular中的数据请求 与 路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【angular教程240112】09(完) Angular中的数据请求 与 路由

Angular中的数据请求 内置模块HttpClient实现(get post jsonp 以及第三方模板axios请求数据
一、 Angular get 请求数据
二、 Angular post提交数据
三、 Angular Jsonp请求数据
四、 Angular中使用第三方模块axios请求数据
五、Angular内置模块HttpClientModule HttpClientJsonpModule 的使用

一、 Angular 请求数据简介

当然,了解如何在Angular中使用不同的方法来请求数据。首先,需要了解Angular中的HttpClient模块,它是用于发送网络请求的主要方式。然后,将展示如何使用axios,这是一个流行的第三方库,用于发送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模块来执行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请求通常用于向服务器发送数据。在Angular中,可以这样做:


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

3 Angular中的JSONP请求:

JSONP用于跨域请求。在Angular中,可以使用HttpClientJsonpModule和HttpClient来发送JSONP请求。


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

4使用Axios进行数据请求:

axios是一个第三方库,可以在Angular项目中使用它来发送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模块,用于提供发送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;
    });
  }
}

这段代码在组件初始化时发送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请求。现在,看看如何使用这个模块来执行POST请求。

Angular中的POST请求
POST请求通常用于将数据发送到服务器。例如,可能想要提交表单数据或发送JSON对象到后端API。

理解POST请求:
POST请求用于将数据发送到服务器,例如,当提交一个表单时。
在Angular中,可以使用HttpClient的post方法来执行POST请求。
实现POST请求:
首先,确保已经按照之前的指导在的Angular项目中导入了HttpClientModule并注入了HttpClient。
接下来,将使用HttpClient的post方法来发送一个请求。
示例代码:
假设想要向一个URL发送一些数据,如下所示是在Angular组件中实现的示例代码。

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 }; // 这里是想发送的数据

    this.http.post(url, data).subscribe(response => {
      console.log(response);
      // 这里处理响应数据
    }, error => {
      console.error(error);
      // 这里处理错误情况
    });
  }
}

2 修改app.component.html文件,添加一个按钮来触发POST请求:


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

注意事项:
确保使用的URL和数据格式与的后端API兼容。
subscribe方法用于处理异步响应。第一个函数处理成功的响应,第二个函数处理错误。
测试:
运行的Angular应用并点击按钮,的应用会向指定的URL发送POST请求。
可以在浏览器的开发者工具中查看网络活动,以确认请求是否成功发送。
通过这个例子,应该能够开始在Angular中使用POST请求了。当熟悉了基础概念之后,可以开始探索更复杂的用例,例如发送表单数据、处理不同类型的响应等。

四. get传值&动态路由(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 动态路由

1.2.1 配置动态路由

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创建一个默认带路由的项目、路由模块分析

二、Angular 配置路由、 默认路由
三、Angular  routerLink跳转页面      
四、Angular routerLinkActive设置routerLink默认选中路由    

在Angular中,路由是一种导航方法,它允许用户在不同的视图之间导航。这是一个单页应用(SPA)的核心特性。将逐步介绍如何在Angular中设置和使用路由。

一、Angular创建带路由的项目及路由模块分析

1创建带路由的Angular项目:

当使用Angular CLI创建新项目时,可以选择包含路由功能。使用以下命令创建新项目并包含路由支持:


ng new my-angular-app --routing

这将创建一个新的Angular项目my-angular-app,并在其中包含路由功能。

2路由模块分析:

在创建的项目中,会发现app-routing.module.ts文件。这是Angular中的路由模块,用于配置和管理路由。基本结构如下:


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类。可以在CSS中定义.active样式,以指示哪个链接是当前激活的。

这些步骤概述了在Angular中设置和使用路由的基础知识。实际应用中,路由可能会更加复杂,包括嵌套路由、路由守卫(用于权限控制)等。但这些基础概念是开始使用Angular路由的基础。

六、 Angular中路由传值(get传值、动态路由)以及通过js跳转路由

一、Angular中get传值 以及获取get传值
二、Angular 中动态路由 以及获取动态路由的值
三、Angular 动态路由 js跳转路由
四、Angular get传值 js跳转路由

在Angular中,路由传值是一种重要的技术,它允许在不同组件之间传递信息。以下是关于如何实现GET传值、动态路由传值,以及如何通过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中动态路由及获取动态路由的值

动态路由:
动态路由是指路由路径中包含一些动态变化的部分,如/product/123。
在定义路由时,使用冒号(:)来指定动态部分。


{ path: 'product/:id', component: ProductComponent }

```获取动态路由的值:
同样地,可以使用ActivatedRoute服务获取动态参数的值。
```typescript

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log('Product ID:', params['id']);
  });
}

三、Angular动态路由JavaScript跳转路由

要通过JavaScript代码跳转路由,可以使用Angular的Router服务。


import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToProduct(id: number) {
  this.router.navigate(['/product', id]);
}

这个方法将会导航到像/product/123这样的动态路由。

四、Angular GET传值JavaScript跳转路由

通过JavaScript代码进行带有GET参数的路由跳转也是可能的。


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

这将会导航到带有查询参数的路由,例如/product?id=123。

总结
GET传值是使用查询参数在路由间传递数据的方法。
动态路由允许在URL的一部分中传递变量值。
使用Router服务可以通过JavaScript代码进行路由跳转,无论是到动态路由还是带有查询参数的路由。
这些概念是Angular路由的核心部分,理解和掌握它们将对构建复杂的Angular应用至关重要。

七 Angular路由的嵌套 父子路由

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

在Angular中,嵌套路由(也称为子路由)是一种强大的功能,它允许在应用中创建更丰富的页面层次结构。下面将详细介绍嵌套路由的用途和配置方法。

一、Angular路由的嵌套的用途

嵌套路由主要用于以下情况:

创建更复杂的UI结构:
在单页应用(SPA)中,不同的视图组件可以嵌套在一起,形成多层次的用户界面。通过使用嵌套路由,可以在父路由下组织子视图,使结构更加清晰。
模块化路由管理:
对于大型应用,嵌套路由有助于将路由逻辑分解到不同的模块中,使代码更加模块化和可管理。
保持UI状态:
在某些情况下,可能希望保留父视图的状态(如导航菜单或页眉),同时更改子视图。嵌套路由使得这成为可能。

二、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强大的路由功能之一,可以帮助有效地管理大型应用的路由结构。在实际应用中测试的路由配置,才能确保按预期工作。文章来源地址https://www.toymoban.com/news/detail-812768.html

到了这里,关于【angular教程240112】09(完) Angular中的数据请求 与 路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Angular 使用教程——基本语法和双向数据绑定

    Angular 是一个应用设计框架与开发平台,旨在创建高效而精致的单页面应用 Angular 是一个基于 TypeScript 构建的开发平台。它包括:一个基于组件的框架,用于构建可伸缩的 Web 应用,一组完美集成的库,涵盖各种功能,包括路由、表单管理、客户端-服务器通信等,一套开发工

    2024年02月05日
    浏览(42)
  • Angular:跨域请求携带 cookie

    1. 新建文件夹 http-interceptors 2. 新建拦截器 common.interceptor.ts 3. 用一个数组汇总起来,统一引入: index.ts (后续需要添加拦截器,只需加入到该数组即可) 4. 引入拦截器使用: service.module.ts

    2024年01月23日
    浏览(52)
  • Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理

    在深入探讨 Angular 中的数据绑定和视图更新机制之前,重要的是要理解 Angular 的核心功能之一:变更检测(Change Detection)。变更检测是 Angular 框架用来同步模型(数据)和视图(模板)的过程。当数据模型变化时,Angular 会重新计算模板中的表达式,并将任何变化反映到视图

    2024年04月22日
    浏览(38)
  • 【Angular开发】Angular中的高级组件

    在这个博客中,我将解释Angular中的几个高级组件和机制,它们增强了灵活性、可重用性和性能。 通过熟悉这些高级组件和机制,您可以提高您的Angular开发技能,并在应用程序中利用灵活性、可重用性和性能优化的能力。让我们开始吧! NgContent NgContent,或Angular中的内容投影

    2024年02月04日
    浏览(54)
  • Angular16的路由守卫基础使用

    使用 ng generate guard /guard/login 命令生成guard文件 因新版Angular取消了CanActivate的使用,改用CanActivateFn,因此使用router跳转需要通过inject的方式导入。 在路由文件中,对需要守卫的路由地址配置guard

    2024年02月12日
    浏览(33)
  • 如何在 Angular 中使用懒加载路由

    简介 延迟加载 是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。 默认情况下,Angular 使用 急切加载 来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的,但在某些情况下,这种加载时

    2024年02月20日
    浏览(37)
  • Angular中RxJS处理一些任务——HTTP请求,表单处理

            此篇是完善https://blog.csdn.net/qq_44327851/article/details/134917018这篇博客,在上篇博客中我们提到了处理异步数据流,那在Angular中有哪些异步数据流呢,又是如何处理的呢?         Angular中的RxJS是一个非常强大和流行的库, 用于处理异步数据流和事件流 。它提供了丰

    2024年02月03日
    浏览(47)
  • Angular 17+ 高级教程 – Angular 的局限 の Query Elements

    熟悉 Angular 的朋友都知道,Angular 有非常多的局限,许多事情它都做不好,打开 Github 一堆 2016 - 2017 的 Issues,时至今日都没有解决。 原因也很简单 -- Angular 团队的不作为😔。 通常我会把常见的 Angular 的局限记入在这篇 Angular 的局限和 Github Issues,但由于本篇要讲的问题篇幅

    2024年04月24日
    浏览(42)
  • angular实现自定义模块路由懒加载;配置自定义模块路由及子路由

    图片中绿色表示新建的文件;黄色表示被更改的文件; 1、创建一个新的项目 2、创建一个用户模块,并配置路由 如图: 3 、在module/模块下创建user组件 如图: 4、实现路由懒加载 依次修改下列几个文件: #1 user-routing.module.ts

    2024年02月09日
    浏览(35)
  • Angular中的组件

    组件简介 Angular中的组件,是一个使用 @component()装饰器 装饰的特殊类,同时在这个装饰器中指定 元数据 ,元数据包括 组件选择器 、 组件模板 、 组件样式 等。 组件是angular模块化的一个基本的组成元素。日常开发中,页面通常就是由一个或者多个组件堆叠而成。 组件的元

    2023年04月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包