Angular初探（1-4）

Angular工程目录结构介绍

上一节我们初始化一个Angular工程，目录结构如下：
我这里多了一层文件，但是…不要在意这些细节，就当他没有好了。

1. e2e
   端到端的自动化测试文件，略过。
2. node_modules library root
   这个文件夹里包含的都是我们项目所依赖的包
3. src
   这个就是整个工程的核心所在，我们就是在这里大显身手，开发我们的应用，稍后详细说下。
4. .gitignore
   我们的工程若是进行版本控制，这里面罗列的就是那些不需要加入版本控制的文件。
5. angular.json
   此文件是angular工作空间的配置文件，版本号啊，工作路径啊之类的
6. package.json
   这个就是我们onlineAuction工程的配置文件，我们看看他的样子吧！
   
   懵逼树上懵逼果，懵逼树下你和我！这都是些什么鬼啊？
   且慢，看我一一道来。
   name :我们的工程名
   version：工程版本号
   scripts：npm命令脚本，例如当我们执行npm run start(第二行"start": “ng serve”)，它便会执行ng serve来启动服务器
   private：设置为 true，防止我们的包被npm发布
   dependencies：这里就是我们工程依赖的包的配置了，所有依赖被安排的明明白白
   
   npm会根据这里的依赖下载依赖包，依赖包放在哪里呢？机智如你，早已看透会放在第二条的说明文件夹（node_modules library root ）里了吧！
   devDependencies：开发项目所需的依赖，例如脚手架Angular CLI之类的
7. package-lock.json
   简单说来，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
8. README.md文件
   项目的开发文档说明
9. tsconfig.json
   typescript编译器的配置
10. tslint.json
    语法检查配置

src目录文件说明

先来看下src目录结构：

跟外面一层差不多是吧！我们也来说明以下，app文件夹同样放到后面说：
（1）assets：资源文件夹，放我们的图片资源啊之类的
（2）环境配置文件夹

配置我们的开发环境、生产环境、测试环境…
（3）browserlist：低版本浏览器兼容配置文件
（4）favicon.ico：

就是前面的Google、百度的小图片，最好给你的网站一个易于标识的icon哟～
（5）index.html：程序要打开的html页面，起始入口模板html
（6）karma.config.js：测试文件
（7）main.ts 、polyfills.ts：略过（好吧，我也不知道啥玩意）
（8）styles.css：你懂的，应用的全局样式，公用的样式可以写在这里
（9）test.ts：测试文件
（10）下面三个文件同外层的一样，不过外层的是对于整个应用来说，这个是对于这个具体的源码来说的

（11）来说说app文件夹

整个app文件夹就是一个模块（module）。除去最后一个模块文件“app.module.ts”，其余四个合并起来就是一个组件（component）。
（11-1）app.component.css：app这个组件的样式表
（11-2）app.component.html：app这个组件的html文件
（11-3）app.component.spec.ts：app这个组件的描述（通常是不用理会的）
（11-4）app.component.ts：app这个组件的脚本文件（相当于JavaScript）
（11-5）app.module.ts：定义app这个模块，这个根模块会告诉 Angular 如何组装该应用。

好了，我们对这些文件简单的做了下描述，百度的累死我了（羞愧捂脸逃走…）下一节，我们来看下Angular是如何启动的，工作机制是什么样子的，Angular的起始