cnpm install -g @angular/cli
ng new heloworld
ng new helloworld --skip-install 然后使用 cnpm install 或者yarn install加速
ng serve --open
// 浏览器解析模块
import { BrowserModule } from '@angular/platform-browser';
// 模块装饰器
import { NgModule } from '@angular/core';
// app组件
import { AppComponent } from './app.component';
// 告诉angular如何编译启动模块
@NgModule({
// 当前项目运行的组件
declarations: [
AppComponent
],
// 项目运行依赖的其他模块
imports: [
BrowserModule
],
// 当前项目所需服务
providers: [],
// 指定应用主视图组件
bootstrap: [AppComponent]
})
// 根模块不导出任何东西,因为其他组件不需要导入根模块
export class AppModule { }
// 组件装饰器
import { Component } from '@angular/core';
@Component({
// 组件名称
selector: 'app-root',
// 模板文件
templateUrl: './app.component.html',
// 央视文件
styleUrls: ['./app.component.css']
})
export class AppComponent {
// 属性
title = 'helloworld';
// 构造函数
constructor() {
}
}
ng g component components/header
<app-header></app-header>
export class HeaderComponent implements OnInit {
title = 'this is title'
constructor() { }
ngOnInit(): void {
}
}
<h2>{{title}}</h2>