前言
在前端开发中，我们经常需要开发大量类似的页面，如登录页、注册页、主页等等。这些页面大多数功能相同，仅仅是 UI 细节不同。为了方便开发，我们可以将这些公共代码写成一个模板，然后在不同页面通过 Angular 的组件化机制进行重用。这种做法可以大大减少代码量，加快开发效率并提高代码质量。
本文介绍一款名为 ng2-app-template 的 npm 包，它专为 Angular 2+ 设计。使用这个包，你可以快速创建一个基于 Angular 技术栈的 Web 应用，并为其添加路由、模板等基本功能，以减少重复工作的量。
安装
你可以通过 npm 安装 ng2-app-template：
npm install ng2-app-template --save
使用
在安装了 ng2-app-template 后，我们可以通过以下命令创建一个新项目：
ng new my-app --routing --skip-install cd my-app ng2-app-template -i npm install
这里我们通过 Angular CLI 来创建一个名为 my-app 的项目，并启用路由配置。然后进入该项目的根目录并执行 ng2-app-template -i 命令，即可自动安装所需要的组件和样式。最后在执行 npm install 以安装其它依赖项。
配置
在 ng2-app-template 的设计中，我们将在项目中添加一个 app-template 目录，用来存放所有的模板文件。所有的模板文件会被自动引入到项目中。
首先，在项目的根目录下创建一个名为 app-template 的文件夹：
mkdir app-template
在 app-template 下我们可以添加以下文件：
index.html
这是整个应用的入口文件，里面除了一些基本的 HTML 和 CSS 代码外，我们还需要在代码头部引用所需要的 JavaScript 脚本。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- --------- ----- --------------- ---------------------------- ----------------- ------- ------ ------------------------------- ------- -------
app.component.html
AppComponent 是整个应用的主组件，它负责显示整个应用的结构。在 app.component.html 文件中我们可以定义项目的顶层 HTML 结构。
<div class="container"> <router-outlet></router-outlet> </div>
app.module.ts
app.module.ts 文件是整个应用的主模块文件。我们在这里定义应用中需要引用的 Angular 的基本模块以及组件。一般情况下，这个文件可以保持不变。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -组件文件
在 app-template 目录下还可以添加一系列的组件文件，用来定义不同的页面或 UI 元素。
例如，我们可以定义一个名为 login 的组件，其中包含了一个简单的表单用来验证用户登录信息。
ng g component login --flat --module=app.module.ts
上面的命令可以自动生成 login 组件的代码，并将其添加到 app.module.ts 文件中。组件的相关文件会被自动放入 src/app 目录中，我们可以在这些文件中添加 HTML、CSS、TypeScript 代码以实现真正的业务逻辑。
总结
在本文中，我们介绍了 ng2-app-template 这款 npm 包的使用方法及详细步骤。通过使用 ng2-app-template，我们可以快速创建基于 Angular 2+ 技术栈的 Web 应用，并为其添加路由、模板等基本功能，以减少重复工作的量。
有了 ng2-app-template 的帮助，我们可以更加专注于业务代码的编写，提高开发效率，提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573081e8991b448d4230