2 Angular 结构

2.1 Angular 目录结构分析

1）  E2e：在e2e/下是端到端( End—to—End)测试
2）  Node-modules：安装的第三方模块  *
3）  Src：项目的所有文件都放在src里面 *
4）  App：组件以及app.modules.ts定义跟模块 *
5）  Assets：静态资源*
6）  Environments：这个文件夹中包括为各个目标环境准备的文件
7）  Index.html：主页面 * 
8）  Main.ts：应用的主要入口
9）  Polyfills.ts：填充库( polyfill )能帮我们把一些不同点进行标准化
10） Style.css：全局样式 *
11） Test.ts：单元测试的主要入口点
12） Tsconfig.app.json：TS编译器的配置文件
13） Tsconfig.spec.json：同上
14） Package.json：npm 配置文件 *

2.2 app.module.ts、组件分析

// 这个文件是angular根模块，告诉angular如何组装应用
// BrowserModule 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// angular 核心模块
import { NgModule } from '@angular/core';
// 根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';

// @NgModule 装饰器，@NgModule 接受一个一个元数据对象（当做一个方法），告诉 angular 如何编译和启动应用
@NgModule({
  declarations: [ /* 配置当前项目运行的组件 */
    AppComponent,
    NewsComponent,
    HomeComponent,
    HeaderComponent
  ],
  imports: [ /* 配置当前模块运行依赖的其他模块 */
    BrowserModule
  ],
  providers: [],/* 配置项目所需要的服务 */
  bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件）通过引导根AppModule来启动应用，这里一般写的是根组件 */
})
// 跟模块不需要导出任何东西，因为其他组件不需要导入任何模块
export class AppModule { }

2.3 自定义组件

2.3.1 定义

ng g component components( 文件夹名 )/header( 文件名 )

使用：

<app-header></app-header>

2.3.2 组件内容详解

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

2.4 绑定数据

<h1> {{title}} </h1>