Angular 8 教程：构建你的第一个应用 - 计算器

2019-12-25  本文已影响0人  SlowGO

目标

从头构建一个 Angular 8 应用。

通过构建这个简单的计算器应用来体验 Angular 8。

前提

创建项目

$ ng new ngcalculator

会问你是否添加路由，你可以输入 N，因为我们这个demo不需要路由功能。

然后会询问你想要使用哪种样式，选择 CSS 即可。

之后就是等待，需要等2分钟。

完成后就可以启动开发服务器了：

$ cd ./ngcalculator
$ ng serve

启动后可以访问项目：

http://localhost:4200/

创建组件

创建一个计算器组件，封装计算器界面和逻辑。

打开一个新的终端窗口（之前运行开发服务器的终端窗口不要关），进入项目目录，执行：

$ ng generate component calculator --skipTests

会在 src/app/calculator目录下创建下面的文件：

打开 src/app/calculator/calculator.component.ts，内容如下：

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

HTML 中引入组件时的标签名。

模板的 HTML 文件路径。

模板的样式文件路径，可以关联多个样式文件。

引用组件

打开src/app/app.component.html，删掉现有的内容，添加：

<app-calculator></app-calculator>

查看 http://localhost:4200/，内容会自动刷新。

创建计算器组件的 UI

打开 src/app/calculator/calculator.component.html，替换内容为：

<div class="calculator">
  <input type="text" class="calculator-screen" value="0" disabled />
  <div class="calculator-keys">
    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">&times;</button>
    <button type="button" class="operator" value="/">&divide;</button>
    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>
    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>
    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>
    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>
    <button type="button" class="equal-sign" value="=">=</button>
  </div>
</div>

打开 src/app/calculator/calculator.component.css，替换内容为：

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
  }
  
  .calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
  }
  
  button {
    height: 60px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
    background-color: transparent;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
    text-shadow: 0 1px rgba(255,255,255,.4);
  }
  
  button:hover {
    background-color: #eaeaea;
  }
  
  .operator {
    color: #337cac;
  }
  
  .all-clear {
    background-color: #f0595f;
    border-color: #b0353a;
    color: #fff;
  }
  
  .all-clear:hover {
    background-color: #f17377;
  }
  
  .equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    color: #fff;
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;
  }
  
  .equal-sign:hover {
    background-color: #4e9ed4;
  }
  
  .calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
  }

添加一些全局样式，打开 src/styles.css，添加：

html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

查看页面，显示效果：

image

添加计算器处理逻辑

打开 src/app/calculator/calculator.component.ts，添加组件的成员变量：

export class CalculatorComponent implements OnInit {
  currentNumber = '0';
  firstOperand = null;
  operator = null;
  waitForSecondNumber = false;

定义获取当前数字的方法：

  public getNumber(v: string) {
    console.log(v);
    if (this.waitForSecondNumber) {
      this.currentNumber = v;
      this.waitForSecondNumber = false;
    } else {
      this.currentNumber === '0' ? this.currentNumber = v : this.currentNumber += v;
    }
  }

定义追加显示数字的方法：

  getDecimal() {
    if (!this.currentNumber.includes('.')) {
      this.currentNumber += '.';
    }
  }

定义计算方法：

  private doCalculation(op, secondOp) {
    switch (op) {
      case '+':
        return this.firstOperand += secondOp;
      case '-':
        return this.firstOperand -= secondOp;
      case '*':
        return this.firstOperand *= secondOp;
      case '/':
        return this.firstOperand /= secondOp;
      case '=':
        return secondOp;
    }
  }

定义获取操作符的方法：

  public getOperation(op: string) {
    console.log(op);
    if (this.firstOperand === null) {
      this.firstOperand = Number(this.currentNumber);
    } else if (this.operator) {
      const result = this.doCalculation(this.operator, Number(this.currentNumber))
      this.currentNumber = String(result);
      this.firstOperand = result;
    }
    this.operator = op;
    this.waitForSecondNumber = true;
    console.log(this.firstOperand);
  }

定义清除方法：

  public clear() {
    this.currentNumber = '0';
    this.firstOperand = null;
    this.operator = null;
    this.waitForSecondNumber = false;
  }

视图绑定

绑定显示区：

<div class="calculator">
  <input type="text" class="calculator-screen" [value]="currentNumber" disabled />
  <!-- [...] -->

绑定数字按钮事件：

<div class="calculator">
  <input type="text" class="calculator-screen" [value]="currentNumber" disabled />
  <div class="calculator-keys">
    <!-- [...] -->
    <button type="button" (click) = "getNumber('7')" value="7">7</button>
    <button type="button" (click) = "getNumber('8')" value="8">8</button>
    <button type="button" (click) = "getNumber('9')" value="9">9</button>
    <button type="button" (click) = "getNumber('4')" value="4">4</button>
    <button type="button" (click) = "getNumber('5')" value="5">5</button>
    <button type="button" (click) = "getNumber('6')" value="6">6</button>
    <button type="button" (click) = "getNumber('1')" value="1">1</button>
    <button type="button" (click) = "getNumber('2')" value="2">2</button>
    <button type="button" (click) = "getNumber('3')" value="3">3</button>
    <button type="button" (click) = "getNumber('0')" value="0">0</button>
    <!-- [...] -->
  </div>
</div>

绑定操作符按钮事件：

<div class="calculator-keys">
    <button type="button" (click) = "getOperation('+')" class="operator" value="+">+</button>
    <button type="button" (click) = "getOperation('-')" class="operator" value="-">-</button>
    <button type="button" (click) = "getOperation('*')" class="operator" value="*">&times;</button>
    <button type="button" (click) = "getOperation('/')" class="operator" value="/">&divide;</button>
    <!-- [...] -->
    <button type="button" (click) = "getDecimal()" class="decimal" value=".">.</button>
    <button type="button" (click) = "clear()"  class="all-clear" value="all-clear">AC</button>
    <button type="button" (click) = "getOperation('=')" class="equal-sign" value="=">=</button>
  </div>
</div>

小结

计算器应用就完成了，可以到页面中体验一下。

参考：

https://medium.com/techiediaries-com/angular-8-tutorial-build-your-first-angular-app-part-i-76778af65b3d

上一篇 下一篇

猜你喜欢

热点阅读