使用 generator-angular2 生成 Angular 2 项目的教程

使用 generator-angular2 生成 Angular 2 项目的教程

generator-angular2A Yeoman Generator to create Angular2 apps right now.项目地址:https://gitcode.com/gh_mirrors/ge/generator-angular2

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

generator-angular2/
├── app/
│   ├── templates/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.component.ts
│   │   │   │   ├── app.module.ts
│   │   │   │   ├── main.ts
│   │   │   ├── assets/
│   │   │   ├── index.html
│   │   │   ├── styles.css
│   ├── index.js
│   ├── templates.js
├── package.json
├── README.md

• app/：包含生成器的主要逻辑和模板文件。
  • templates/：包含项目的基本模板文件。
    • src/：项目的源代码目录。
      • app/：Angular 2 应用的主要代码文件。
        • app.component.ts：根组件文件。
        • app.module.ts：根模块文件。
        • main.ts：应用的入口文件。
      • assets/：静态资源文件夹。
      • index.html：主 HTML 文件。
      • styles.css：全局样式文件。
  • index.js：生成器的主文件。
  • templates.js：模板文件的配置文件。
• package.json：项目的依赖和脚本配置文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

• main.ts 是 Angular 2 应用的入口文件，负责引导启动 AppModule。

app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• app.module.ts 是 Angular 2 应用的根模块文件，声明了应用的组件、导入的模块、服务提供者等。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to {{title}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class AppComponent {
  title = 'Angular 2 App';
}

• app.component.ts 是 Angular 2 应用的根组件文件，定义了组件的选择器、模板和样式。

3. 项目的配置文件介绍

package.json

{
  "name": "generator-angular2",
  "version": "1.0.0",
  "description": "Yeoman generator for Angular 2",
  "files": [
    "app"
  ],
  "keywords": [
    "yeoman-generator",
    "angular2"
  ],
  "dependencies": {
    "yeoman-generator": "^4.0.0"
  }
}

• package.json 文件包含了项目的名称、版本、描述、文件列表、关键词和依赖项等信息。

通过以上介绍，您可以了解如何使用 generator-angular2 生成 Angular 2 项目，并了解项目的目录结构、启动文件和配置文件的基本内容。希望这篇教程对您有所帮助！

generator-angular2A Yeoman Generator to create Angular2 apps right now.项目地址:https://gitcode.com/gh_mirrors/ge/generator-angular2