OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular ...

原作者: [db:作者] 来自: [db:来源] 收藏邀请

上一篇: http://www.cnblogs.com/cgzl/p/7755801.html

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ErrorHandler } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { Client } from '../models/Client';

@Injectable()
export class ClientService {
  private url = 'http://localhost:5001/api/client';
  private headers = new Headers({ 'Content-Type': 'application/json' });

  constructor(private http: Http) { }

  getAll(): Observable<Client[]> {
    return this.http.get(this.url)
      .map(response => response.json() as Client[]);
  }

  getOne(id: number): Observable<Client> {
    return this.http.get(`${this.url}/${id}`)
      .map(response => response.json() as Client);
  }

  create(client: Client) {
    return this.http.post(this.url, JSON.stringify(client), { headers: this.headers })
      .map(response => response.json())
      .catch(this.handleError);
  }

  update(client: Client) {
    return this.http.patch(`${this.url}/${client.id}`, JSON.stringify(client), { headers: this.headers })
      .map(response => response.json())
      .catch(this.handleError);
  }

  delete(id: number) {
    return this.http.delete(`${this.url}/${id}`)
      .map(response => response.json())
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    if (error.status === 400) {
      return Observable.throw('Bad Request');
    }

    if (error.status === 404) {
      return Observable.throw('Not Found');
    }
    return Observable.throw('Error Occurred');
  }
}

我个人比较喜欢 observable的方式而不是promise.

然后再Client.Component里面, 注入ClientService, 在NgOnInit里面调用查询方法:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  public clients: Client[];

  constructor(private service: ClientService) { }

  ngOnInit() {
    this.service.getAll().subscribe(
      clients => {
      this.clients = clients;
        console.log(this.clients);
      }
    );
  }
}

然后修改Client.Component.html:

<table class="table table-striped" *ngIf="clients?.length > 0; else noClients">
  <thead class="thead-dark">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Balance</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let client of clients">
      <td>{{client.id}}</td>
      <td>{{client.firstName + ' ' + client.lastName}}</td>
      <td>{{client.email}}</td>
      <td>{{client.balance}}</td>
      <td><a href="" class="btn btn-secondary btn-sm">明细</a></td>
    </tr>
  </tbody>
</table>
<ng-template #noClients>
  <hr>
  <h5>系统中没有客户..</h5>
</ng-template>

然后把client.component放在dashboard中:

dashboard.component.html:

<app-clients></app-clients>

然后看看浏览器:

我这里还没有数据, 如果有数据的话, 将会显示一个table, header是黑色的.

使用font-awesome

npm install font-awesome --save

然后打开.angular-cli.json:

      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

重新运行ng serve

修改 client.component.html的明细按钮:

<td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> 明细</a></td>

然后还是使用swagger添加两条数据吧: http://localhost:5001/swagger, 现在的效果:

添加一个总计:

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  public clients: Client[];
  public total: number;

  constructor(private service: ClientService) { }

  ngOnInit() {
    this.service.getAll().subscribe(
      clients => {
      this.clients = clients;
      this.getTotal();
      }
    );
  }

  getTotal() {
    this.total = this.clients.reduce((previous, current) => previous + current.balance, 0);
  }
}

html:

<div class="row">
  <div class="col-md-6">
    <h2>
      <i class="fa fa-users">客户</i>
    </h2>
  </div>
  <div class="col-md-6">
    <h5 class="pull-right text-muted">
      总计: {{total | currency:"USD":true}}
    </h5>
  </div>
</div>
<table class="table table-striped" *ngIf="clients?.length > 0; else noClients">
  <thead class="thead-dark">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Balance</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let client of clients">
      <td>{{client.id}}</td>
      <td>{{client.firstName + ' ' + client.lastName}}</td>
      <td>{{client.email}}</td>
      <td>{{client.balance}}</td>
      <td>
        <a href="" class="btn btn-secondary btn-sm">
          <i class="fa fa-arrow-circle-o-right"></i> 明细</a>
      </td>
    </tr>
  </tbody>
</table>
<ng-template #noClients>
  <hr>
  <h5>系统中没有客户..</h5>
</ng-template>

Sidebar 侧边栏

打开sidebar.component.html:

<a routerLink="/add-client" href="#" class="btn btn-success btn-block"><i class="fa fa-plus"></i>添加新客户</a>

然后再dashboard中添加sidebar:

<div class="row">
    <div class="col-md-10">
        <app-clients></app-clients>
    </div>
    <div class="col-md-2">
        <app-sidebar></app-sidebar>
    </div>
</div>

添加在了右边. 效果如图:

然后需要在app.module.ts里面添加路由:

const appRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'add-client', component: AddClientComponent }
];

Add-Client 添加客户的表单:

打开add-client.component.html:

<div class="row">
  <div class="col-md-6">
    <a routerLink="/" href="#" class="btn btn-link"><i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard </a>
  </div>
  <div class="col-md-6">

  </div>
</div>

<div class="card">
  <div class="card-header">
    Add Client
  </div>
  <div class="card-body">
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div class="form-group">
        <label for="firstName">名</label>
        <input 
          type="text" 
          class="form-control" 
          [(ngModel)]="client.firstName"
          name="firstName"
          #clientFirstName="ngModel"
          minlength="2"
          required>
        <div *ngIf="clientFirstName.errors.required && clientFirstName.touched" class="alter alert-danger">
          名字是必填的
        </div>
        <div *ngIf="clientFirstName.errors.minlength && clientFirstName.touched" class="alter alert-danger">
          名字最少是两个字
        </div>
      </div>
    </form>
  </div>
</div>

现在表单里面添加一个字段, 然后在app.module里面添加FormsModule:

import { FormsModule } from '@angular/forms';

  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpModule,
    FormsModule
  ],

现在应该是这个样子:

然后把表单都完成 add-client.component.html:

<div class="row">
  <div class="col-md-6">
    <a routerLink="/" href="#" class="btn btn-link">
      <i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard </a>
  </div>
  <div class="col-md-6">

  </div>
</div>

<div class="card">
  <div class="card-header">
    添加客户
  </div>
  <div class="card-body">
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <div class="form-group">
        <label for="firstName">名</label>
        <input type="text" class="form-control" [(ngModel)]="client.firstName" name="firstName" #clientFirstName="ngModel" minlength="2"
          required>
        <div *ngIf="clientFirstName.touched && clientFirstName.invalid">
          <div *ngIf="clientFirstName.errors.required" class="alert alert-danger">
            名字是必填的
          </div>
          <div *ngIf="clientFirstName.errors.minlength" class="alert alert-danger">
            名字最少是两个字
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="lastName">姓</label>
        <input type="text" class="form-control" [(ngModel)]="client.lastName" name="lastName" #clientLastName="ngModel" minlength="2"
          required>
        <div *ngIf="clientLastName.touched && clientLastName.invalid">
          <div *ngIf="clientLastName.errors.required" class="alert alert-danger">
            姓是必填的
          </div>
          <div *ngIf="clientLastName.errors.minlength" class="alert alert-danger">
            姓最少是两个字
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" [(ngModel)]="client.email" name="email" #clientEmail="ngModel" required>
        <div *ngIf="clientEmail.touched && clientEmail.invalid">
          <div *ngIf="clientEmail.errors.required" class="alert alert-danger">
            Email是必填的
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="phone">联系电话</label>
        <input type="text" class="form-control" [(ngModel)]="client.phone" name="phone" #clientPhone="ngModel" minlength="10">
        <div *ngIf="clientPhone.touched && clientPhone.invalid">
          <div *ngIf="clientPhone.errors.minlength" class="alert alert-danger">
            电话最少是10位
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="balance">余额</label>
        <input type="number" class="form-control" [(ngModel)]="client.balance" name="balance" #clientBalance="ngModel" [disabled]="disableBalanceOnAdd">
      </div>
      <input type="submit" class="btn btn-primary btn-block" value="提交">
    </form>
  </div>
</div>

现在看起来是这样:

再安装一个库: npm install --save angular2-flash-messages

这个库可以略微灵活的显示提示信息.

npm install --save angular2-flash-messages

在app.module里面:

import { FlashMessagesModule } from 'angular2-flash-messages';

  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpModule,
    FormsModule,
    FlashMessagesModule
  ],

add-client.component.ts:

import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {

  public client: Client = {
    id: 0,
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    balance: 0
  };

  public disableBalanceOnAdd = true;

  constructor(
    public flashMessagesService: FlashMessagesService,
    public router: Router
  ) { }

  ngOnInit() {
  }

  onSubmit({ value, valid }: { value: Client, valid: boolean }) {
    if (!valid) {
      this.flashMessagesService.show('请正确输入表单', { cssClass: 'alert alert-danger', timeout: 4000 });
      this.router.navigate(['/add-client']);
    } else {
      console.log('valid');
    }
  }
}

然后需要在某个地方放置flash messages, 打开app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

然后运行一下:

大约这个样子.

然后修改提交, 注入clientService, 把数据新增到web api:

import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
import { Client } from '../../models/Client';
import { ClientService } from '../../services/client.service';

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {

  public client: Client = {
    id: 0,
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    balance: 0
  };

  public disableBalanceOnAdd = true;

  constructor(
    public flashMessagesService: FlashMessagesService,
    public router: Router,
    public clientService: ClientService
  ) { }

  ngOnInit() {
  }

  onSubmit({ value, valid }: { value: Client, valid: boolean }) {
    if (this.disableBalanceOnAdd) {
      value.balance = 0;
    }
    if (!valid) {
      this.flashMessagesService.show('请正确输入表单', { cssClass: 'alert alert-danger', timeout: 4000 });
      this.router.navigate(['/add-client']);
    } else {
      this.clientService.create(value).subscribe(
        client => {
          console.log(client);
          this.flashMessagesService.show('新客户添加成功', { cssClass: 'alert alert-success', timeout: 4000 });
          this.router.navigate(['/']);
        }
      );
    }
  }
}

可以运行试试. 应该是好用的.

Client Detail 客户明细:

首先在app.module.ts里面添加路由:

const appRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'add-client', component: AddClientComponent },
  { path: 'client/:id', component: ClientDetailsComponent }
];

然后在clients.componet.html修改:

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）发布时间：2022-07-10

AjaxPro.dll,asp.net前台js调用后台方法（无刷新）发布时间：2022-07-10

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular ...

使用font-awesome

Sidebar 侧边栏

Add-Client 添加客户的表单:

再安装一个库: npm install --save angular2-flash-messages

Client Detail 客户明细:

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053