Angular的项目结构
前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧。
下面使我们项目的整体结构,包括node的模板、src资源文件以及配置文件等。
下面是根目录文件夹内的文件用途:
文件 |
用途 |
---|---|
|
在 |
|
|
|
给你的编辑器看的一个简单配置文件,它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支持 |
|
一个 Git 的配置文件,用来确保某些自动生成的文件不会被提交到源码控制系统中。 |
|
Angular CLI 的配置文件。 在这个文件中,你可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。 要了解更多,请参阅它的官方文档。 |
|
|
|
给Protractor使用的端到端测试配置文件,当运行 |
|
项目的基础文档,预先写入了 CLI 命令的信息。 别忘了用项目文档改进它,以便每个查看此仓库的人都能据此构建出你的应用。 |
|
TypeScript 编译器的配置,你的 IDE 会借助它来给你提供更好的帮助。 |
|
给TSLint和Codelyzer用的配置信息,当运行 |
src文件夹:你的应用代码位于 src
文件夹中。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。
下面是这些文件的作用:
文件 |
用途 |
---|---|
|
使用 HTML 模板、CSS 样式和单元测试定义 |
|
定义 |
|
这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。 |
|
这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址,或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些,CLI 都替你考虑到了。 |
|
一个配置文件,用来在不同的前端工具之间共享目标浏览器。 |
|
每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。 |
|
这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI 会自动把所有 |
|
给Karma的单元测试配置,当运行 |
|
这是应用的主要入口点。 使用JIT 编译器编译本应用,并启动应用的根模块 |
|
不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本(polyfill)能把这些不同点进行标准化。 你只要使用 |
|
这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。 |
|
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。 |
|
TypeScript 编译器的配置文件。 |
|
额外的 Linting 配置。当运行 |
Angular的项目结构的更多相关文章
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular 5项目
Angular 5项目 如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angu ...
- angular2.0入门---webStorm创建angular CLI项目
创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...
- Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构
目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...
- 一文说通Blazor for Server-Side的项目结构
用C#代替Javascript来做Web应用,是有多爽? 今天聊聊 Blazor. Blazor 是一个 Web UI 框架.这个框架允许开发者使用 C# 来创建可运行于浏览器的具有完全交互 UI ...
- ABP 适用性改造 - 精简 ABP CLI 生成的项目结构
Overview 不管是公司或者个人都会有不同的开发习惯,通过建立项目模板,既可以使开发人员聚焦于业务功能的开发,也可以在一定程度上统一不同开发人员之间的开发风格.在使用 ABP 框架的过程中,对于 ...
- 认识ASP.NET 5项目结构和项目文件xproj
ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...
- 【完全开源】知乎日报UWP版:项目结构说明、关键源代码解释
目录 说明 项目结构 关键代码 演示视频 说明 上一篇博客将源码放出来了,但是并没有做过多的介绍,所以如果自己硬看可能需要花费很长的时间,尤其这些代码并不是自己写的.项目不算复杂但是也不算简单,这篇文 ...
随机推荐
- 【Maven】---Nexus私服配置Setting和Pom
maven---nexus私服配置setting和pom 上一遍博客已经在linux服务器上,搭建好nexus私服了,博客地址:Linux搭建Nexus3.X私服 现在就需要配置setting.xml ...
- Django知识点
一.Django pip3 install django C:\Python35\Scripts # 创建Django工程 django-adm ...
- asp.net core 系列 19 EFCore介绍
一.概述 目前最新的EF Core版本是3.0,最稳定的EF Core版本是2.2.EF Core 的计划与 .NET Core以及 ASP.NET Core 版本同步.EF Core 是一个 .NE ...
- 如何判断DataSet里有多少个DataTable
dataset.table.count sda.fill(ds,"table"); //这里是在ds里新建了一个表,叫table,注意是新建,多次执行会报错,实际使用时,可以用co ...
- 我们知道CDN护航了双11十年,却不知道背后有那么多故事……
情不知如何而起,竟一往情深.恰如我们.十年前,因为相信,所以看见.十年后,就在眼前,看见一切. 当2018天猫双11成交额2135亿元的大屏上,打出这么一段字的时候,参与双11护航的阿里云CDN技术掌 ...
- 理解 docker 容器中的 uid 和 gid
默认情况下,容器中的进程以 root 用户权限运行,并且这个 root 用户和宿主机中的 root 是同一个用户.听起来是不是很可怕,因为这就意味着一旦容器中的进程有了适当的机会,它就可以控制宿主机上 ...
- 分享几个有趣的Linux命令
前言 最近工作比较忙,没时间写博客,这次介绍几个有趣的Linux命令. 命令:sl 当你使用这个命令时会看到一辆小火车从你的屏幕经过.亲测! 安装命令如下: yum -y install sl 执行效 ...
- 使用codis-admin搭建codis集群
目的 在Redis Codis 部署安装的文章中,介绍了通过fe在web上搭建codis的基本步骤和方法,也介绍了codis-admin的相关说明,为了更好的熟悉codis-admin的使用,本文将使 ...
- Windows 10 安装 ElasticSearch
Java环境准备 可以下载oracle最新的JDK,作为C#程序员,支持一下微软的Mobile OpenJDK,构建一下Java环境. 微软的OpenJDK是针对Xamarin.Android的SDK ...
- C#委托与事件学习笔记
委托事件学习笔记 本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...