npm 包 generator-froko-angular-seed 使用教程
简介
Generator-froko-angular-seed 是一款基于 AngularJS 的项目脚手架搭建工具。使用它，可以方便地快速创建一个基于 Angular 的单页应用程序。
安装
首先需要安装 Node.js。安装完成后，在终端中输入以下命令，全局安装 Yeoman:
npm install -g yo
然后安装 generator-froko-angular-seed：
npm install -g generator-froko-angular-seed
使用
在命令行中进入要创建项目的目录，输入以下命令：
yo froko-angular-seed
就可以按照提示设置项目的名称、版本、描述等信息。最终生成的项目结构如下：
-- -------------------- ---- ------- ------------- --- ---- - --- ------- - --- -------- - - --- ------------ - - --- ----------- - - --- --------- - - --- ------- - --- ------- - - --- --------- - --- ------ - --- --------- --- ---------- --- ------------ --- ------------ --- ---------
其中，app 目录是项目源代码的根目录，bower.json 是 bower 安装包的配置文件，Gruntfile.js 是 Grunt 的配置文件，package.json 是 npm 的配置文件。README.md 是项目的说明文件。
集成的库
generator-froko-angular-seed 集成了以下的库：
- AngularJS - MVVM 框架
- UI Router - 客户端路由
- Bootstrap - UI 组件库
- Font Awesome - 图标库
- Angular Translate - 多语言支持
- Angular Mocks - 单元测试
Grunt 命令列表
在项目的根目录，可以使用以下的 Grunt 命令：
grunt serve // 启动开发服务器 grunt build // 构建发布包 grunt test // 运行单元测试
开发流程
使用 generator-froko-angular-seed 开发一个 AngularJs 的单页应用程序，流程如下：
- 在
app/views目录下创建 HTML 文件，在其中编写页面结构。 - 创建对应的 JavaScript 控制器，并在
app/scripts/controllers目录下编写。 - 在
app/styles目录下创建样式文件，使用 Sass。 - 构建前台静态资源时，将样式以及 controller 引入到
app/index.html文件中。 - 进行开发时，使用
grunt serve启动开发服务器进行实时预览修改。 - 将代码推送到版本库中，使用
grunt build构建发布包，部署应用程序。
示例代码
这里提供一个简单的示例代码：
HTML：
<div ng-controller="UserCtrl as user">
<h2>{{user.title}}</h2>
<p>Hello, {{user.name}}!</p>
</div>JavaScript:
app.controller('UserCtrl', function() {
this.title = 'User Info';
this.name = 'John';
});Sass:
@import "bootstrap/scss/bootstrap.scss";
$brand-primary: #f00;
h2 {
color: $brand-primary;
font-size: 2em;
}总结
generator-froko-angular-seed 具有快速搭建 Angular 应用程序的功能，在开发过程中能够提高开发效率。同时它也能让开发者更加注重项目的结构、代码规范以及测试与维护，这些都是作为一个专业的前端开发者不可或缺的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b0b