本教程基于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. 文件加载顺序
-
首先打开项目脚本的入口文件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文件。
-
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文件。
-
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文件。
-
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中定义的选择器名称。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|