一、起步

一、安装angular-cli

npm install -g @angular/cli
ng --version

二、初始化

ng new my-dream-app
cd my-dream-app
ng serve

三、vscode插件安装

Angular 8 Snippets //Angular语法填充（标签）
Angular Files  //生成Angular的文件模板（Component、Module、Pipe等等）
Angular Follow Selecto //文件跳转（Component跳转到html、scss文件）
Angular Language Service //引用填充和跳转到定义（html中进行引用补全）

四、chrome插件安装

Augury

五、项目目录结构

.
├── e2e 端到端测试（暂且不关心）
├── node_modules npm安装的第三方包
├── src 存放业务源码
├── .angular.json            AngularCLI脚手架工具配置文件
├── .editorconfig            针对编辑器的代码风格约束
├── .gitignore                 Git仓库忽略配置项
├── karma.conf.js            测试配置文件（给karma用的，暂且不用关心）
├── package.json            项目包说明文件
├── README.md             项目说明文件
├── tsconfig.json             TypeScript配置文件
└── tslint.json                  TypeScript代码风格校验工具配置文件（类似于 eslint）

//npm scripts介绍
...
"scripts": {
    "ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
    "start": "ng serve", 运行开发模式
    "build": "ng build --prod", 运行项目打包构建（用于发布到生成环境）
    "test": "ng test", 运行karma单元测试
    "lint": "ng lint", 运行TypeScript代码校验
    "e2e": "ng e2e" 运行protractor端到端测试
  },
...

main.js
- 描述：模块化启动入口
- 职责：加载启动根模块

AppModule
- 描述：项目根模块
- 职责：把组件、服务、路由、指令等组织到一起，设置AppComponent为根组件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooComponent } from './foo/foo.component';
import { LoginComponent } from './home/login/login.component';
@NgModule({
  //声明模块资源：组件、指令、服务
  declarations: [
    AppComponent,
    FooComponent,
    LoginComponent
  ],
  //依赖模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  //指定应用程序的根级别需要使用的service
  providers: [],
  //指定启动组件
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent
- 描述：项目根组件
- 职责：替换掉 index.html 文件中的 <app-root></app-root> 节点

app.component.spec.ts      单元测试文件，暂时不用管他