Angular与服务器通讯

一.创建web服务器

1.使用nodejs创建服务器

• 创建一个server文件夹

• 初始化server文件夹npm init -y，创建package.json

• 引入node的类型定义文件npm i @types/node --save,类型定义文件的作用：让开发者在typescript中使用现在已有的javascript的库（安装类型定义文件是保证对应内容可以使用typescript进行开发）

• 搭建简单的web服务器

  • 创建server文件夹，并创建hello_server.ts，内容填写

    import * as http from 'http';
    const server = http.createServer((request,response)=>{
       response.end('hello node');
    });
    server.listen(8000);
    

  • 通过webstrom的自动编译将ts转换成js，如下

    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var http = require("http");
    var server = http.createServer(function (request, response) {
        response.end('hello node');
    });
    server.listen(8000);
    

  • 使用node hello_server.js启动服务器，访问8000端口就可以看到页面显示hello node

2.使用express创建restful的http服务

• 安装express框架,npm install express --save

• 安装express的类型定义文件npm install @types/express --save

• 创建服务器配置文件aution_server.ts

  • 内容如下

  import * as express from 'express';
  const app = express();//app用来声明服务器端可以使用的服务
  app.get('/',(req,res)=>{
  	res.send('hello express');
  });//声明用来处理get请求的服务
  app.get('/products',(req,res)=>{
      res.send('接收到商品查询请求');
  });
  const server = app.listen(8000,"localhost",()=>{
     console.log('服务器已启动，地址是:http://localhost:8000');//服务器启动时执行的操作
  });
  

• 将对象或是数组以json的格式返回使用res.json(对象名);

• 通过请求查询参数获得对应的数据信息

  app.get('/product/:id',(req,res)=>{
      res.json(products.find((product)=>product.id == req.params.id));
  });
  

3.监控服务器文件的变化

• 安装nodemonitor工具来监控源代码，当代码改变时自动重启node服务器并加载最新的代码。npm install -g nodemon
  • 使用nodemon aution_server.js启动服务
  • 当修改服务器文件时，服务器就会自动重启

二.Http通讯

• angular使用响应式编程的方式处理http请求

1.了解angular的Http服务

• Http的class就是标准的typescript类，对应不同的方法就是发送不同请求的
• 方法的参数
  • url:发送的路径
  • RequestOptionsArgs（可选的）定义了一组与请求相关的参数
• 每个方法都返回一个可观测的流Observable<Response>，通过订阅流来得到服务端响应数据和错误信息

2.发送Http请求

• 生成组件ng g component product

• 代码内容

  //控制器内容
  import 'rxjs/Rx';//引入内容就可以进行响应式编程
  export class ProductComponent implements OnInit{
      dataSource:Observable<any>;//用来接受http服务中返回的流
      products:Array<any>=[];//用于和模板进行数据绑定
      constructor(private http:Http){//需在module引入http模块
      	this.dataSource = this.http.get('/api/products').map((res)=>res.json());//get方法只是定义了http请求
      }
      ngOnInit(){
          this.dataSource.subscribe((data)=>this.products=data);//当使用subscripe订阅方法时，请求才真正发出去，将结果存到products中
      }
  }
  

• 创建proxy.conf.json文件

  • 文件内容

  {
      "/api":{//api表示请求的前缀
          "target":"http://localhost:8000"//表示如果访问/api开头的路径，则将请求内容转发到localhost的8000端口上.如访问/api/products则会访问http://localhost:8000/api/products
      }
  }
  

• 修改一下脚本内容package.json

  "scripts":{
      "start":"ng serve --proxy-config proxy.conf.json"//添加相关参数配置
  }
  

• 在模板上使用async异步管道获得对应的流数据

  • 控制器代码

  import 'rxjs/Rx';//引入内容就可以进行响应式编程
  export class ProductComponent implements OnInit{
      products:Observable<any>;
      constructor(private http:Http){//需在module引入http模块
      	this.products = this.http.get('/api/products').map((res)=>res.json());//直接获得对应流传给模板，由异步管道来处理
      }
      ngOnInit(){}
  }
  

  • 模板代码

  <ul>
      <li *ngFor="let product of products | async"><!-- 使用async管道 -->
      	{{product.title}}
      </li>
  </ul>
  

• 发送Http请求时带上请求头

  • 控制器代码

  import 'rxjs/Rx';//引入内容就可以进行响应式编程
  import {Headers} from '@angular/http';//通过angular包获得Headers类
  export class ProductComponent implements OnInit{
      products:Observable<any>;
      constructor(private http:Http){//需在module引入http模块
          let myHeaders:Headers = new Headers();
          myHeaders.append("Authorization","Basic 123456");
      	this.products = this.http.get('/api/products',{headers:myHeaders}).map((res)=>res.json());//将请求头Header放到方法的第二个参数中
      }
      ngOnInit(){}
  }
  

未完待续…