Angular学习02

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 {

  }

}