Angular学习之核心文件分析

开始学习Angular啦
首先分析一下Angualr项目里的一些核心文件，了解他们是做什么的

1.根模块 app.module.ts
这个文件是 Angular 的根模块，告诉 Angular 如何组装应用

// BrowserModule 浏览器解析的模块
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: [],  
  // 指定应用的主视图，这里一般是根组件
  bootstrap: [AppComponent]  
})

// 暴露根模块，根模块不需要导出任何东西，因为其他组件不需要导入根模块
export class AppModule { }

2.根组件 app.component.ts

// 引入核心模块的 Component
import { Component } from '@angular/core';

@Component({
  // css 选择器，选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里
  selector: 'app-root',
  // 当前组件的 html 模版
  templateUrl: './app.component.html',
  // 当前组件的样式
  styleUrls: ['./app.component.scss']
})

// 暴露组件
export class AppComponent {
  title = 'angular-demo';  // 定义属性

  constructor() {}  // 构造函数
}