npm 包 generator-ng-js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

当我们学习前端开发时, 经常会用到 AngularJS 这个著名的 MVVM 框架。虽然 AngularJS 文档十分齐全，但是新手初学 AngularJS 可能有些吃力，前端开发者可以通过学习其他开发者写的代码、使用其他开发者开源的代码来快速进入工作角色。而生成器（Generator）是自动化构建前端开发环境的工具，npm 包 generator-ng-js 大大简化了 AngularJS 的开发过程，帮助我们更快地开发和部署我们的应用程序。

generator-ng-js 简介

generator-ng-js 是一个 Yeoman 生成器，它用于自动化生成 AngularJS 应用程序的目录结构、依赖、环境配置，并自动创建相应的 karma 和 protractor 测试。generator-ng-js 拥有丰富的特性，包括：

自动生成样板代码，包括文件结构、控制器、服务、过滤器等。
自动生成配置文件如 kaman/protractor 配置等。
自动生成测试代码，并能自动运行测试。
自动生成功能脚本，如 git/tag 等。

使用指南

安装 Yeoman

由于 generator-ng-js 是 Yeoman 生成器，所以首先我们要安装 Yeoman：

npm install -g yo

安装 generator-ng-js

在安装 generator-ng-js 之前，我们需要安装以下依赖：

安装完依赖后，在命令行中输入以下命令进行安装 generator-ng-js：

npm install -g generator-ng-js

使用 generator-ng-js 创建项目

在安装完 generator-ng-js 后，我们现在就可以使用它来创建我们的 AngularJS 应用程序了。使用以下命令：

yo ng-js

这时会显示一个交互式的命令行提示符，你可以输入你的项目的名称，作者、工作目录等信息。完成后，generator-ng-js 将自动生成所有必要的文件和目录，包括项目目录的结构、控制器、服务、过滤器、部署文件等。

示例代码

下面是一个示例应用的代码，务必先按照以上指南安装 Yeoman 和 generator-ng-js 才能运行。

安装应用的依赖

npm install
bower install

运行示例应用

gulp serve

控制器

(function() {
  angular.module('app').controller('MainCtrl', MainCtrl);

  function MainCtrl() {
    this.greeting = 'Welcome to Generator NG-JS!';
  }
})();

HTML 页面

<div class="container" ng-controller="MainCtrl as vm">
  <h1>{{vm.greeting}}</h1>
</div>

总结

generator-ng-js 是一个强大的工具，让我们的 AngularJS 应用开发变得更加简单。它的丰富特性能帮助我们自动生成我们的项目架构、配置、测试和脚本，并使我们更容易地开发我们的 AngularJS 应用程序。熟练掌握 generator-ng-js 的使用将使你的开发工作更加高效，也能让你更好地融入前端开发的世界。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005553d81e8991b448d2711