generator-ng-sf 是一个生成 AngularJS 项目骨架的 Yeoman generator，Yeoman 是一个基于 Node.js 的脚手架工具，可以帮助快速搭建项目的基础结构，提高开发效率。generator-ng-sf 封装了 AngularJS 最佳实践，使用起来非常方便，本文将对其使用方法进行详细介绍。
安装
首先，需要安装 Yeoman，执行如下命令：
npm install -g yo
然后，安装 generator-ng-sf：
npm install -g generator-ng-sf
创建项目
执行如下命令：
yo ng-sf
选择你需要的特性（Features），例如：Angular Material、UI Router、Bootstrap，以及样式表（Styling），例如：Sass、Less。根据提示进行操作，最后就可以创建出一个基于 AngularJS 的项目骨架了。
目录结构
执行上述命令后，generator-ng-sf 会生成如下目录结构：
-- -------------------- ---- -------
-
--- ------------
--- ----------
--- ----------------
--- ------------
--- ------------
--- ---
- --- ------
- --- ------
- - --- ----------
- - --- -------
- - --- --------
- --- ----------
- --- ----
- - --- -----------
- - --- ----------
- - --- --------
- - --- -----
- --- ------
- - --- --------
- --- ----------
--- ----
--- ---
- --- ------------
--- -------------app目录：存放项目的源代码；app/common目录：存放通用的指令、过滤器、服务；app/components目录：存放可重用的组件；app/home目录：存放模块代码；app/styles目录：存放样式表；test目录：存放测试代码。
Grunt 任务
generator-ng-sf 集成了一些 Grunt 任务，可以通过执行如下命令来运行：
grunt serve
该命令会启动内置 Web 服务器，并在浏览器中打开项目首页。
此外，还提供了构建任务，执行如下命令：
grunt build
该命令会将项目打包成一个压缩的静态文件，用于发布到生产环境。
示例代码
下面是一个简单的 AngularJS 控制器示例：
-- -------------------- ---- -------
-- ---------------------------------------
----------- -
---- --------
-------
-------------------
----------------------------- ----------------
---------------------- - ----------------
-------- --------------------------- -
--- -- - -----
-------- - ---
-----------
-------- ---------- -
---------------------------------------------- -
-------- - --------------
---
-
-
-----以上就是 generator-ng-sf 的使用教程，通过使用该工具，可以快速搭建 AngularJS 项目骨架，遵循最佳实践，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a62