本教程基于Angular7,更新时间2018-11-05.

1. 项目根目录如下：

  • e2e文件夹：end to end，测试目录，主要用于集成测试。
  • node_modules：项目的模块依赖目录。
  • src：项目的源代码。
  • .editorconfig：编辑器配置文件。
  • .gitignore: git版本控制时忽略的文件（此文件中配置的文件不纳入版本控制）。
  • .angular.json：angular配置文件。
  • .package-lock.json：锁定项目依赖模块的版本号。
  • .package.json：配置项目依赖模块。
  • .README.md：项目说明文件
  • .tsconfig.json：typescript配置文件。
  • .tslint.json：typescript代码检测配置文件。

2. src目录展开如下图：

  • app：项目的主组件目录。
  • assets：项目的资源目录。
  • environments：项目的环境配置目录
  • index.html：主页面。
  • karma.conf.js：karma测试的配置文件。
  • main.ts：脚本入口文件。
  • polyfills.ts：兼容性检测配置文件。
  • style.css：全局css样式文件。
  • test.ts：单元测试入口文件。

3. app目录展开如下图：

  • app-routing.module.ts：组件路由配置文件。
  • app.component.css：组件私有css样式文件。
  • app.component.html：组件的模板文件。
  • app.component.spec.ts：组件的单元测试文件。
  • app.compenent.ts：组件typescript配置文件。
  • app.module.ts：组件模型配置文件。

4. 文件加载顺序

  1. 首先打开项目脚本的入口文件main.ts文件，内容如下：

    import { enableProdMode } from '@angular/core';
    
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
    
import { environment } from './environments/environment';

if (environment.production) {
    
	enableProdMode();
    
}

platformBrowserDynamic().bootstrapModule(AppModule)
    
	.catch(err => console.error(err));

    其中的语句 import { AppModule } from './app/app.module';表示引用了AppModule,路径是./app/app.module,就是app目录下的app.module.ts文件。

  2. app.module.ts的文件内容如下：

    import { BrowserModule } from '@angular/platform-browser';
    
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
    
import { AppComponent } from './app.component';

@NgModule({
    
  declarations: [
    
    AppComponent
    
  ],
    
  imports: [
    
    BrowserModule,
    
    AppRoutingModule
    
  ],
    
  providers: [],
    
  bootstrap: [AppComponent]
    
})
    
export class AppModule { }

    其中的import { AppComponent } from './app.component'表示引用了AppComponent组件，即为app目录下的app.component.ts文件。

  3. app.component.ts文件内容如下：

    import { Component } from '@angular/core';

@Component({
    
  selector: 'app-root',
    
  templateUrl: './app.component.html',
    
  styleUrls: ['./app.component.css']
    
})
    
export class AppComponent {
    
  title = 'app';
    
}
    • selector定义了选择器，页面会通过这个名字来引用组件。
    • templateUrl定义了模板文件，就是当前目录下的app.component.html文件。
    • styleUrls定义了模块的样式文件，即当前目录下的app.component.css文件。

  4. index.html文件内容如下：

    <!doctype html>
    
<html lang="en">

<head>
    
	<meta charset="utf-8">
    
	<title>Media</title>
    
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
    
	<link rel="icon" type="image/x-icon" href="favicon.ico">
    
</head>

<body>
    
	<app-root></app-root>
    
</body>

</html>

    其中的body标签中的app-root标签即为app.component.ts中定义的选择器名称。

Angular7教程-02-Angular项目目录及基本文件说明的更多相关文章

  1. XamarinSQLite教程Xamarin.iOS项目中打开数据库文件

    XamarinSQLite教程Xamarin.iOS项目中打开数据库文件 以下是打开MyDocuments.db数据库的具体操作步骤: (1)将Mac电脑上的MyDocuments.db数据库移动到W ...

  2. Angular7教程-05-搭建项目环境

    1. 本节说明 本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍,项目使用前端框架是bootstrap.版本v3.3.7,另外需要安装jquery.关于bootstrap ...

  3. [转]Angular项目目录结构详解

    本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...

  4. Angular项目目录结构

    前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20 ...

  5. Angular项目目录

    0.模块介绍和基础知识 https://cloud.tencent.com/developer/section/1489514 1.如下图VSCode-- node_modules 第三方依赖包存放目 ...

  6. angular项目目录结构分析

    详情查看:https://www.angular.cn/guide/file-structure app.module.ts 定义 AppModule, 这个根模块会告诉 Angular 如何组装该应 ...

  7. js配置文件路径和项目目录文件夹位置的一致性

    在js文件引入的时候注意配置文件的路径是否和项目目录中的文件夹位置一致,如果不一致, 浏览器会指出找不到文件404的情况

  8. asp.net 项目目录说明

    Bin 目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本, 分别对应的文件夹为bin/Debug和bin/ ...

  9. django 前端传文件到后台项目目录

    Html端: <form action="/student/upload" method="POST" enctype="multipart/f ...

随机推荐

  1. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  2. windows7x64系统中配置mysql5.7.17为本地开发环境（win2008类似）

    1. 下载mysql压缩包mysql-5.7.17-winx64.ziphttps://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.17-winx64.z ...

  3. [转载]一步一步教你如何在Virtualbox虚拟机中安装Remix

    原文地址:https://bbs.jide.com/forum.php?mod=viewthread&tid=4892 大神请路过-- [准备工具] 1.Virtualbox虚拟机(这个是免费 ...

  4. Docker bridge探索

    作者:ellen.sun链接:http://blog.daocloud.io/docker-bridge/著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早期的二层网络中,bri ...

  5. iOS设计模式 - 策略

    iOS设计模式 - 策略 效果 说明 1. 把解决相同问题的算法抽象成策略(相同问题指的是输入参数相同,但根据算法不同输出参数会有差异) 2. 策略被封装在对象之中(是对象内容的一部分),策略改变的是 ...

  6. 使用.Net访问Office编程接口(PIA和IA的区别)

    在这篇文章里面,我将向大家介绍如何在.Net中访问Office所公开的编程接口.其实,不管是使用哪种具体的技术来针对Office进行开发(比如VSTO,或者用C#编写一个Office Add-in,或 ...

  7. Python学习---Django的基础操作180116

    Django创建数据库操作 django流程之model实例 settigs.py:更改Django2.0.1的配置,更新为之前的路径配置 'DIRS': [os.path.join(BASE_DIR ...

  8. Spring boot整合Swagger

    本文github位置:https://github.com/WillVi/springboot-swagger2-demo 环境准备 JDK版本:1.8 Spring boot版本:1.5.16 Sw ...

  9. HDU 1542 矩形面积并

    推荐阅读这篇文章 这里仅根据上述文章进行一些补充.主要是注意这里线段树点的意义变成了“边”.比如+-----+-----+,看作3个点abc和两条边e1和e2,那么线段树中点a代表e1,点b代表e2. ...

  10. 把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.

    用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com ...