「毎年インターネットは壊れています」ということわざがあり、開発者は通常それを修正する必要があります。待望の Angular バージョン9では、これが当てはまると思うかもしれません。以前のバージョンで開発されたアプリは、主要な移行プロセスを経る必要があります。

しかし、そうではありません！ Angularチームはコンパイラーを完全に再設計し、ビルドの高速化、テストの実行の高速化、バンドルサイズの縮小、そして最も重要なこととして、古いバージョンとの下位互換性を実現しました。 Angular 9を使用すると、開発者は基本的にすべての特典を手間をかけずに取得できます。

このAngular9チュートリアルでは、Angularアプリケーションを最初から作成します。最新のAngular9機能のいくつかを使用し、その過程で他の改善点を検討します。

Angular 9チュートリアル：新しいAngularアプリケーションから始める

Angularプロジェクトの例から始めましょう。まず、AngularのCLIの最新バージョンをインストールしましょう。

npm install -g @angular/cli

ng versionを実行すると、AngularCLIのバージョンを確認できます。

次に、Angularアプリケーションを作成しましょう。

ng new ng9-app --create-application=false --strict

ng newで2つの引数を使用していますコマンド：

• --create-application=falseワークスペースファイルのみを生成するようにCLIに指示します。これにより、複数のアプリと複数のライブラリが必要な場合に、コードをより適切に整理できます。
• --strictより厳格なルールを追加して、TypeScriptの入力とコードのクリーンさを強化します。

この結果、基本的なワークスペースフォルダーとファイルが作成されます。

それでは、新しいアプリを追加しましょう。これを行うには、次を実行します。

ng generate application tv-show-rating

プロンプトが表示されます：

? Would you like to share anonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. No ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS

ここで、ng serveを実行すると、アプリが最初のスキャフォールディングで実行されていることがわかります。

ng build --prodを実行すると、生成されたファイルのリストが表示されます。

各ファイルには2つのバージョンがあります。 1つはレガシーブラウザと互換性があり、もう1つはES2015をターゲットにコンパイルされています。これは、新しいAPIを使用し、ブラウザで実行するために必要なポリフィルが少なくて済みます。

Angular 9の大きな改善点の1つは、バンドルサイズです。 Angularチームによると、大きなアプリでは最大40％の減少が見られます。

新しく作成されたアプリの場合、バンドルサイズはAngular 8のサイズとほぼ同じですが、アプリが大きくなるにつれて、バンドルサイズは以前のバージョンよりも小さくなります。

Angular 9で導入されたもう1つの機能は、次のいずれかが発生した場合に警告する機能です。 成分 スタイルCSSファイルが定義されたしきい値よりも大きい。

クラスでカバーされるすべてのコンテンツは、単体テストにかけられます。

これは、悪いスタイルのインポートや巨大なコンポーネントスタイルのファイルを見つけるのに役立ちます。

テレビ番組を評価するためのフォームの追加

次に、テレビ番組を評価するためのフォームを追加します。そのために、まず、bootstrapをインストールしますおよびng-bootstrap：

npm install bootstrap @ng-bootstrap/ng-bootstrap

Angular 9のもう1つの改善点は、i18n（国際化）です。以前は、開発者はアプリ内のすべてのロケールに対してフルビルドを実行する必要がありました。代わりに、Angular 9を使用すると、アプリを1回ビルドし、ビルド後のプロセスですべてのi18nファイルを生成できるため、ビルド時間が大幅に短縮されます。 ng-bootstrap以降i18nに依存している場合は、新しいパッケージをプロジェクトに追加します。

ng add @angular/localize

次に、Bootstrapテーマをアプリのstyles.scssに追加します。

@import '~bootstrap/scss/bootstrap';

そして、NgbModuleを含めますおよびReactiveFormsModule私たちのAppModule app.module.ts：

// ... import { ReactiveFormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [ // ... ReactiveFormsModule, NgbModule ], })

次に、app.component.htmlを更新しますフォームの基本的なグリッドを使用します。

ng g c TvRatingForm

そして、フォームコンポーネントを生成します。

tv-rating-form.component.html

更新しましょう TV SHOW {{tvShow.name}} OK フォームを追加してテレビ番組を評価します。

tv-rating-form.component.ts

そして// ... export class TvRatingFormComponent implements OnInit { tvShows = [ { name: 'Better call Saul!' }, { name: 'Breaking Bad' }, { name: 'Lost' }, { name: 'Mad men' } ]; form = new FormGroup({ tvShow: new FormControl('', Validators.required), rating: new FormControl('', Validators.required), }); submit() { alert(JSON.stringify(this.form.value)); this.form.reset(); } } 次のようになります。

app.component.html

最後に、フォームをng serveに追加しましょう。

tsconfig.json

この時点で、いくつかの基本的なUI機能があります。ここで、{ // ... 'angularCompilerOptions': { 'fullTemplateTypeCheck': true, 'strictInjectionParameters': true, 'strictTemplates': true } } を実行すると繰り返しますが、実際に動作しているのを見ることができます。

実生活でのゲシュタルト原則の例

先に進む前に、デバッグに役立つように追加されたいくつかの興味深い新しいAngular9機能を簡単に見てみましょう。これは私たちの日常業務で非常に一般的なタスクであるため、私たちの生活を少し楽にするために何が変わったかを知ることは価値があります。

Angular 9Ivyを使用したデバッグ

Angular9とAngularIvyで導入されたもう1つの大きな改善点は、デバッグエクスペリエンスです。コンパイラーは、より多くのエラーを検出し、より「読みやすい」方法でそれらをスローできるようになりました。

実際の動作を見てみましょう。まず、tvShowsでテンプレートチェックを有効にします。

name

さて、更新するとtitle配列と名前の変更 tvShows = [ { title: 'Better call Saul!' }, { title: 'Breaking Bad' }, { title: 'Lost' }, { title: 'Mad men' } ]; to @Input()：

@Input()

…コンパイラからエラーが発生します。

このタイプチェックにより、タイプミスやTypeScriptタイプの誤った使用を防ぐことができます。

tv-rating-form.component.tsのAngularIvy検証

私たちが得るもう1つの優れた検証は、@Input() title: string; を使用することです。たとえば、これをapp.component.htmlに追加します。

app.component.ts

…そしてそれを// ... export class AppComponent { title = null; } にバインドします：

$any()

…そして変更anyそのようです：

title

これらの3つの変更を行うと、コンパイラから別のタイプのエラーが発生します。

それを回避したい場合は、 できる @Input() title: string | null ; を使用するテンプレートで値をExpressionChangedAfterItHasBeenCheckedErrorにキャストしますエラーを修正します。

ExpressionChangedAfterItHasBeenCheckedError

ただし、これを修正する正しい方法は、ExpressionChangedAfterItHasBeenCheckedErrorを作成することです。 null許容型のフォーム：

ng g s Title

BehaviorSubject Angular 9Ivyで

Angular開発で最も恐ろしいエラーの1つは、Observableです。ありがたいことに、Ivyはエラーをより明確に出力し、問題の原因を簡単に見つけられるようにします。

それでは、export class TitleService { private bs = new BehaviorSubject (''); constructor() {} get title$() { return this.bs.asObservable(); } update(title: string) { this.bs.next(title); } } を紹介しましょうエラー。そのために、まず、サービスを生成します。

app.component.html

次に、

{ async}

と、app.component.tsにアクセスするためのメソッドを追加します。そして新しい価値を発する。

TitleService

その後、これをexport class AppComponent implements OnInit { // ... title$: Observable ; constructor( private titleSvc: TitleService ) {} ngOnInit() { this.title$ = this.titleSvc.title$; } // ... } に追加します。

tv-rating-form.component.ts

そして、TitleServiceに、AppComponentを挿入します。

ExpressionChangedAfterItHasBeenCheckedError

最後に、 // ... constructor( private titleSvc: TitleService ) { } ngOnInit() { this.titleSvc.update('new title!'); } にapp.component.htmlを挿入しますsetTimeoutのタイトルを更新します。これによりsetTimeout(() => { this.titleSvc.update('new title!'); }); がスローされます。エラー。

ExpressionChangedAfterItHasBeenCheckedError

これで、ブラウザの開発コンソールに詳細なエラーが表示され、@angular/cdkをクリックします。エラーがどこにあるかを示します。

最高のパフォーマンスを得るには、各カテゴリで最速のモデルを選択するだけでよいようです。

このエラーは、サービス呼び出しをnpm install @angular/cdk でラップすることで修正できます。

tv-rating-form.component.spec.ts

理由を理解するためにimport { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; describe('TvRatingFormComponent', () => { let component: TvRatingFormComponent; let fixture: ComponentFixture ; beforeEach(async (() => { TestBed.configureTestingModule({ imports: [ NgbModule, ReactiveFormsModule ], declarations: [TvRatingFormComponent] }).compileComponents(); })); // ... }); エラーが発生し、他の可能性を探ります。 MaximKoretskyiの投稿 このトピックについては読む価値があります。

Angular Ivyを使用すると、エラーをより明確に表示でき、コードにTypeScriptの入力を強制できます。次のセクションでは、Ivyとデバッグを利用するいくつかの一般的なシナリオについて説明します。

コンポーネントハーネスを使用したAngular9アプリのテストの作成

Angular 9では、新しいテストAPIが導入されました。 コンポーネントハーネス 。その背後にある考え方は、DOMとの対話に必要なすべての雑用を取り除き、操作をはるかに簡単にし、実行をより安定させることです。

コンポーネントハーネスAPIはComponentHarnessに含まれていますライブラリなので、まずそれをプロジェクトにインストールしましょう。

TvRatingForm

これで、テストを作成してコンポーネントハーネスを活用できます。 NgbRatingで、テストを設定しましょう。

ComponentHarness

次に、staticを実装しましょう私たちのコンポーネントのために。 2つのハーネスを作成します。1つはhostSelector用、もう1つは// ... import { ComponentHarness, HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; class TvRatingFormHarness extends ComponentHarness { static hostSelector = 'app-tv-rating-form'; } class NgbRatingHarness extends ComponentHarness { static hostSelector = 'ngb-rating'; } // ... 用です。 TvRatingFormHarness clickが必要ですフィールドclass TvRatingFormHarness extends ComponentHarness { // ... protected getButton = this.locatorFor('button'); async submit() { const button = await this.getButton(); await button.click(); } } は、コンポーネントのセレクターの値を取る必要があります。

locatorForAll

の場合、送信ボタンのセレクターとrateをトリガーする関数を作成します。これを実装するのがどれほど簡単になるかがわかります。

class NgbRatingHarness extends ComponentHarness { // ... protected getRatings = this.locatorForAll('span:not(.sr-only)'); async rate(value: number) { const ratings = await this.getRatings(); return ratings[value - 1].click(); } }

次に、評価を設定するメソッドを追加します。ここではTvRatingFormHarnessを使用しますすべてのNgbRatingHarnessを探すユーザーがクリックできる星を表す要素。 TvRatingFormHarness関数は、可能なすべての評価の星を取得し、送信された値に対応する星をクリックするだけです。

class TvRatingFormHarness extends ComponentHarness { // ... getRating = this.locatorFor(NgbRatingHarness); // ... }

最後に欠けているのは接続することですdescribe('TvRatingFormComponent', () => { // ... it('should pop an alert on submit', async () => { spyOn(window, 'alert'); const select = fixture.debugElement.query(By.css('select')).nativeElement; select.value = 'Lost'; select.dispatchEvent(new Event('change')); fixture.detectChanges(); const harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, TvRatingFormHarness); const rating = await harness.getRating(); await rating.rate(1); await harness.submit(); expect(window.alert).toHaveBeenCalledWith('{'tvShow':'Lost','rating':1}'); }); }); selectへ。これを行うには、app.component.spec.tsにロケーターを追加するだけです。クラス。

title

それでは、テストを書いてみましょう。

null

describe('AppComponent', () => { // ... it(`should have as title 'tv-show-rating'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual(null); }); }); に注意してくださいフォーム内では、ハーネスを介した値の設定は実装していません。これは、APIがまだオプションの選択をサポートしていないためです。しかし、これにより、コンポーネントが利用される前の要素との相互作用がどのようになっていたかをここで比較する機会が得られます。

テストを実行する前に最後にもう1つ。 ng testを修正する必要があります更新してからnpm install @angular/fire firebase environment.tsになります。

environment.prod.ts

ここで、export const environment = { // ... firebase: { apiKey: '{your-api-key}', authDomain: '{your-project-id}.firebaseapp.com', databaseURL: 'https://{your-project-id}.firebaseio.com', projectId: '{your-project-id}', storageBucket: '{your-project-id}.appspot.com', messagingSenderId: '{your-messaging-id}', appId: '{your-app-id}' } }; を実行すると、テストに合格します。

Angular 9サンプルアプリに戻る：データベースへのデータの保存

Firestoreへの接続を追加し、評価をデータベースに保存して、Angular9チュートリアルを締めくくりましょう。

そのためには、 Firebaseプロジェクトを作成する 。次に、必要な依存関係をインストールします。

app.module.ts

Firebase Consoleのプロジェクト設定で、構成を取得してimport { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; @NgModule({ // ... imports: [ // ... AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, ], // ... }) に追加しますおよびtv-rating-form.component.ts：

AngularFirestore

その後、必要なモジュールをimport { AngularFirestore } from '@angular/fire/firestore'; export class TvRatingFormComponent implements OnInit { constructor( // ... private af: AngularFirestore, ) { } async submit(event: any) { this.form.disable(); await this.af.collection('ratings').add(this.form.value); this.form.enable(); this.form.reset(); } } にインポートします。

AppComponent

次に、app.component.tsにimport { AngularFirestore } from '@angular/fire/firestore'; export class AppComponent implements OnInit { // ... ratings$: Observable; constructor( // ... private af: AngularFirestore ) { } ngOnInit() { // ... this.ratings$ = this.af.collection('ratings').valueChanges(); } } を挿入しますサービスを提供し、フォーム送信時に新しい評価を保存します。

app.component.html

これで、Firebase Consoleに移動すると、新しく作成されたアイテムが表示されます。

最後に、すべての評価を // ...

{{rating.tvShow}} ({{rating.rating}})

にリストします。これを行うには、

|_+_|

でコレクションからデータを取得します。

フレームワークを構築する方法

|_+_|

…そして

|_+_|

に、評価のリストを追加します。

|_+_|

これは、Angular9チュートリアルアプリをすべてまとめたときの外観です。

Angular9とAngularIvy：より良い開発、より良いアプリ、そしてより良い互換性

このAngular9チュートリアルでは、基本的なフォームの作成、Firebaseへのデータの保存、Firebaseからのアイテムの取得について説明しました。

その過程で、Angular9とAngularIvyにどのような改善と新機能が含まれているかを確認しました。完全なリストについては、公式のAngularブログを確認できます。 最新のリリース投稿 。

---

Google Cloudパートナーとして、ApeeScapeのGoogle認定エキスパートが企業に提供されます オンデマンド 彼らの最も重要なプロジェクトのために。

基本を理解する

Angularは何に使用されますか？

Angularは、開発者が高速なWebおよびモバイルアプリケーションを簡単に構築するのに役立つJavaScriptフレームワークです。開発者がすぐに立ち上げて実行できるように、事前に構築された機能が付属しています。

Angularの最新バージョンは何ですか？

Angularの最新バージョンはAngular10で、フレームワークに加えてCLIとAngularMaterialを更新します。 （それ以前は、Angular9はAngularIvyコンパイラーをデフォルトで有効にした最初のバージョンでした。）

なぜAngularはそれほど人気が​​あるのですか？

Angularは2013年に作成され、フル機能のフレームワークとして人気を博し、Web開発者が最も一般的に必要とする多くのコンポーネントを同梱しています。

Angularは学ぶ価値がありますか？

はい。 Angularは、最も人気のある3つのフレームワークの1つであり、巨大で活発なコミュニティがあります。グーグルによってサポートされていることは、今後何年にもわたって私たちと一緒にいる可能性があります。

AngularのIvyとは何ですか？

AngularIvyは新しいAngularコンパイラです。これは、Angularチームが2年間取り組んだ大規模なリファクタリングの結果です。これは多くの改善の基礎を築き、AngularがWeb開発の最新のイノベーションを常に把握できるようにします。

Angular Ivyを有効にするにはどうすればよいですか？

Angular 9では、Ivyはデフォルトで有効になっています。 Angular 8でもIvyを有効にすることは可能ですが、Angular 9をまだ使用していない場合は、バージョン9にアップグレードしてIvyを有効にすることをお勧めします。