zoukankan      html  css  js  c++  java
  • Angular基础(七) HTTP & Routing

     

    一、HTTP

    a)Angular提供了自己的HTTP库来调用外部API,为了能够在等待API响应的过程中继续与界面交互,采用异步HTTP请求的方式。

    b)Get请求,首先导入Http, Response,http.request方法返回Observable类型,所以可以使用Observable.subscribe来订阅请求响应,达到异步的效果。

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

    this.http.get('http://jsonplaceholder.typicode.com/gets/1')

    .subscribe((res:Response) => {

      this.data = res.json();

    });

    c) 其它类型的请求,可以使用对应的方法,如http.PostDeletePut等,但Post之类的请求会要求第二个参数,以传入修改的内容:

    this.http.post(

      'http://jsonplaceholder.typicode.com/posts',

      JSON.stringify({

        body: 'bar',

        title: 'foo',

        userId: 1

      }))

      .subscribe((res: Response) => {

        this.data = res.json();

     });

    这里将要提交的对象使用JSON.stringify进行了转换。

     

    二、Routing

    a)Web应用会被划分为各种区域和层级,根据路由的规则,可以让URL访问到指定的内容。

    定义路由的方式为:

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

    constroutes: Routes = [

      { path: 'home', component: AppComponent }

    { path: 'contactus',redirectTo: 'home'},

    ]

    @NgModule({

      …

      imports: [RouterModule.forRoot(routes)],

    })

    创建Routes配置对象后,使用RouterModule.forRoot(routes)安装配置。在配置对象中,path定义了路由要处理的URL,component指定了对应的符合对应路由的URL请求由哪个组件处理。还可以使用redirectTo进行重定向。

     

    b)routerLink和router-outlet

     

    <divclass="page-header">

      <h1>Router Sample</h1>

      <div>

        <a[routerLink]="['/home']">Home</a>

        <a[routerLink]="['/about']">About Us</a>

        <a[routerLink]="['/contactus']">Contact Us</a>

      </div>

    </div>

    <divid="content">

      <router-outlet></router-outlet>

    </div>

    使用[routerLink]这样的语法来表示路由信息,点击超链接时页面不会重新加载,而是直接在router-outlet定义的区域展示新页面。

     

    c) 带参数路由

     

    //路由配置

    constroutes: Routes = [

      { path: 'home/:id', component: HomeComponent}

    ]

    //使用

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

    exportclass HomeComponent {

      id: string;

      constructor(private route: ActivatedRoute) {

        route.params.subscribe(params => {this.id = params['id'] });

      }

    }

    配置路由时path采用 'home/:id'这样的形式,就可以处理home/1之类的url了,在url对应的处理组件的构造函数中注入ActivatedRoute类型,可通过它来取得url中的参数。

     

    学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

     

     

     

     

  • 相关阅读:
    C++ 二元作用域运算符(::)
    C 桶排序
    C 递归的选择排序
    C 归并算法
    C 可变长实参列表
    C条件编译的一些例子
    C实现将中缀算术式转换成后缀表达式
    Activiti6-数据库配置-dbconfig(学习笔记)
    idea在Terminal中使用maven指令
    Spring Boot的web开发
  • 原文地址:https://www.cnblogs.com/zhixin9001/p/7429957.html
Copyright © 2011-2022 走看看