Angular-CLI 与其整体架构

├── e2e                             // ==> 端到端
│   ├── app.e2e-spec.ts             // ==> 端到端测试文件
│   ├── app.po.ts                   // ==> 端到端测试入口文件
│   └── tsconfig.e2e.json           // ==> 用于端到端测试的 typescript 编译器的配置文件
├── node_modules                    // ==> 第三方依赖包
├── src                             // ==> 项目主文件所在目录
│   ├── app                         // ==> 组件所在文件夹
│   │    ├── app.component.css      // ==> 组件的样式文件
│   │    ├── app.component.html     // ==> 组件的 HTML 模板文件
│   │    ├── app.component.spec.ts  // ==> 组件的单元测试文件
│   │    ├── app.component.ts       // ==> 组件定义文件
│   │    └── app.module.ts          // ==> 模块定义配置文件
│   ├── assets                      // ==> 静态资源
│   │    └── .gitkeep               // ==> assets 目录用于存放图片等静态资源文件，构建时会拷贝到发布包里，新创建时一般为空
│   │                               // ==> 但是由于 git 会忽略空文件夹，放置 .gitkeep 这个空文件以保证目录得到管理
│   ├── environments                // ==> 环境
│   │    ├── environment.prod.ts    // ==> 生产环境配置文件，在 .angular-cli.json 中被 mapping，mapping 值为 prod
│   │    └── environment.ts         // ==> 开发环境配置，在 .angular-cli.json 中被 mapping，mapping 值为 dev
│   ├── favicon.ico                 // ==> 网页左上角显示的图标
│   ├── index.html                  // ==> 项目主页
│   ├── main.ts                     // ==> Angular 程序的入口
│   ├── polyfills.ts                // ==> 不同浏览器，比如一些老旧的浏览器及版本的支持
│   ├── styles.css                  // ==> 全局的样式
│   ├── test.ts                     // ==> 单元测试入口
│   ├── tsconfig.app.json           // ==> Angular 应用的 typescript 编译器的配置文件
│   ├── tsconfig.spec.json          // ==> 单元测试的 typescirpt 编译器的配置文件
│   ├── tsconfig.app.json           // ==> Angular 应用的 typescript 编译器的配置文件
│   └── typings.d.ts                // ==> 项目中使用的 typescript 类型的引用文件
├── .angular-cli.json               // ==> CLI 的配置文件，可以设定项目的基础信息，比如构建后的目标目录名称等
├── .editorconfig                   // ==> 编辑器的配置文件
├── .gitignore                      // ==> 为了保证自动生成的文件不被提交的 git 配置文件
├── karma.conf.js                   // ==> karma 单元测试的配置文件
├── package.json                    // ==> npm 的配置文件以及第三方依赖包
├── protractor.conf.js              // ==> protractor 的端到端测试的配置文件
├── README.md                       // ==> 项目的基本信息，主要包含使用 cli 命令如何对项目进行 构建/测试/运行 等
├── tsconfig.json                   // ==> typescirpt 编译器的配置文件
└── tslint.json                     // ==> 提供给 TSLint 和 Codelyzer 的配置信息

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'

// @NgModule 装饰器用来为模块定义元数据
@NgModule({
  // declarations 列出了应用中的顶层组件，包括引导性组件 AppComponent 和我们自己创建的组件
  // 在 module 里面声明的组件在 module 范围内都可以直接使用
  // 也就是说在同一 module 里面的任何 Component 都可以在其模板文件中直接使用声明的组件
  declarations: [
    AppComponent,
    ...
  ],
  // 引入相关依赖
  // BrowserModule 提供了运行在浏览器中的应用所需要的关键服务（Service）和指令（Directive）
  // 这个模块所有需要在浏览器中跑的应用都必须引用
  imports: [
    BrowserModule
  ],
  // providers 列出会在此模块中 "注入" 的服务（Service）
  providers: [],
  // bootstrap 指明哪个组件为引导性组件（默认的是 AppComponent）
  // 当 Angular 引导应用时，它会在 DOM 中渲染这个引导性组件
  // 并把结果放进 index.html 的该组件的元素标签中（默认为 app-root）
  bootstrap: [AppComponent]
})

export class AppModule { }

// main.ts
// 连同 Angular 编译器一起发布到浏览器
import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

if (environment.production) {
  enableProdMode()
}

// 对 AppModule 进行引导
// Angular 编译器在浏览器中编译并引导该应用
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err))

// 不把编译器发布到浏览器
import { platformBrowser } from '@angular/platform-browser'

// 静态编译器会生成一个 AppModule 的工厂 AppModuleNgFactory
import { AppModuleNgFactory } from './app.module.ngfactory'

// 引导 AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Angular Examples'
}