初探AngularJS6.x---目录结构说明

Posted 2020-12-29

初探AngularJS6.x---目录结构说明

---

　　在上一篇中我们进行了AngularJS6.x的基本环境搭建,并试着建了一个项目conk-out,今天我们来在这个项目上进行一些扩展.

　　我们的项目代码包括angular的组件,模版,样式文件,图片还有其他我们自己写的都集中在src里,这个跟java是一样的,这个目录以外的一些目录和文件则是帮助我们构建项目用的,所以可以暂时不用管它.可以使用treesrc/命令以树的形式展示出src目录下的所有目录及文件,如下图所示:

　　在app里我们看到了一系列和app相关的东西,如果查看里面的代码我们会发现,他们主要用html模版,Style文件,构建了一个appComponent,当然还有一个单元测试.这里的组件可以说是一个根组件,可以理解为项目从这里开始,其他的组件都是基于appComponent的,我更倾向于把他成为一个画布或入口.app目录里的app.module.ts,他告诉Angular如何去封装或渲染我们的应用程序,现在我们看,会发现他里面只声明引入了一个app.component,后面随着业务的变化,我们会声明引入越来越多的组件.

　　在assert里,这里我们可以放一些图片或其他文件,方便我们在构建项目时使用.

　　browserslist里主要存放一些在不同前端工具中进行共享的目标浏览器的配置文件.

　　Environments这里主要是针对不同的环境(开发/测试/生产)产生的不同配置,他会在我们构建的时候进行动态的替换.这个相当于我们在Java里面使用maven的profile,不同的环境就激活不同的profile.

　　Favicon.ico:网站title上的小图标

　　Index.html:项目中的首页,在构建的时候,angular会给我们自动添加js和css,一般情况下不需要我们手动去编辑.

　　Karma.conf.js:针对karmatestrunner的配置,我们可以使用ngtest来运行

　　Main.ts:即是使用JITCompiler编译项目的入口,同时也是在浏览器里运行时加载项目根模块的入口.我们也可以通过在构建和启动项目时追加—aot参数指定编译器为AOPCompiler,并不需要改动任何代码.

　　Polyfills.ts:不同的浏览器对web标准的支持程度是不同的.Polyfills帮助我们使这些不同的地方标准化.

　　Styles.css:这是全局的css,这里的改动会影响到整个app的样式.

　　Test.ts:单元测试的入口,这里可能有些惯例性的配置会显得比较陌生,一般我们不会编辑这个文件.

　　Tsconfig.{app|spec}.json:TypeScript编译器为AngularApp和单元测试(tsconfig.spec.json)准备的配置

　　Tslint.json:Linting帮助我们保持代码一致,而tslint.json则是为TSLint和Codelyzer准备的一些附加配置.

　　今天的目录说明就讲到这里.