Angular根组件app详解

 

app.module.ts

//根模块，告诉angular如何组装应用

//浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//angular核心模块：导入该模块是因为@NgModule()装饰器需要该模块
import { NgModule } from '@angular/core';
//根组件(包括app.component.ts,.html,.css三个文件)
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';

@NgModule({
  //声明:所有组件都必须要在模块中声明(组件、指令、管道)，若通过ng g component 等命令创建的，会自动在这里添加声明
  declarations: [
    AppComponent, //根组件
    NewsComponent
  ],
  //导入需要的其它模块(模块)
  imports: [
    BrowserModule
  ],
  //提供给整个模块的服务写在这(服务)
  providers: [],
  //当其它模块导入这个模块时，提供给其它模块使用到的组件需要在这里声明，但其实这里不需要这个属性，因为根模块不用给任何模块导入(组件模板)
  exports: [],
  //应用的主视图：只有根模块需要这个属性
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

//引入angular核心模块中的Component，因为下面需要使用到@Component()装饰器
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',//组件对外的名字
  templateUrl: './app.component.html',//组件的模板
  styleUrls: ['./app.component.css']//组件的样式文件
})
export class AppComponent {
  title = 'angularDemo111111';
}

app.component.html

<!--使用其他组件：直接通过组件的selector作为标签名即可-->
<app-news></app-news>

app.component.css