前言
在前端开发中，我们会经常用到 Yeoman（一款脚手架工具），generator-av 就是一个为 AngularJS 开发定制的 Yeoman generator。它让我们可以在 AngularJS 项目中快速构建出标准化的代码架构。本篇文章将详细介绍如何使用 generator-av。
安装 generator-av
使用 generator-av 之前，需要先安装 Yeoman。
npm install -g yo
接着，安装 generator-av。
npm install -g generator-av
使用 generator-av
创建项目
创建一个新项目非常简单：
yo av
执行该命令后，将会调用 generator-av 创建一个 AngularJS 项目。需要注意的是，该命令将会在当前目录下创建一个新的项目目录。如果想要在自定义的路径下创建项目，可以使用命令：
yo av <project-name>
创建子模块
在 generator-av 中，子模块是指 AngularJS 的模块（module）。创建子模块也非常简单：
yo av:module <module-name>
其中，<module-name> 表示子模块的名称。执行上述命令后，将会创建一个以 <module-name> 为名的目录，其中包含一个 module.js 文件以及一个空的 template.html 文件。
创建组件
在 generator-av 中，组件是指 AngularJS 的 directive。创建组件也非常简单：
yo av:directive <directive-name>
其中，<directive-name> 表示组件的名称。执行上述命令后，将会创建一个以 <directive-name> 为名的目录，其中包含一个以同名 JS 文件、HTML 文件以及测试文件的文件组成。
开始开发
创建完子模块和组件后，接下来就可以愉快地进行开发了。在开发中，需要做到以下几点：
- 子模块和组件需要手动注入到主模块中。
- 每个组件需要手动定义其
templateUrl、restrict等属性。 - 组件的测试需要手动编写。
事实上，generator-av 已经帮我们预设了一些模板，使用模板加速开发效率，同时可以避免开发过程中出现的一些不必要的 bug。
比如，从 templates 目录中，我们可以找到子模块和组件的模板。需要注意的是，子模块的模板中包含两个变量：
$moduleName：子模块名称，需要手动替换。$componentName：组件名称，在创建组件时已自动替换。
同理，组件的模板文件也包含了组件名称与相关信息。在各自的目录下，并没有一个叫做 *.tpl.js 的文件，因为使用 Yeoman 创建组件时，已经创建了一个名为 <directive-name>.tpl.js 的文件；然后，使用 Gulp 执行 templateCache 任务时，就会将以上 templates 目录中的文件编译进 templates-angular.js 中。这样做不仅可以避免不必要的 HTTP 请求，同时也可以提高性能。
下面是一个组件的例子：
-- -------------------- ---- -------
----------- -
-- ----- -----------------------------
-------
-------------------
------------------------- -------------
-------- ------------- -
--- --------- - -
--------- ----- -- ---- --- ------- --- ----
------------ ------------------------------------------------
------ --
--
------ ----------
-
-----上述代码中，restrict: 'EA' 表示指令可以作为元素或属性使用，在 HTML 中使用 <my-directive></my-directive> 可以生成该组件。
使用以上模板，再加上参考 AngularJS 的官方文档，就可以愉快地开始令人惊叹的开发了。
总结
本文分别介绍了 generator-av 的安装、使用方法及相关注意点。在实际开发中，使用 generator-av 可以有效提高前端开发效率，创建标准的代码架构，以及简化项目维护工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ea81e8991b448d797e