【前端】2. Angular 目录结构分析以及 Angular 中创建组件

参考视频：https://www.bilibili.com/video/av50917863?p=2

一、目录结构分析

首层目录：

• 【node_modules 】 第三方依赖包存放目录
• 【e2e 】 端到端的测试目录 用来做自动测试的
• 【src 】 应用源代码目录
• 【.angular-cli.json 】 Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包
  比如jquery等
• 【 karma.conf.js】 karma是单元测试的执行器，karma.conf.js是karma的配置文件
• 【package.json 】
  这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
• 【protractor.conf.js】 也是一个做自动化测试的配置文件
• 【README.md】 说明文件
• 【tslint.json】 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它

src目录：

• app目录 包含应用的组件和模块，我们要写的代码都在这个目录（下面两个文件最重要）
  
• 【assets目录】 资源目录，存储静态资源的 比如图片
• 【environments目录】
  环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
• 【index.html】 整个应用的根html，程序启动就是访问这个页面
• 【main.ts】 整个项目的入口点，Angular通过这个文件来启动项目
• 【polyfills.ts 】主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
• 【styles.css 】主要是放一些全局的样式
• 【tsconfig.app.json】 TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
• 【tsconfig.spec.json】 不用管
• 【test.ts】 也是自动化测试用的
• 【typings.d.ts】不用管

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

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

1. app.module.ts

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

2. 自定义组件

参考资料：https://cli.angular.io/

创建组件：

ng g component components/header

表示创建了一个名为components的文件夹，在文件夹里创建了名为header的组件。

组件内容详解：

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() { /*初始化加载的生命周期函数*/
  }
}

三、 绑定数据

Angular 中使用{{}}绑定业务逻辑里面定义的数据：

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