本教程基于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. 代码积累-Common

    新建Common类库 /// <summary> /// string的扩展 /// </summary> public static class StringExt { // ...

  2. .NET开源论坛MvcForum推荐

    MvcForum算是Asp.net中开源论坛佼佼者之一.主要使用ASP.NET MVC 5 &Unity & Entity Framework 6,有较强的可撸性.是论坛开发者的不二之 ...

  3. MUI框架-08-窗口管理-创建子页面

    MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:ht ...

  4. 菜单Menu（AS开发实战第四章学习笔记）

    4.5 菜单Menu Android的菜单主要分两种,一种是选项菜单OptionMenu,通过按菜单键或点击事件触发,另一种是上下文菜单ContextMenu,通过长按事件触发.页面的布局文件放在re ...

  5. 【PHP系列】PHP 7.0新增特性详解

    开始介绍PHP7.0新特性,具体的可以参照官网的介绍,我来挑一些给大家详细讲解下 http://php.net/manual/en/migration70.new-features.php 1. ?? ...

  6. 2.bootstrap安装

    1.下载 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本(或者 http://www.bootcss.com/  中文网) Download Boo ...

  7. C# WinForm窗体及其控件自适应各种屏幕分辨率

    C# WinForm窗体及其控件自适应各种屏幕分辨率 一.说明  我们自己编写程序的界面,会遇到各种屏幕分辨率,只有自适应才能显的美观.实际上,做到这点也很简单,就是首先记录窗体和它上面控件的初始位置 ...

  8. 使用Facebook开源代码FBShimmering封装进度显示的ShimmeCircleView

    使用Facebook开源代码FBShimmering封装进度显示的ShimmeCircleView 效果图: 静态图: 源码: ShimmeCircleView.h 与 ShimmeCircleVie ...

  9. 沉淀再出发:java中的equals()辨析

    沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...

  10. Linux中脚本的使用方法

    Linux中脚本的使用方法 一.前言 关于Linux中的脚本的用法,一直没有时间去好好地总结,正好今天下雨,就好好的整理一下思路吧,其实精通了一门语言,比如C语言,学习其他语言需要的成本是非常少的,同 ...