app.module.ts
这个文件是Angular的根模块,用来告诉Angular如何组装应用
Angular核心模块
import { NgModule } from '@angular/core';
浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
根组件(包含3部分)
import { AppComponent } from './app.component';
自定义的组件(比如下面3个自定义组件---这几个组件在创建的时候,会自动添加到此处)
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';
@NgModule装饰器,接收一个元数据对象,告诉Angular如何编译和启动应用
@NgModule({
declarations: [ /*配置当前项目运行的组件 -----在自定义组件的时候,会自动添加到此处*/
AppComponent,NewsComponent,HomeComponent, HeaderComponent
],
imports: [ /*配置当前项目运行依赖的其他模块 */
BrowserModule
],
providers: [], /*配置项目所需要的服务 */
bootstrap: [AppComponent] /*指定应用的主视图(根组件),通过引导根组件AppModule来启动应用,这里一般写的是根组件 */
})
不需要导出任何东西,因为其他组件不需要导入根模块
export class AppModule { }
自定义组件的结构分析
// 此处是组件需要的模块
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-news', //这个是组件的名字,如果在其他组件使用该组件,语法为<app-news></app-news>
templateUrl: './news.component.html', //这个是组件的html结构
styleUrls: ['./news.component.scss'] //这个是组件的css样式
})
export class NewsComponent implements OnInit {
//自定义数据
title = "我是一个新闻组件11";
// 声明一个变量,然后在构造函数中进行赋值
public message:any;
constructor() {
this.message = "这是给属性赋值----(改变属性的值)";
}
ngOnInit(): void {
}
}