angular8教程（1）-了解项目结构

在开始阅读我这个系列教程之前，强烈建议想学习angular框架的先通读一遍中文版官方文档，并且搭建好开发环境。这个系列教程的示例代码会基于我的另一个系列教程Springboot入门教程中的后台代码，所以有条件的话最好先把后台的代码跑起来。
预备环境：Node.js 版本 10.9.0 或更高版本，并且安装了安装 Angular CLI。

首先我们利用angular cli创建一个新项目，在命令行运行ng new angular-schoolmanager-cli
创建的时候有两个需要选择：1. 是否导入angular的route模块，选是，2. 选择样式的文件类型，推荐选择scss，当然也可以用最常见的css。

创建新项目

angular cli是官方的脚手架工具，可以帮助我们自动构建一个基于angular框架的前端项目框架，自动引入了angular相关的各个库。所以等命令行下载完所有依赖库，我们就可以直接用npm start来运行这个项目了。

下面我依然推荐用IntelliJ IDEA来作为开发工具，2019以上的版本对angular的支持很好，可以用快捷的菜单自动创建angular的组件。并且用idea打开我们创建的angular项目之后，可以看到开发工具已经为我们配置好了启动项。

启动配置

然后我们来简单了解一下这个项目结构，这样我们就知道应该从哪开始着手编写代码了。

angular cli项目结构

e2e目录，这个是作为e2e测试时使用的，我们暂时不用看。
node_modules目录，这个目录下放的是下载的依赖库，如果熟悉nodejs的就会知道，nodejs中的npm工具可以根据配置的依赖库名称和版本找寻对应的库并下载到这个目录下面，这个就类似于java中的maven或gradle的自动导入依赖包的功能。

src目录，这个自然就是项目代码的主目录了，这个后面再说。
其余的下面的那些文件其实我们都不用过多关注，那些都是angular cli官方为我们配置好的，不需要修改。唯一需要注意的一个是package.json这个文件，我们可以打开看一下

package.json

我们可以看到，这个文件里面包含了项目名称，版本。scripts是npm命令对应的ng脚本命令，例如
"start": "ng serve"表示npm start命令，对应的是ng server就是启动项目服务器，所以我上面说的是用npm start来启动项目，而官方文档上是用ng serve，用的就是同一个命令。dependencies就是配置的依赖库的名称及版本号，在你运行npm install命令的时候，会根据这里的配置自动下载对应的库，如果需要引入新的库，可以在这里添加之后再运行npm install。devDependencies是开发环境下需要依赖的库，一般不需要特别修改。

再回来看src目录，因为angular官方推荐使用typescript作为标准开发语言，所以这个目录下面的大部分都是typescript的文件。
app目录，是整个项目的核心目录，后面我们需要编码都是在这里面添加修改。这里创建项目的时候默认创建了根模块app，我们下面再分析。
assets，类似于android开发中的assets目录，用来存放一些原始的静态文件，例如图片文件等。
environments，用来配置不同环境的，默认有开发和生产两个环境的配置文件。
index.html，因为angular cli构建的是单页应用，所以只有一个html文件，所有页面都会被渲染到这个html中。
main.ts，项目的主入口，可以看到里面引入了app这个根模块。
styles.scss，全局的样式文件，在这里面写的样式会被应用到整个项目中。
test.ts，单元测试的入口。

再来看app目录，angular项目是模块化（module）的，叫作NgModule，每个项目至少有一个根模块，就是这里的appmodule，我们先看app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里定义了一个AppModule，其中由这几个部分构成
declarations，声明了该模块中的各个组件（component），现在只有一个AppComponent，后续如果创建了新的组件，需要在这里声明。
imports，引入的模块，可以是在这个项目中创建的模块，也可以是引入的第三方库的模块，都在这边引入。
providers，贡献的全局服务，我的理解是不属于组件的其他类别的公共服务，如log的模板。
bootstrap，这里引用一下官方的说法“应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。”

以app.component命名的都是AppComponent这个组件的相关文件，其中
app.component.html是模板视图文件，里面都是用html标签构成的视图，当然除了标准的html标签，angular还支持一些扩展型的标签和语法。
app.component.ts，里面是AppComponent组件的逻辑代码，我们看一下这个代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-schoolmananger-cli';
}

@Component注释代表的是这个类是一个组件，其中
selector表示这个组件应用到html标签时的名称，我们可以看到在index.html中就引入了这个标签。
templateUrl就是这个组件引用的模板文件，即app.component.html。
styleUrls就是这个组件引用的样式文件，即app.component.scss，在这个样式文件中引用的样式只会在该组件中生效，这个文件目前是空的，如果不需要的话也可以删除。
class AppComponent中定义了一个变量title，说明所有关于这个组件的逻辑代码都要在这里添加。app.component.html和app.component.ts的关系就有点类似于android开发中xml布局文件和activity的关系，因为angular同样也是遵循mvc架构模式的框架。
最后还有一个app-routing.module.ts，这个文件是在项目创建时第一个选择路由为是的时候创建的，里面包含了项目的路由模块，这个我们下一篇教程再详细讲述。

这篇教程中我简单介绍了一下整个angular项目的基本结构，挑出了一些需要重点关注的部分做了分析，具体想要更清楚的知道项目的结构内容的还是请参考官方文档项目文件结构