前端之家收集整理的这篇文章主要介绍了
angular2笔记,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
全局安装 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 |
参考
原文链接:https://www.f2er.com/angularjs/147232.html