Angular权威教程之开发流程化

以你之姓@ 2023-05-21 07:03 2阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

> 原文：angular权威教程

## 第一大技能：路由 ##

# Angular路由的组成3大部件： #

## 1.Routes： ##

描述应用程序支持的路由配置。

const routes: Routes = [
      {  path:'',redirectTo:'/dashboard',pathMatch:'full'},
      {  path:'dashboard',component:DashboardComponent },
      {  path:'detail/:id',component:HeroDetailComponent },
      {  path:'heroes',component:HeroesComponent },
    ];

## 2.RouterOutlet: ##

这是一个占位符组件，用于告诉Angular要把每个路由的内容放在哪儿。

<div style="text-align:center">
      <h1>{
       { title }}</h1>
      <nav>
        <a routerLink="/dashboard">Dashboard</a> 
        <a routerLink="/heroes">Heroes</a>
      </nav>
      
      <router-outlet></router-outlet>   
      
      <app-message></app-message>
    </div>

## 3.RouterLink: ##

用于创建各种路由链接

<a routerLink="/dashboard">Dashboard</a> 
    <a routerLink="/heroes">Heroes</a>

为了使用以上三大部件：  
就要导入@angular/router中的常量

import {    RouterModule,   Routes } from '@angular/router'

# 路由配置 #

const routes: Routes = 
    [   
    {  path: '', redirectTo: 'home', pathMatch: 'full' },   
    {  path: 'home', component: HomeComponent },   
    {  path: 'about', component: AboutComponent },   
    {  path: 'contact', component: ContactComponent }, 
    {  path: 'contactus', redirectTo: 'contact' }, 
    ];

*  path：指定了该路由要处理的url路径
 *  component：用于连接当前路由与处理该路由的组件
 *  redirectTo：一个可选项，用于将当前路径重定向到另一个已知路由

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

这即是重定向  
空即跳转到home

# 安装路由配置 #

@NgModule({    
    declarations: [     
    RoutesDemoApp,     
    HomeComponent,     
    AboutComponent,     
    ContactComponent   ],   
    imports: [     
    BrowserModule,     
    RouterModule.forRoot(routes) // <-- routes 
    ],   
    bootstrap: [ RoutesDemoApp ],   
    providers: [     
    {  provide:LocationStrategy,useClass:HashLocationStrategy }  
     ] 
     })
      class RoutesDemoAppModule { } 
     
    platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule)   
    .catch((err: any) => console.error(err));

# 第二大技能：get post请求 #

![在这里插入图片描述][20200420221154589.png]

get请求的步骤：

## 导入模块 ##

![在这里插入图片描述][20200420221312291.png]

## 构建视图 ##

![在这里插入图片描述][2020042022132944.png]  
此处点击事件运用了click方法，实现makeRequest

loading为加载数据，可以传值，进行显示正在加载还是显示数据

最后显示data数据

> 纯代码步骤

### 1 ###

import { Component} from '@angular/core'; 
    import { Http, Response} from '@angular/http';

### 2 ###

@Component
    ({   selector: 'simple-http',  
     template: `   
     <h2>Basic Request</h2>  
      <button type="button" (click)="makeRequest()">Make Request</button>  
       <div *ngIf="loading">loading...</div>  
        <pre>{
       {data | json}}</pre> ` })

### 3 ###

export class SimpleHTTPComponent
         {    data: Object;   loading: boolean;

### 4 ###

constructor(private http: Http) {    }

### 5 ###

makeRequest(): void {     
       this.loading = true;     this.http.request('http://jsonplaceholder.typicode.com/posts/1')      
        .subscribe((res: Response) => {         
         this.data = res.json();        
          this.loading = false;       });   } }

可以私聊博主要求电子版本的资料，仅限于学习。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230521/9e3753f3058548c481c571d03391c3ff.png
[20200420221154589.png]: /images/20230521/5181a6ba64e44b839f674ef3c9010a13.png
[20200420221312291.png]: /images/20230521/598d1ca9681d4680ae56acebe8ac1a03.png
[2020042022132944.png]: /images/20230521/653480f538254080bf6f6e69f89680ed.png