成为前端高手之路 第3部份 使用Angular做一个天气应用程序
- 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
这次的教程网站，即使按照步骤进行，也经常出现错误，相当困难。与其从中途开始创建相同的东西，不如改为制作类似天气应用的气压检测应用的方向。
背景的渐变会因天气而改变。
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相比，我感觉可能需要更多地查看手册。
