使用Angular CLI新建一个最简单的Angular项目
夜晚闲来无事，来分析一个使用Angular CLI创建的最简化的Angular项目代码。在这之前，我需要确保电脑上搭建好了Angular的开发环境，其中包括以下几项：
- 首先，电脑上安装Node.js和npm。npm是Node.js下的包管理器，现在我们安装Node.js之后一般就默认完成了对应版本的npm。安装完成后在终端中运行
node -v、npm -v命令可以分别检查Node.js和npm的版本，Angular需要Node.js V10.9及其以上的版本。 - 使用
npm install -g @angular/clo命令安装Angular CLI，Angular CLI是Angular的脚手架，可以帮助我创建项目、生成应用等（测试、打包、部署等），其中-g说明是全局安装。 - 使用
ng new my-app命令创建项目，其中my-app是我新创建的Angular项目的名字，ng new命令会新建一个my-app的文件夹，并在这个文件夹中初始化项目，在初始化项目的过程中，命令行窗口会出现一些提示，例如是否使用angular routing、使用那种类型的CSS文件等，这时候根据自己的实际需求进行选择就可以 - 使用
ng serve命令运行项目。下面是我刚才创建的新项目运行之后的页面：
首先要了解一下Angular中组件和模块的概念
Component，组件是angular开发中最常用的一个概念，一个组件通常有几个同名的、不同类型的文件组成，其中.ts文件是一个组件最基本的文件，再加上HTML模板文件和层叠样式表文件，就组成了一个完整的组件，例如下面我自定义的这个批次组件：
ts文件中的主要内容是一个类，这个类中定义了这个组件涉及到的数据和逻辑，同时，通过@Component装饰器与对应的HTML模板和CSS文件相关联。
如下图所示，在@Component装饰器中，selector的值是angular cli创建当前组建时，根据组件所在的路径以及组件名称定义的一个唯一标识符，如果我们后续要在项目中的其他地方引用当前这个组件时，可以使用这个标识符。
templateUrl的值是当前组件类对应的模板文件，除了使用templateUrl与外部HTML文件进行关联之外，一些简单的模板文件的代码也可以使用template字段在当前文件中嵌入HTML代码：
@Component({
selector: 'app-exam-batch',
template: '<h1> hello world!</h1>'
})
styleUrls的值是一个数组，这个数组中的元素是当前组件引用的成叠样式表文件，同理，也可以使用styles嵌入一些简单的层叠样式表。
按照官方的说法，组件是angular的主要构造块，说白了，整个angular项目都是由一个又一个的组件组合起来的。日常使用中，一个页面我通常定义一个或者几个组件来完成。
Module，一个使用NgModule装饰器修饰的类，通常就是一个模块，NgModule为一系列组件声明了编译的上下文环境，通常我会把几个业务逻辑关联比较紧密的组件放在一个模块中，形成一个功能单元。
上面的截图是一个根模块，可以看出它本质上也是一个类，只不过使用@NgModule装饰器进行修饰，这样在编译的时候编译器就能知道它是一个模块。
分析my-app项目的代码
通过Node.js创建的项目，一般在根目录下会有一个package.json文件，定义了这个项目所需的各种模块，以及项目的配置信息，比如名称、版本、如何启动项目、运行脚本等元数据。所以我在使用VS Code打开my-code项目之后，首先在项目根目录下找到了这个文件。
根据package.json中的配置，我在终端中执行ng serve成功运行了项目。
除了package.json之外，Angular项目还有另一个angular.json文件也需要先了解一下。这个文件是用于管理angular项目环境的，其中配置项稍微有点多，这里挑出几个比较关键的记录一下：
除了package.json和angular.json这两个关键文件之外，项目根目录下还有两个文件夹需要先来了解一下：src、node_modules。
其中，node_modules这个文件加下存放的是项目开发需要用到的各种外部依赖，src目录下存放的是项目业务逻辑代码，angular中的module和component等文件都存放在这个文件夹下。
根据上面的angular.json 文件可知，当前项目的入口文件是main.ts文件，
import {
enableProdMode } from '@angular/core';
import {
platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
AppModule } from './app/app.module';
import {
environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic这个函数是浏览器平台的工厂函数,执行会返回浏览器平台的实例，然后对根模块进行初始化。
项目初始化完成之后，第一个加载的模板文件是src/index.html文件，下面就是这个文件中的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
一眼看过去发现这就是一个很简单的html结构树，除了 <app-root></app-root>，有些面生，其他的所有元素都很好理解， <app-root></app-root>是什么？
前面说组件的时候提到过，angular是由一个又一个的组件组建起来的，我们自定义的组件可以通过@Component装饰器中的selector字段的值进行调用，这里的 <app-root></app-root>就是我们创建项目的时候所生成的根组件的selector:
同时，我把根组件中的模板文件改成了最简单的hello world，重新运行后，页面就变成了这个样子：
