# 瀏覽器 chrome瀏覽器占有越來越高的市場份額，雖然作為消費者永遠不希望任何一家獨大，但我們不得不承認，chrome瀏覽器對開發者的確非常友好。如果你的計算機上還沒有安裝chrome瀏覽器，請下載安裝以更好的與教程保持步調一致。 # 模塊化 Angular支持模塊化開發，這非常友好的支持了項目分工，而且使開發、維護都變得非常容易。如果我們愿意，結合適當的單元測試還可以大幅度提升軟件的開發質量。 ## ng test 本節我們使用`ng test`或`ng t`來代替`ng serve`來啟動Angular的歡迎模塊： ```bash panjiedeMac-Pro:first-app panjie$ ng t Compiling @angular/core/testing : es2015 as esm2015 Chrome 88.0.4324.96 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.243 secs / 0.179 secs) TOTAL: 3 SUCCESS ``` 該命令將自動為我們打開瀏覽器，顯示歡迎頁面如下：  與使用`ng serve`不同，`ng t`顯示了更多的信息，我們暫時僅僅需要知道其它信息屬于模塊化開發時顯示的幫助信息即可。 # IDE 雖然我們可以選擇任一款IDE，但在此仍然強烈的推薦大家使用`WebStorm`，除占用的資源較高、收費外，它真的全身都是優點。 在IDE的領域里，如果jetbrains稱自己排行老二，當前怕是還沒有人敢說自己排行第一。WebStorm是該公共發布的IDEA之一，官方稱其為: The smartest JavaScript IDE - 最智能的JavaScript集成開發環境。該軟件對一般用戶是收費的，當前的價格是首年129刀、次年103刀、第三年起每年77刀；但它其非常友好的是對教育用戶都是免費的，而這只需要你擁有一個.edu的郵箱（沒有郵箱，使用學生證也是可以的，但需要人工審核，周期會長一些）。我們暫時假設大家都是有.edu郵箱的，官方還很貼心的給出了學生授權申請方式。 官方地址：[https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/) # Hello World! 使用WebStorm打開項目文件夾`first-app`，依次打開左側`project`中的如下文件：  清空該文件中的內容后將以下內容復制至該文件： ```html <h1>Hello World!</h1> ``` 在執行`ng t`的情況下，對應的瀏覽器將自動刷新，并顯示以下界面：  我們注意到在頁面上出現了紅色的錯誤，這是由于`ng t`的`約束`起了作用。我們可以在一些文件中去寫一些約束的方法，該約束方法能夠保證：在日后的代碼更新中，我們當前書寫的功能不被**誤殺**，而這個約束的行為我們稱為單元測試，這些約束的代碼則是單元測試的代碼。 ## 解決錯誤提示 Angular中用于約束的單元測試代碼全部以`.spec.ts`結尾，當前報錯的約束代碼位于`app.component.spec.ts`中，文件可對應約束：`app.component.ts`、`app.component.html`、`app.component.css`三個文件。 當前`app.component.spec.ts`測試文件中有一段代碼是對`app.component.html`進行約束的： ```typescript it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement; expect(compiled.querySelector('.content span').textContent).toContain('first-app app is running!')?; }); ``` 此處代碼的作用是：最終生成的界面內容中必須包含`first-app app is running`?，否則就會用報錯的方法來提示，我們把這種錯誤的提醒方式稱為**斷言**。 如何使用代碼來約束代碼是個相對復雜的話題，在此我們暫時放棄這種復雜的操作，**刪除**`app.component.spec.ts`中的以下代碼： ```typescript it(`should have as title 'first-app'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual('first-app'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement; expect(compiled.querySelector('.content span').textContent).toContain('first-app app is running!'); }); ``` 刪除后`app.component.spec.ts`代碼如下： ```typescript import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); }); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); }); ```  錯誤消失。 # 本節作業 瀏覽 `app.component.spec.ts`、`app.component.ts`、`app.component.html`、`app.component.css`四個文件，猜猜它們間是如何關聯在一起的。 # 資源列表 | 名稱 | 地址 | |---- | ---- | | 搭建環境 | [https://www.angular.cn/guide/setup-local](https://www.angular.cn/guide/setup-local) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step1.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step1.3.zip)