安装和使用

使用架手架创建 Angular 项目

$ npm install -g @angular/cli
$ ng new angular-test
$ ng serve --open

使用 @angular/cli 创建的项目使用 TypeScript 撰写

项目默认运行在 http://localhost:4200/

目录结构

src/
 app/
     app.component.css
     app.component.html
     app.component.spec.ts
     app.component.ts
     app.module.ts
     assets/...
 ...
  • app/app.component.ts 定义应用程序根组件(名叫 AppComponent)的逻辑代码。当你往应用中添加组件和服务时,根组件所关联的视图会作为 view hierarchy 视图树的根。
  • app/app.component.html 定义与根组件 AppComponent 关联的模板。
  • app/app.component.css 定义根组件 AppComponent 的 CSS 样式表。
  • app/app.component.spec.ts 定义根组件 AppComponent 的单元测试文件。
  • app/app.module.ts 定义根模块(名叫 AppModule),它告诉 Angular 如何组装应用。其初始声明中只有 AppComponent。当你往应用中添加更多组件时,它们必须声明在这里。
  • assets/* 包含图片文件和其它资源,当构建应用时,它们将被原样复制到目标目录中。

创建组件

使用以下命令可以创建一个组件, 可以看到目录下会多出一个 app/heroes 目录, 包括 heroes.component.ts 等4个文件。

$ ng generate component heroes

注意使用此命令后 app.module.ts 的变化:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

会在 declarations 中新增 HeroesComponent 的引用。

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress