使用Angular4+kendo ui for Angular+ webapi+sqlserver创建一个简单的省市选择程序（二）

第二步 基本配置和链接服务器

之前的文章我们创建了WEBAPI 服务器。。。接下来就要开始创建Angular4项目了， 创建项目使用的是 Angular CLI。
没有的使用下面代码安装。

npm install -g @angular/cli

使用node创建新的项目，这里的–style=scss 一定要加上，否则到后面添加kendo样式的时候会有点麻烦，如果已经创建了项目，没有添加–style=scss ，添加样式时到这里更改参数添加样式。

ng new datagrid –style=scss 

cd到项目的根目录

cd datagrid 

该项目主要使用的是kendo grid 和 kendo dropdownlist以及kendo textbox
安装本次需要用到的kendo控件

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

安装样式文件

npm install --save @progress/kendo-theme-default

在src/styles.scss里面引用样式，不引用的话会没有样式，异常的丑

@import "~@progress/kendo-theme-default/scss/all";

这样kendo ui for angular的准备工作就做好了，由于本程序使用的是grid 、dropdownlist 、 textbox这三个控件，所以安装的js文件都是为这三个提供支持的，如果想使用其他控件，到kendo ui for angular官网查询安装的包。

接下来在app.module里面添加一些用到的引用

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GetselectComponent } from './getselect/getselect.component';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from "@angular/http";
import { GridModule } from '@progress/kendo-angular-grid';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {DropDownsModule} from "@progress/kendo-angular-dropdowns";
import { InputsModule } from '@progress/kendo-angular-inputs';
import {HttpClientModule} from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    GetselectComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    GridModule,
    BrowserAnimationsModule,
    DropDownsModule,
    InputsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里说明一下，由于我们调用的是外部服务器，所以需要配置一下文件，使得angular文件不会调用本地的路径。

这里我们点击右键根目录创建一个File文件

命名为 proxy.conf.json

在里面填写以下代码

{
  "/api":{
    "target":"http://localhost:55287"
  }
}

注意！：这里的/api 指的是访问以/api开头的路径时，使用下方target的目标路径加载，由于我们访问的是webapi路径，是以 /api 开始的，所以这里写的是/api。可以根据访问路径更改。
下面的target是目标路径，我的访问路径是http://localhost:55287，每个人根据自己实际访问路径更改。

写完以后保存，同时打开根目录下的package.json文件。
找到scripts属性中的start属性，更改为

 "start": "ng serve --proxy-config proxy.conf.json",

这样就可以访问外部的服务器了。

接下来说一下访问外部服务器的方法。。

先创建一个组件，使用webstrom中的Terminal

然后在里面输入下方代码

ng g component getselect 

使用node创建组件的好处是许多配置都自动帮你配置完了。

组件创建完成之后我们测试一下访问外部链接。
对应angular http访问不熟悉的可以去百度一下，有很多教程，这里不详述了。

测试链接之前，一定要把第一步创建的webapi服务器启动起来

我们可以打开我们要获取数据的地址，看看返回的数据

这里我们返回的json格式的数据。

找到getselect.component.ts文件
在类中创建2个属性用来获取数据，同时在构造函数和初始化方法中调用链接外部服务器

export class GetselectComponent implements OnInit {
  // 全部数据
  private gridDataAll: Array<any> = [];
  private dataSourceAll: Observable<any>;

 constructor(private  http: Http) {
    this.dataSourceAll=this.http.get('api/getProCity/0')
      .map((res)=>res.json());
  }
  ngOnInit() {
    this.dataSourceAll.subscribe(
      (data) => this.gridDataAll = data
    );
  }

  }

gridDataAll 就是我们获取到的服务器数据。

我们可以在前台显示一下数据

<div>
  <ul *ngFor="let i of gridDataAll; let numbers = index">
    <li>{{numbers}}</li>
    <li>{{i.cityName}}</li>
    <li>{{i.cityDesc}}</li>
    <li>{{i.Attractions}}</li>
  </ul>
</div>

通过循环gridDataAll将属性显示。

好，到这里我们已经可以拿到远程数据了。下一步中我们将完成所有的代码。