前言
在前端开发过程中，使用一些工具能够提高开发效率和开发体验，尤其是在项目结构和样板代码方面。generator-alo-ng 是一款可以快速生成 AngularJS 项目的 Yeoman Generator，它为我们提供了统一的项目结构和一些常见的组件。
什么是 Yeoman Generator
Yeoman Generator 是一个我们可以通过命令行在项目目录下创建一个基于模板的项目脚手架工具。Yeoman 官方为 Node.js、Ruby、React 等提供了一些常用的模板，并且支持第三方模板，可以通过 npm i 安装来使用。
generator-alo-ng 的使用
我们可以通过下面的命令全局安装 generator-alo-ng：
npm i -g yo generator-alo-ng
使用下面的命令创建一个新项目，这里将新项目的名字设置为 my-ng-app，需要注意的是这里使用的是 yo 这个命令：
yo alo-ng my-ng-app
选择项目类型和工具
使用上面的命令后，首先会让我们选择项目类型：
AngularJS Application Node Module
这里选择 AngularJS Application，然后我们再选择需要加入的一些工具，包括 Angular 必须的依赖，这里默认都选上：
-- -------------------- ---- ------- ----- --- ---- -- ------- --- ---------- ----- - -------- --- - ---------------- --- - ---------------- --- - ----------------- --- - -------------- --- - ----------------- --- - -------------- --- - ----------------- --- --- ------------
选择文件结构和样式
接下来，选择项目的文件结构和样式：
Which file structure would you like? - Modular structure (recommended) - Traditional structure - Other (customize your own structure)
这里我们选择 Modular structure (recommended)，即推荐的一种模块化的结构。
然后选择样式表：
Which style language would you like to use? - SASS (使用 SASS/SCSS 样式语言) - CSS (使用 CSS 样式表)
这里我们选择 SASS。
配置
在这个步骤中，我们需要填写一些项目的基本信息，包括项目名、作者、描述等。需要注意的是，这里的项目名可以使用 kebab-case 或者 PascalCase 命名法，推荐使用 kebab-case。
配置完成后，会自动安装项目所需的依赖，所以需要连接到互联网。
最后，我们可以进入项目目录并启动服务器：
cd my-ng-app npm start
访问 http://localhost:8080 即可看到生成的项目页面。
代码示例
下面是一个示例代码，展示了使用 generator-alo-ng 生成的项目结构和组件使用方式：
-- -------------------- ---- ------- --------- --- --- - --- ------ - - --- ---------- - - - --- ------ - - - --- -------------- - - - --- ---------- - - - --- ----------- - - - --- --------- - - --- -------- - - - --- ------------------- - - --- --------- - --- ---- - --- ------------ - --- -------- - --- --------- - --- ------- --- ------ - --- ----- - --- ------ - --- ------ - --- --------------- - --- --------- - --- ------ - --- ---------------- --- ---- --- ------------ --- ---------- --- ------------ --- --------- --- ---------
在 app/common/components/navbar 目录下有一个名为 navbar 的组件，使用方式如下：
angular.module('common.components')
.component('aloNavbar', {
templateUrl: 'common/components/navbar/navbar.html',
controller: NavbarCtrl
})总结
使用 generator-alo-ng 可以大大提高 AngularJS 项目的开发效率，同时也可以使得项目代码更加规范化。在使用过程中，需要注意仔细阅读每一步的提示，填写项目基本信息。希望这篇文章可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8e26