003.angular环境配置及英雄之旅

能力所限，本文的环境配置仅限于macOS。

npm install -g @angular/cli
//-g 全局安装指令 需要添加root权限。即：
sudo npm install -g @angular/cli
//版本查看
ng --version

vscode 插件推荐
格式校验：TSLint与ESLint根据需求二选一。

• TSLint
• ESLint
• Prettier - Code formatter
• Code Spell Checker
• Angular Language Service
• 代码保存时，移除不在需要的imports配置。

"editor.codeActionsOnSave": {
    "source.organizeImports": true 
}

- GitLens — Git supercharged - Visual Studio Code Commitizen Support

英雄之旅紧随入门指南之后学习，便于加深关联理解。

//cli终端指令

//创建新工作区/项目
ng new xxx

//启动工程。默认端口4200. 
ng serve --open//--open可简写为-o。

//创建 ng generate
//创建组件
ng generate component xxx
//创建服务
ng generate service xxx
//创建模块
ng generate module xxx

//打包工程。默认模式为production，生成的文件是静态的，因此可以部署到任何支持静态文件的服务器上。
ng build

相关问题及注意事项

• 动态的路由参数

<a *ngFor="let hero of heroes"
  routerLink="/detail/{{hero.id}}">//此处的动态路由参数使用的是插值方式，而非字符串拼接
  {{hero.name}}
</a>

• 参数注入之public VS private

//此处依赖TypeScript相关知识。
主要目的是为了在在html模板中直接使用组件类声明的变量。声明为private时，只能在组件类中使用。

• 路由参数是字符串。
• !非空断言

getHero(id: number): Observable<Hero> {
  // For now, assume that a hero with the specified `id` always exists.
  // Error handling will be added in the next step of the tutorial.
  const hero = HEROES.find(h => h.id === id)!;//此处为非空断言，用于排除undefined和null的可能取值。
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(hero);
}

• Observable
  • Observable在被订阅之前，什么都不会做。