Angular2 是基于 TypeScript 的前端框架，它的设计目的是帮助开发者快速构建单页应用程序（SPA）。一个应用程序在 Angular2 中被定义为若干组件的集合，而每个组件则由若干指令、服务、样式和模板组成。在本文中，我们将深入探讨一个 Angular2 SPA 应用程序的结构，并提供相关的示例代码以方便读者学习和实践。
目录结构
Angular2 的应用程序通常采用以下目录结构：
-- -------------------- ---- ------- --- ---- - --- ----------- - --- ------------- - --- --------------- - --- ----------------- - --- ---------------- - --- --- - --- --------- - --- ------------- - --- --- - --- ------- - --- ----------- - --- --- - --- ------------- - --- ---------------- - --- ------- --- ---------- --- ------------------
app/：所有应用程序的源代码都应该放在该文件夹中。app/components/：所有的组件都应该放在该文件夹中。app/services/：所有的服务都应该放在该文件夹中。app/models/：所有的模型都应该放在该文件夹中。app.module.ts：这是根模块，它负责定义应用程序的依赖关系。app.component.ts：这是根组件，它负责定义应用程序的外观和行为。main.ts：该文件负责启动应用程序。index.html：Angular2 应用程序的入口文件。systemjs.config.js：该文件定义了应用程序的运行时配置。
app.module.ts
一个 Angular2 应用程序通常包含若干个模块，而 app.module.ts 就是应用程序的根模块。在该文件中，我们需要导入所需的模块，声明所需的组件，并设置应用程序的路由规则。以下是一个简单的 app.module.ts 文件示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -----------------------------------
------ - -------------- - ---- -------------------------------------
------ - ---------------- - ---- -----------------------------------------
-----------
-------- -
--------------
----------------------
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
- ----- ---------- ---------- ---------------- -
--
--
------------- -
--------------
---------------
----------------
--
---------- - ------------- -
--
------ ----- --------- - -在该文件中，我们使用 @NgModule 装饰器来定义 AppModule 类。该装饰器包含以下元数据：
imports：该属性用于导入应用程序所需的模块。在这个例子中，我们导入了BrowserModule和RouterModule。declarations：该属性用于声明应用程序所需的组件。在这个例子中，我们声明了HomeComponent、AboutComponent和ContactComponent。bootstrap：该属性用于定义应用程序的根组件。在这个例子中，我们指定了HomeComponent作为根组件。
app.component.ts
一个 Angular2 应用程序通常有一个根组件，它负责定义应用程序的外观和行为。在 app.component.ts 文件中，我们需要定义一个 AppComponent 类，该类包含以下元数据：
selector：该属性用于指定使用该组件时要在 HTML 模板中使用的名称。templateUrl：该属性用于指定 HTML 模板的位置。styleUrls：该属性用于指定 CSS 样式表的位置。
以下是一个简单的 app.component.ts 文件示例代码：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent { }在该文件中，我们定义了一个名为 AppComponent 的组件，该组件对应的 HTML 模板和 CSS 样式表分别为 app.component.html 和 app.component.css。我们使用 @Component 装饰器来声明 AppComponent 类。
index.html
index.html 是 Angular2 应用程序的入口文件。在该文件中，我们需要包含所需的所有 JavaScript 和 CSS 文件。
以下是一个简单的 index.html 文件示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
--------- -----------
----- --------------------------- -----------------
------- -----------------------------------------
------- --------------------------------------------------
------- ---------------------------------------------
------- ----------------------------------
--------
--------------------------------------------- ------------------- ---
---------
-------
------
---------------------------
-------
-------在该文件中，我们包含了 style.css、jquery.min.js、bootstrap.min.js 和 systemjs.min.js 文件，并使用 main.ts 文件作为应用程序的入口文件。我们使用 body 标签来声明应用程序的根组件 <my-app>。
main.ts
main.ts 文件是应用程序的入口文件。在该文件中，我们需要使用 Angular2 模块加载器 System 来加载应用程序的根模块 AppModule。
以下是一个简单的 main.ts 文件示例代码：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);在该文件中，我们使用 platformBrowserDynamic() 方法来创建 Angular2 平台，然后使用 bootstrapModule() 方法启动应用程序。
总结
本文对 Angular2 SPA 应用程序的结构进行了详细的介绍。我们深入探讨了 app.module.ts、app.component.ts、index.html 和 main.ts 四个文件的作用和使用方法，并提供了相关的示例代码。读者可以根据本文提供的指导，快速上手 Angular2 并构建自己的SPA应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5149fd20074f47a4549e9