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

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

初探AngularJS6.x---目录结构说明相关推荐

初探AngularJS6.x---目录结构说明 1
2019独角兽企业重金招聘Python工程师标准>>> 初探AngularJS6.x---目录结构说明在上一篇中我们进行了AngularJS6.x的基本环境搭建,并试着建了一个项目 ...
简述 Linux 文件系统的目录结构
Linux文件系统结的结构是树形结构,其入口从/开始,了解Linux文件系统的结构,对于我们需要掌握的基础知识点之一. 1.什么是文件系统: 请参见:<Linux 文件系统概述> 2.文件 ...
Linux目录结构及解释
相关文章推荐 ★构建小型Linux跟文件系统镜像(Ext2 或 Ext3) ★linux内核源码目录结构 ★简述 Linux 文件系统的目录结构 ★Linux 内核源代码的结构 ★linux文件系统的 ...
android目录结构
Android系统原理及开发要点详解第1章 Android系统概述第2章 Android系统开发综述第3章 Android的Linux内核与驱动程序第4章 Android的底层库和程序第5章 ...
Go 学习笔记（84）— Go 项目目录结构
1. 目录规范一个好的目录结构至少要满足以下几个要求. 命名清晰:目录命名要清晰.简洁,不要太长,也不要太短,目录名要能清晰地表达出该目录实现的功能,并且目录名最好用单数.一方面是因为单数足以说明这 ...
Udacity机器人软件工程师课程笔记（九）-ROS-Catkin包、工作空间和目录结构
Catkin包和工作空间 1.Carkin包简介 Catkin是ROS的官方构建系统,也是原始ROS构建系统rosbuild的继承者.catkin结合了CMake宏和Python脚本,在CMake的正 ...
Platform Builder 5下WinCE 5.0目录结构
Platform Builder 5下WinCE 5.0目录结构 Platform Builder 5已经自带WinCE 5.0,安装过程会指定WinCE 5.0的安装路径,默认为X:\WINCE50 ...
Tomcat软件的目录结构、作用
要了解Tomcat的目录结构,首先要知道什么是Tomcat? Tomcat是一个Apache软件基金会Jakarta项目中的核心项目:是一个免费的开放源代码的轻量级Web应用服务器:运行时占用资源小, ...
CentOS目录结构超详细版
最近初学Linux 对linux的目录产生了很多疑问,看到这篇文章,让我顿时对目录有了一个清晰的认识!推荐给大家! ------------------------------------------ ...

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

初探AngularJS6.x---目录结构说明相关推荐

最新文章

热门文章