今天有事去了一趟陕师大门口，回想当前我们在师大加班的日子，现在还心有余悸。每天晚上干到十点以后，那时候年纪轻，这样加班我也能吃的消。但是现在来看，最好不要找这样的公司，加班是给老板赚钱，身体是自己的。过上几年你就会发现自己干不动了，有句话叫细水长流。好了，看看师大门口。

加班经常吃饭买彩票的巷子，一群跳减肥舞的大妈，"减肥减肥，你越减越肥，你的胳膊赛过我的大腿"。不知老邢你现在在哪，你的胳膊可是赛过了那个谁的大腿。

OK，故事讲完了，今天看一下Angular QuickStart。

对于Angular QuickStart项目，国内的博客写这个都是直接安装angular-cli，然后照着官网新建一个项目，然后跑出来就完了。就好比.net core出来了，我就写一堆概念，然后写了个hello word的界面。

OK，首先我们看一下登录页面，我们在项目中新加login界面的三个文件。

看一下页面的代码

<div class="div-panel-content">
  <div class="row">
    <div class="col-md-12 col-md-margin">
      <div class="input-group">
        <span class="input-group-addon bg_pwd">
          <img src="../../../assets/Images/account.png" />
        </span>
        <input type="text" id="userno" [(ngModel)]="userInfo.username" autofocus="autofocus" class="form-control" maxlength="50" placeholder="请输入管理员账号" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-md-margin">
      <div class="input-group">
        <span class="input-group-addon bg_pwd">
          <img src="../../../assets/Images/pwd.jpg" />
        </span>
        <input type="password" id="password" [(ngModel)]="userInfo.password" class="form-control" maxlength="50" placeholder="请输入密码" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-md-margin" style="text-align: center; margin-bottom: 10px">
      <button type="button" id="btnlogin" class="btn btn-primary" (click)="doLogin()">登录</button>&nbsp;
      <button type="button" id="btncancel" class="btn btn-primary">取消</button>
    </div>
  </div>
  <div id="loginstatus" class="col-md-12 col-md-margin" style="text-align: center; display: none">
    <img src="../../../assets/Images/loading.gif" />
    <label>正在登录，请稍候......</label>
  </div>
</div>

一个用户名，一个密码，我们绑定了用户名和密码两个属性以及一个click事件。

在这里大家需要注意，默认的项目并没有导入FormsModule模块，所以我们需要在app.Module中导入这个模块，否则ngModel标签无法识别，import { FormsModule } from '@angular/forms';

对于页面代码没什么可说的，接下来看一下ts部分。

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../service/login.service';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less'],
  providers: [LoginService]
})
export class LoginComponent implements OnInit {

  userInfo: any = {
    username: null,
    password: null
  }

  constructor(
    private loginService: LoginService) {

  }

  ngOnInit() {
    
  }

  doLogin() {
    this.getOAuthToken(this.userInfo);
  }

  private getOAuthToken(request) {
    this.loginService.getOAuthToken(request)
      .subscribe((res: any) => {
        sessionStorage.setItem('tokenInfo', res);
      });
  }
}

主要是实现登录，在这里登录需要调用web api。所以我们需要先拿到auth token，访问api我们定义了一个loginService。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BaseService } from './base.service';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LoginService extends BaseService {
  readonly customerUrl: string = '/customer';

  constructor(protected httpClient: HttpClient) {
    super(httpClient);
  }

  getOAuthToken(request: any): Observable<any> {
    return super.getOAuthToken(request);
  }
}

导入HttpClient模块，构造函数注入并传给父类，在父类中封装了各种请求的方法。Service需要声明为可注入的，并将其设置为login组件的providers的一员。

providers: [LoginService]

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as $ from 'jquery';

@Injectable()
export class BaseService {
  private readonly client_id: string = 'XXXXXXXXXXX';
  private readonly tokenUrl: string = '/token';
  protected baseUrl: string = 'https://api.51mordern.com';

  constructor(protected httpClient: HttpClient) {

  }

  protected doGet(url: string, request: any): Observable<any> {
    let paramsUri: string = '';
    if (request) {
      for (let property in request) {
        if (request[property] != null && request[property] != undefined && request[property] !== '') {
          console.log(request[property]);
          paramsUri += `&${property}=${encodeURIComponent(request[property])}`;
        }
      }
    }
    return this.httpClient.get(this.baseUrl.concat(url).concat(paramsUri), request);
  }

  protected doPost(url: string, request: any, headers: any = null): Observable<any> {
    return this.httpClient.post(this.baseUrl.concat(url), request, headers);
  }

  protected getOAuthToken(request: any): Observable<any> {
    //$.ajax({
        //  url: this.baseUrl.concat(this.tokenUrl),
        //  type: 'post',
        //  data: {
        //    grant_type: "password",
        //    username: request.username,
        //    password: request.password,
        //    client_id: this.client_id
        //  },
        //  header: {
        //    'content-type': 'application/x-www-form-urlencoded'
        //  },
        //  success: function (data) {
        //    console.log(data);
        //  }
        //});

    let body = `username=${request.username}&password=${request.password}&grant_type=password&client_id=${this.client_id}`;
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
    return this.httpClient.post(this.baseUrl.concat(this.tokenUrl), body, { headers: headers });
  }
}

其实这里面我们主要是看getOAuthToken，第一次我使用的是jquery的ajax请求，要使用jquery，就npm install jquery，然后使用$报错，您就import * as $ from 'jquery'; 对于http请求我们还是使用angular提供的http模块。对于获取access_token，我们用content-type为application/x-www-form-urlencoded方式请求或者json都可以。没啥说的，看一下结果，能否拿到token。

输入用户名和密码，走起，看起来没啥问题。

access_token我们是拿到了，下一波给大家讲讲真正的登录实现。