成为前端高手之路 第3部份 使用Angular做一个天气应用程序

2 年 ago
科, 颖
2 minutes
    2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ

上述文章的第三部分。

由于Angular自1.x版本以来，有许多我不太了解的东西，所以我选择分步进行工作，而不是一下子做完。关于身份验证，我在下面另外写了一些内容。

    Angular + @angular/fire でサインイン/サインアップ/ログアウトできるページを作る

再次我没有进行SSR。也许以后会有机会再做。完成的存储库在下面。

    https://github.com/hbsnow-sandbox/angular-firebase-auth

教程网站

    • https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

 

    https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-8-the-ultimate-guide-2019-part-ii-fe70852b2d6d

这次的教程网站，即使按照步骤进行，也经常出现错误，相当困难。与其从中途开始创建相同的东西，不如改为制作类似天气应用的气压检测应用的方向。

Screenshot from 2019-12-28 18-25-35.png

背景的渐变会因天气而改变。

Screenshot from 2019-12-27 23-54-57.png
Screenshot from 2019-12-27 23-55-15.png

UI使用了Angular Material，但没有支持暗黑模式。在教程中，每个组件都设置了暗黑模式的判断，根据判断来进行不同的实现。但实在没有那么大的动力去做到那样的程度。

我在照片中使用了find47，而在获取气压数据的API中使用了OpenWeatherMap。

Angular CLI是一个用于开发和管理Angular项目的命令行界面。

在使用Angular时，可以使用 ng 命令来执行某些操作。本次使用了比较常见的命令是 ng。

ng g c path/foo コンポーネントの作成

ng g s path/bar サービスの作成

ng add package npm packageの追加

以上的三个。没有提供删除命令来删除前述的两个，所以如果出现错误，需要手动进行删除。

由于提供了这些内容，所以这一次我使用了提供的内容，但是只有 TSLint 而没有 Prettier，没有 HTML 和 CSS 的格式化工具，真的很困扰……

只需要一个选项：顺便说一下，如果使用默认设置，成员变量以 _ 开头的命名会引发 TSLint 的警告，所以我不太想改变初始设置，但是我只添加了”variable-name”: false。

状态管理

因为我只是对NgRx这个词有一些了解，所以一开始也考虑过使用它。但是考虑到我可以在Service中存储状态，并且在这种规模下，似乎不会遇到太多问题，所以最终决定不使用NgRx。

import { Injectable } from '@angular/core';
import { environment } from './../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Weather, City } from 'src/types/weather';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  private _cities: City[] = [
    { value: '2128295', viewValue: '札幌', image: 'https://find47.jp/ja/i/RhnEE/image_file' },
    { value: '1850147', viewValue: '東京', image: 'https://find47.jp/ja/i/cVikh/image_file' },
    { value: '1853908', viewValue: '大阪', image: 'https://find47.jp/ja/i/plmNy/image_file' },
    { value: '1863958', viewValue: '福岡', image: 'https://find47.jp/ja/i/xewpq/image_file' }
  ];

  private _weather: Weather;
  private _city: City;

  constructor(private http: HttpClient) { }

  set weather(weather: Weather) {
    this._weather = weather;
  }

  get weather() {
    return this._weather;
  }

  get cities() {
    return this._cities;
  }

  set city(city: City) {
    this._city = city;
  }

  get city() {
    return this._city;
  }

  setCityByValue(cityValue: string) {
    this._city = this._cities.find(city => city.value === cityValue);
  }

  fetch() {
    return this.http.get(`https://api.openweathermap.org/data/2.5/weather?id=${this._city.value}&appid=${environment.openWeatherMapApi}`);
  }
}

在WeatherService中，我觉得设置器/获取器变得非常繁琐，可能只需要将其设置为公开(public)就可以了。因此，在组件方面，我只为在HTML中使用的属性创建了设置器/获取器。

RxJS/Promise 代表着使用 RxJS 的异步编程模式。

只需要一个选项，原生地用中文转述以下内容：
在这个应用程序中，我只是用RxJS来获取API和处理路由，因此即使没有深入理解，也能实现它。

如果只是一个如此简单的应用程序，Angular Fire非常易于使用，几乎无需考虑太多即可实现令人满意的认证。

    Route users with AngularFire guards

HTML/CSS 是用来创建和设计网页的技术。

除了对HTML不熟悉之外，特别是没有任何Formatter设置，这样就很困难了。

当你只是匆匆快速地斜读教程并写下以下内容时，只有在ts文件中bar被设置为”bar”的情况下，在html文件中执行以下操作。

<div class="foo" [class]="bar"></div>
// => <div class="bar"></div>

<div class="foo" [ngClass]="bar"></div>
// => <div class="foo bar"></div>

这样做。虽然可以进行输出，但会覆盖现有的类（似乎被称为属性绑定），所以基本上建议使用ngClass。

    ngClass

印象

我之前对Angular很讨厌，可能是因为我在用Angular 1系受到了限制，然后在Angular 2中被迫改变了使用方式。但实际上，现在使用的Angular还是不错的。只是我不喜欢偏离给定的路线，比如升级版本时会不会因为TypeScript版本较低、使用的是TSLint而不是Prettier等等改变而变得麻烦，这些问题让我有些担忧。

如果被问到关于学习成本的问题，我觉得Angular并不比React特别高。因为Angular已经提供了几乎所有需要的官方资源，所以在技术选择上需要考虑的事情并不多。但是与React相比，我感觉可能需要更多地查看手册。

✖
广告
将在 10 秒后关闭
bannerAds