angular2笔记

全局安装 Angular CLI

npm@H_874_7@ install npm@H_874_7@@latest@H_874_7@ -g
npm@H_874_7@ install @angular@H_874_7@/cli -g

创建新项目

ng new@H_874_7@ angular2Demo

启动开发服务器

cd angular2Demo
ng serve --open
#访问地址@H_874_7@
http://localhost:4200/@H_874_7@

/src目录中以下三个TypeScript文件

src
|--app
|   |-- app.component@H_874_7@.ts@H_874_7@
|   |-- app.module@H_874_7@.ts@H_874_7@
|--main.ts@H_874_7@

src/app/app.component.ts

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

@Component@H_874_7@({
  SELEctor@H_874_7@: 'app-root'@H_874_7@,templateUrl@H_874_7@: './app.component.html'@H_874_7@,styleUrls@H_874_7@: ['./app.component.css'@H_874_7@]
})
export@H_874_7@ class@H_874_7@ AppComponent@H_874_7@ {@H_874_7@
  title = 'My First Angular App!'@H_874_7@;
}

src/app/app.module.ts

import@H_874_7@ { BrowserModule } from '@angular/platform-browser'@H_874_7@;
import@H_874_7@ { NgModule } from '@angular/core'@H_874_7@;
import@H_874_7@ { FormsModule } from '@angular/forms'@H_874_7@;
import@H_874_7@ { httpR_874_11845@odule } from '@angular/http'@H_874_7@;

import@H_874_7@ { AppComponent } from './app.component'@H_874_7@;

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

src/main.ts

import@H_874_7@ { enableProdMode } from@H_874_7@ '@angular/core'@H_874_7@;
import@H_874_7@ { platformBrowserDynamic } from@H_874_7@ '@angular/platform-browser-dynamic'@H_874_7@;

import@H_874_7@ { AppModule } from@H_874_7@ './app/app.module'@H_874_7@;
import@H_874_7@ { environment } from@H_874_7@ './environments/environment'@H_874_7@;

if@H_874_7@ (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModulE);

angular-cli常用命令

#创建一个新项目，置为默认设置@H_874_7@
ng new@H_874_7@ project-name
#构建/编译应用@H_874_7@
ng build
#运行单元测试@H_874_7@
ng test
#启动一个小型web服务器，用于托管应用@H_874_7@
ng serve

#生成一个新的组件@H_874_7@
ng generate component my-new@H_874_7@-component
ng g component my-new@H_874_7@-component

@H_696_184@脚手架 @H_696_184@用法 @H_139_192@module

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
ng g module my-module

参考

• Angular CLI 快速起步