初探Angular_02 感受添加组件

// 浏览器解析的模块
import { BrowserModule } from ‘@angular/platform-browser‘;
// Angular核心模块
import { NgModule } from ‘@angular/core‘;
// 根组件
import { AppComponent } from ‘./app.component‘;

// NgModule装饰器 @NgModule接收一个元数据(类似一个方法)对象，告诉Angular如何编译和启动应用
@NgModule({
  declarations: [ /*配置当前项目运行地组件*/
    AppComponent // 如果在这里引入组件后在这里
  ],
  // 配置当前模块运行依赖地其他模块
  imports: [
    BrowserModule
  ],
  // 配置项目所需地服务
  providers: [],
  // 指定应用地主视图(成为根组件) 通过引导根AppModule来启动应用，这里一般写根组件
  bootstrap: [AppComponent]
})
// 根模块不需要导出任何东西，因为其他组件不需要导入跟模块
export class AppModule { }

// 引用核心模块里面地Component
import { Component } from ‘@angular/core‘;

//这是一个装饰器
@Component({
  // 使用这个组件地名称
  selector: ‘app-root‘,
  // html
  templateUrl: ‘./app.component.html‘,
  // css
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent {
  constructor() {
    // 构造函数
  }
}

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘app-header‘,  // 这个是转换为标签组件名称
  templateUrl: ‘./header.component.html‘,
  styleUrls: [‘./header.component.css‘]
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;

import { AppComponent } from ‘./app.component‘;
// 当使用命令ng g component components/header 文件时,这里将会将会自动导入到这里
import { HeaderComponent } from ‘./components/header/header.component‘;

// 装饰器  @NgModule接收一个元数据(类似一个方法)对象
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent  // 其次,命令自动将响应的模块导入
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<p>
  我证明，这里组件生效了
  <br/>
  header works!
</p>

<!-- 将响应的组件名称，加上app写成html标签 <app-header></app-header> -->
<app-header></app-header>