初探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准备的一些附加配置.

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