Angular 2 Seed 项目教程

Angular 2 Seed 项目教程

angular2-seed项目地址:https://gitcode.com/gh_mirrors/an/angular2-seed

1. 项目的目录结构及介绍

Angular 2 Seed 项目的目录结构如下：

angular2-seed/
├── config/
│   ├── project.config.ts
│   ├── project.dev.config.ts
│   ├── project.prod.config.ts
│   └── ...
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── services/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   └── ...
├── tools/
│   ├── config/
│   ├── utils/
│   └── ...
├── package.json
├── tsconfig.json
└── ...

目录结构介绍

• config/: 包含项目的配置文件，如开发和生产环境的配置。
• src/: 包含项目的源代码，包括应用组件、服务、静态资源等。
  • app/: 应用的主要代码，包括组件、服务等。
  • assets/: 静态资源文件，如图片、字体等。
  • environments/: 环境配置文件。
  • index.html: 应用的入口 HTML 文件。
  • main.ts: 应用的入口 TypeScript 文件。
• tools/: 包含构建工具和配置文件。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 编译配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是 Angular 2 应用的入口文件，负责启动应用。以下是 main.ts 的示例代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

启动文件介绍

• platformBrowserDynamic(): 使用 JIT (Just-In-Time) 编译器在浏览器中动态编译和启动应用。
• bootstrapModule(AppModule): 引导启动 AppModule，这是应用的主模块。

3. 项目的配置文件介绍

tsconfig.json

tsconfig.json 是 TypeScript 编译器的配置文件，定义了 TypeScript 编译的选项。以下是 tsconfig.json 的示例内容：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

package.json

package.json 是 Node.js 项目的配置文件，定义了项目的依赖和脚本。以下是 package.json 的示例内容：

{
  "name": "angular2-seed",
  "version": "1.0.0",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/router": "^3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5

angular2-seed项目地址:https://gitcode.com/gh_mirrors/an/angular2-seed