加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular2笔记

发布时间:2020-12-17 09:15:05 所属栏目:安全 来源:网络整理
导读:全局安装 Angular CLI npm install npm @latest -g npm install @angular /cli -g 创建新项目 ng new angular2Demo 启动开发服务器 cd angular2Demong serve --open #访问地址 http: //localhost:4200/ /src 目录中以下三个 TypeScript 文件 src|--app| |--

全局安装 Angular CLI

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

创建新项目

ng new angular2Demo

启动开发服务器

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

/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

参考

  • Angular CLI 快速起步

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读