本教程基于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. 【转载】shell实例手册

    原文地址:shell实例手册  作者:没头脑的土豆 shell实例手册 0说明{ 手册制作: 雪松 更新日期: -- 欢迎系统运维加入Q群: 请使用"notepad++"打开此文档 ...

  2. Signal & Slot in Qt

    Try your best to provide an mechanism to implement what you want. 1. All is generated by QT Framewor ...

  3. Intelij IDEA 配置Tomcat时找不到 “Application Server”

    由于公司突然断电,再打开idea的时候,tomcat就消失了.然后在网上搜了一下,没搜到自己乱点了一下. 如图 : plugins >>   application servers Vie ...

  4. 微信小程序一个页面多个按钮分享怎么处理

    首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...

  5. 小程序填坑之路（二）：cover-view

    https://blog.csdn.net/mr_chen95/article/details/79261987 在一些情况下,我们需要对map.video.canvas.camera这些微信小程序的 ...

  6. c#微信开发，使用JS-SDK自定义分享功能，分享朋友圈，分享给朋友等

    如果一个后端开发掌握了微信开发,甚至有微信开发上线项目,这在换工作的时候 还是有竞争力的. 微信开发的资料很多,但是用asp.net c#进行微信开发好像比较少,或者资料不够完整. 使用JS-SDK自 ...

  7. zbrush书法文字硬边雕刻

    方法的重点在与边缘环的操作以及模型网格的数量. 1.通过ZAppLink功能可以把制作的文字书法映射到模型上去. 2.遮罩,按照颜色强度遮罩. 3.分组,按照颜色分组.单独显示文字部分的分组.按Ctr ...

  8. cetnos7下openresty使用luarocks 进行lua的包管理

    先安装一下包管理工具 yum install luarocks lua-devel -y luarocks install lpack ln -s /usr/lib64/lua /usr/local/ ...

  9. 四种Timer的区别和用法

    1.System.Threading.Timer 线程计时器 1.最底层.轻量级的计时器.基于线程池实现的,工作在辅助线程. 2.它并不是内在线程安全的,并且使用起来比其他计时器更麻烦.此计时器通常不 ...

  10. 021.11 IO流 序列流

    序列流:SequenceInputStream特点:流对象有序排列解决问题:将多个输入流合并成一个输入流,将多个源合并成一个源,对于多个源的操作会变简单. 构造函数参数就是输入流,一初始化就合并了多个 ...