关于angular:真实项目开发收获与总结

前言

首先感激潘老师近期始终在我的学习和开发上给予的领导与帮忙，同时也为本人能参加到实在的我的项目开发中而感到非常侥幸。言归正传，联合近期我的项目开发我将别离从：1. 实在我的项目开发感触；2.GitHub 初步应用;3. 对于 Angular 学习及应用，这三个方面进行总结。

实在我的项目开发

1. 团队单干
在参加实在我的项目开发中，我感触到我的团队单干能力失去了全面的造就和锤炼。
（1）团队成员根据集体状况支付工作，同时肯定要将支付的工作指定给本人，防止工作反复实现而造成的工夫节约。比方：在一次开发中，我与团队成员同时进行了雷同工作忘了进行指定，在提交时就产生了反复的问题。往小说是节约了集体的工夫，往大说就是拖慢了我的项目进度。
（2）近期学习开发中，我的速度相对来说进行的比拟快，但也存在“欲速则不达”的问题。在团队开发中，我与大家互相交换，互相帮忙解决各自问题的同时也能够进一步补救有余、晋升本人，同时也防止一些相似谬误的产生。
（3）正如潘老师所说“要将本人放在团队领导者的角度思考问题”。比方老师团队中张贴字母表的故事，仅仅是一张字母表就引申出团队开发问题、代码标准问题、工夫效率问题，使我深深感触到一个团队领导者的重要性。当处在一个更高地位去思考问题时，思考的方面将会更广、更深。我抵赖这一点在近期我做不是很到位，但我会将这句话记于心，并缓缓践于行。
2. 代码规范化和无障碍交换
我认为二者是相辅相成的。代码规范化书写一方面保障了代码的健壮性缩小 bug 产生，一方面也加强了代码可读性来不便团队成员浏览非本人书写的代码，从而确保无障碍交换。换言之好的无障碍交换就要有肯定的标准，代码规范化就是很好的例子：
（1）正文的书写

/**
 * 小区治理 mockApi
 */
export class VillageApi implements MockApiInterface {
  private baseUrl = 'village';

（2）在单元测试文件中，形容分明以后组件属于谁

describe('village->EditComponent', () => {});

（3）养成格式化代码的习惯

GitHub 初步应用

这是我第一次接触 Git 与 GitHub，通过学习理解到：Git 是一个分布式版本控制工具；GitHub 是一个代码托管核心。就近期所应用的过的 Git 命令做一总结：
1. 基本操作命令

git status  // 查看状态
git add .  // 将工作区的 文件 增加到暂存区（“.”示意以后文件夹及子文件夹中所有未增加的文件）git common -a -m "形容信息"  // 将暂存区 文件 提交到本地库
git reset  // 版本后退或后退
git branch [分支名称]  // 创立分支
git branch -v  // 查看分支
git checkout [分支名称]  // 切换分支

2. 与 GitHub 相干命令
（1）开发前命令步骤

git clone [近程地址 | 近程地址别名]  // 克隆
git checkout main  // 切换到主分支，确保本人在主分支上
git pull  // 拉取最新代码
git branch [分支名]  // 建设与 issue 号同名的分支
git checkout [分支名]  // 切换到开发分支

注：git pull = git fetch [近程分支名] + git merge [近程分支名]
（2）pull request 命令步骤

// 上传到本地
git add .
git commit -a -m "形容信息"
// 将代码提交到 GitHub 上
git push origin [以后分支号]

对于 Angular 学习及应用

在 Angular 学习过程中，让我感觉最乏味与神奇的是其单元测试，也是我第一次接触到“用代码测试代码”。单元测试又称模块测试，针对软件设计中的最小单位——程序模块，进行正确性查看的测试工作。其中外面的用代码来模仿点击按钮，以及在测试文件中长期搭建父组件都让我感觉非常神奇，值得重复学习、钻研。其次是 mock-api 一个便捷的 REST 接口数据模仿工具，利用其来模仿后盾，用于前后端隔离测试和开发调试，从而实现在没有后盾的状况下前端业务的失常开发。
1. 某新增性能的数据流
在实在我的项目开发中第一次联合应用 mock-api 实现某项的新增性能时，整个代码的书写过程以及数据的流向都是比拟含糊的，这也使得在第一次编写代码时既破费了许多工夫，又呈现了许多问题。直到修改完所有代码并加以总结后，才明确了数据的流向和每次数据流动时的格局。我在理论开发中总结发现，明确数据流后再进行代码书写就绝对晦涩，也不对会有漏写的问题。上面先给出代码，最初给出数据流图：
（1）在 town.api.ts 中编写模仿后盾

// 新增乡镇
      {
        method: 'POST',
        url: this.baseUrl + `/save`,
        result: (urlMatches: any, option: { body: { name: string, pinyin: string}; }) => {let body = {} as {name: string, pinyin: string};

          if (option) {body = option.body;}

          return {id: randomNumber(),
            name: body.name,
            pinyin: body.pinyin
          } as Town;
        }
      },

（2）在 town.service.ts 中编写 save 办法，写完后能够利用 town.service.spec.ts 进行单元测

/**
   * 新建乡镇
   */
  public save(town: Town): Observable<Town> {Assert.isString(town.name, 'type of town name must be string');
    Assert.isString(town.name, 'type of town name must be string');

    return this.httpClient.post<Town>(`${this.baseUrl}/save`, town)
      .pipe(map(data => new Town(data)));
  }

（3）在 town\add.component.ts 中获取浏览器中数据，并调用 M 层传入新数据对后盾发送申请

const newTown = new Town({name: this.formGroup.get('name').value,
      pinyin: this.formGroup.get('pinyin').value
    });

// 调用 M 层办法传入新乡镇信息对后盾进行申请
this.townService.save(newTown)
  .subscribe(() => this.commonService.success(() => this.commonService.back()),
        error => console.log('保留失败', error));
  }

（4）在 town\add.component.spec.ts 中引入 mockapi（示例中 ApiTestingModule 为测试的 mockapi 文件）

import {ApiTestingModule} from '../../../api/api.testing.module';
import {RouterTestingModule} from '@yunzhi/ng-router-testing';


describe('town->AddComponent', () => {
  let component: AddComponent;
  let fixture: ComponentFixture<AddComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({declarations: [AddComponent],
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
        ApiTestingModule
      ]
    })
      .compileComponents();});

注：town.api.ts 与 town.service.ts 中的 url 肯定要保持一致，否则会在控制台报错，谬误如下

此时看完代码局部再来看数据流就会对每一部分代码所执行有进一步意识。

2. 其余
上面是在我的项目开发中遇到问题及解决办法的总结
（1）遇到此类报错，应该先查看模仿文件是否加到 Api 数组中，如无问题再查看申请门路是否与 Api 中申明的门路是否统一。

（2）此问题是在拉取最新代码到主分支进行测试时，应该要查看环境是否发生变化。能够应用 npm install 来装置本地所短少环境。

（3）抉择组件应用了[formControl]，没有应用[formControlName]，就会使得在没有抉择乡镇时保留按钮任然能够应用，保留按钮校验产生问题。

（4）此处的 option 未设置值，但在保留时后盾断言也没有报错。控制台数据打印出的是“平房”或“楼房”，后盾断言应用的是 Assert.isNotNullOrUndefined()，断言健壮性不够。

最初发现 type 的数据类型为 number，而非本人所认为的 string，因而做出如下批改，且断言应用 Assert.isNumber()。

总结

1. 了解
在近期实际开发中，我发现越是往后开发越要了解整个我的项目的业务逻辑关系，了解代码的执行过程。不能只是简略的性能实现、代码的生吞活剥。举一个例子：在实现小区治理的新增性能时，就将乡镇也作为一个字段来保留。但曾经有社区这个字段，而且社区当中包换了乡镇，抉择出社区就能够其确定乡镇。所以在小区新增中将乡镇独自作为一个字段保留就显得画龙点睛。
2. 反复的轮子
我所写的断言：

 Assert.isString(body.name, 'village name must be set');
 Assert.isString(body.pinyin, 'village pinyin must be set');
 Assert.isNumber(body.longitude, 'village longitude must be set');
 Assert.isNumber(body.latitude, 'village latitude must be set');
 Assert.isNumber(body.type, 'VillageType must be set');
 Assert.isDefined(body.community, body.community.id, 'communityId must be set');
 Assert.isDefined(body.model, body.model.id, 'modelId must be set');
 Assert.isString(body.establishTime, 'establishTime must be set');

老师所写的断言：

 Assert.isDefined(body, body.community, body.model, 'data validate false');
 Assert.isString(body.name, body.pinyin, 'some properties must be string');
 Assert.isNumber(body.longitude,
            body.latitude,
            body.type,
            body.community.id,
            body.model.id,
            body.establishTime, 'some properties must be number');

给出代码就高深莫测，归其起因我认为还是对于断言的应用了解不到位，只是照搬照抄。
3. 一直地学习
通过这次实在我的项目的开发，我播种了一些教训、办法，但其与合格二字还是相差甚远。在开发过程中我也感触到有许多货色须要一直地学习，一直地丰盛欠缺。路漫漫其修远兮，吾将上下而求索。