前端之家收集整理的这篇文章主要介绍了
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 |
参考