全局安装 Angular CLI
npm install npm @latest -g
npm install @angular /cli -g
创建新项目
ng new angular2Demo
启动开发服务器
cd angular2Demo
ng serve --open
#访问地址
http:
/src
目录中以下三个TypeScript
文件
src
|--app
| |-- app.component .ts
| |-- app.module .ts
|--main.ts
src/app/app.component.ts
import { Component } from '@angular/core' ;
@Component ({
selector : 'app-root' ,
templateUrl : './app.component.html' ,
styleUrls : ['./app.component.css' ]
})
export class AppComponent {
title = 'My First Angular App!' ;
}
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser' ;
import { NgModule } from '@angular/core' ;
import { FormsModule } from '@angular/forms' ;
import { HttpModule } from '@angular/http' ;
import { AppComponent } from './app.component' ;
@NgModule ({
declarations : [
AppComponent
],
imports : [
BrowserModule,
FormsModule,
HttpModule
],
providers : [],
bootstrap : [AppComponent]
})
export class AppModule { }
src/main.ts
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();
}
platformBrowserDynamic().bootstrapModule(AppModule);
angular-cli
常用命令
#创建一个新项目,置为默认设置
ng new project-name
#构建/编译应用
ng build
#运行单元测试
ng test
#启动一个小型web服务器,用于托管应用
ng serve
#生成一个新的组件
ng generate component my-new -component
ng g component my-new -component
脚手架 用法 Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Class ng g class my-new-class Guard ng g guard my-new-guard Interface ng g interface my-new-interface Enum ng g enum my-new-enum Module ng g module my-module
参考