angular学习之路（二）

一、目录结构分析

详情参考：https://www.angular.cn/guide/file-structure

二、app.module.ts、组件分析

1. app.module.ts

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。 目前，它只声明了
AppComponent。 之后它还会声明更多组件

/* 
angular模块类描述应用的部件是如何组合在一起的。每个应用都至少有个一个angular模块，也就是根模块
用来引导并运行应用。你可以为她取任何的名字。常规名字是AppModule。也就是app.module.ts文件 
*/
import { NgModule } from '@angular/core';/* angularJS核心模块 */
import { BrowserModule } from '@angular/platform-browser';/* BrowserModule浏览器解析模块 */

import { AppComponent } from './app.component';/* 根组件 */
import { HeaderComponent } from './components/header/header.component';

//@NgModule接受一个元数据对象，告诉angular如何编译和启动应用。

@NgModule({
  declarations: [/* 引入当前项目运行的组件 */
    AppComponent,
    HeaderComponent
  ],
  imports: [/* 引入当前模块运行依赖的其他模块 */
    BrowserModule
  ],
  providers: [],/* 定义的服务，回头放到这里面 */
  bootstrap: [AppComponent]/* 指定应用的主视图（根组件） 通过引导根AppModule来启动应用，这里一般写的是根组件 */
})
/* 根模块不需要导出任何东西，因为其他组件也不需要导入根模块，但是必须得写 _(:з」∠)_ */
export class AppModule { }

2. 自定义组件

创建组件 ng g component components/header
components代表在component文件下新建一个叫components的文件夹，里面放置header组件

组件内容详解

import { Component, OnInit } from '@angular/core';/* 引入angular核心 */
@Component({
  selector: 'app-header',/* 使用这个组件的名称 */
  templateUrl: './header.component.html',/* html模板 */
  styleUrls: ['./header.component.scss']/* css样式 */
})
export class HeaderComponent implements OnInit {/* 实现接口 */
	title="我是header组件"
  constructor() { }/* 构造函数 */
  ngOnInit(): void {/* 初始化加载的生命周期函数 */

  }
}

详情参考：https://cli.angular.io/

三、绑定数据

<p>{{ title }}</p>