angular2笔记

前端之家收集整理的这篇文章主要介绍了angular2笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

全局安装 Angular CLI

  1. npm install npm@latest -g
  2. npm install @angular/cli -g

创建新项目

  1. ng new angular2Demo

启动开发服务器

  1. cd angular2Demo
  2. ng serve --open
  3. #访问地址
  4. http://localhost:4200/

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

  1. src
  2. |--app
  3. | |-- app.component.ts
  4. | |-- app.module.ts
  5. |--main.ts

src/app/app.component.ts

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
  5. })
  6. export class AppComponent {
  7. title = 'My First Angular App!';
  8. }

src/app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  5.  
  6. import { AppComponent } from './app.component';
  7.  
  8. @NgModule({
  9. declarations: [
  10. AppComponent
  11. ],imports: [
  12. BrowserModule,FormsModule,HttpModule
  13. ],providers: [],bootstrap: [AppComponent]
  14. })
  15. export class AppModule { }

src/main.ts

  1. import { enableProdMode } from '@angular/core';
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  3.  
  4. import { AppModule } from './app/app.module';
  5. import { environment } from './environments/environment';
  6.  
  7. if (environment.production) {
  8. enableProdMode();
  9. }
  10.  
  11. platformBrowserDynamic().bootstrapModule(AppModule);

angular-cli常用命令

  1. #创建一个新项目,置为默认设置
  2. ng new project-name
  3. #构建/编译应用
  4. ng build
  5. #运行单元测试
  6. ng test
  7. #启动一个小型web服务器,用于托管应用
  8. ng serve
  9.  
  10. #生成一个新的组件
  11. ng generate component my-new-component
  12. 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

参考

猜你在找的Angularjs相关文章