使用 generator-angular2 生成 Angular 2 项目的教程
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 项目,并了解项目的目录结构、启动文件和配置文件的基本内容。希望这篇教程对您有所帮助!