本教程基于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. 主要看思路：区域数据去重 + JavaScript一次性展示几万条数据实例代码

    近期做1功能,Gis地图 基于百度地图api , 会遇到的问题的, 如后台接口给的数据很多,大几千上万的,如果拿了数据直接渲染dom ,这滋味爽爽的. 再遇上 客户端浏览器悲催的,这卡顿就来了... ...

  2. 利用Vagrant完成开发环境配置

    作者:astaxie链接:https://github.com/astaxie/go-best-practice/blob/master/ebook/zh/01.0.md著作权归作者所有.商业转载请联 ...

  3. 为什么说对象字面量赋值比new Object()高效？

    http://www.cnblogs.com/mushishi/p/5811743.html

  4. .net core系列之《新一代的配置系统Configuration在支持多数据源，热更新，层级化方面代码快速实践》

    在我们之前.Net Framework的项目中,配置文件是WebConfig或AppcConfig文件,而当我们想要添加我们自定义的节点时,还需要在这个文件中的section中定义我们自定义的节点,这 ...

  5. [翻译] JSAnimatedImagesView

    JSAnimatedImagesView 本人测试的效果: Description:描述 Easy to use UIView subclass to quickly add a cool anima ...

  6. JFinal启动报错：Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/Connector

    - 错误: Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/ ...

  7. 10G client连接数据库

    tnsnames.ora文件中的名字一定要顶格写(前面不留空格),不然连接时会如下报错. 已使用的参数文件:F:\oracle\product\10.2.0\client_1\network\admi ...

  8. mysql-存储过程（转载）

    本来想自己写存储过程的,但是看到别人写的很全面,就直接转载过来了. 转自(http://www.cnblogs.com/exmyth/p/3303470.html) 14.1.1 创建存储过程 MyS ...

  9. python不用正则过渡括号

  10. Appfuse搭建过程（下源代码不须要maven，lib直接就在项目里（否则痛苦死！））

    什么是Appfuse:AppFuse是一个集成了众多当前最流行开源框架与工具(包含Hibernate.ibatis.Struts.Spring.DBUnit.Maven.Log4J.Struts Me ...