# 浏览器 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)