• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

dustinspecker/generator-ng-poly: Yeoman generator for modular AngularJS apps wit ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

dustinspecker/generator-ng-poly

开源软件地址(OpenSource Url):

https://github.com/dustinspecker/generator-ng-poly

开源编程语言(OpenSource Language):

JavaScript 87.1%

开源软件介绍(OpenSource Introduction):

generator-ng-poly

NPM version Build Status Coverage Status All Contributors

Code Climate Dependencies DevDependencies

PRs Welcome Commitizen friendly semantic-release

Yeoman generator for modular AngularJS apps with Gulp and optional Polymer support

Inspired by John Papa's Angular Style Guide and Todd Motto's AngularJS styleguide.

Purpose

This generator focuses on organizing Angular components by feature (home, about, video player, etc.) instead of by type (controller, service, directive, etc.) to encourage the development of self-contained, reusable components.

A typical workflow with this generator consists of creating an Angular module (ng-poly:module) and then generating controllers, directives, etc. for this module to create a new feature.

Polymer is just an added feature, but it isn't required to utilize this generator.

Usage

Install generator-ng-poly:

npm install -g bower gulp yo generator-ng-poly

If TypeScript is going to be used, tsd will need to be installed:

npm install -g tsd

Run yo ng-poly Yeoman will then ask for an app name and language preferences.

If using Node 0.12, there is a bug in Yeoman or Node causing yeoman generators to hang. With ng-poly, if after it outputs the generated home module files it hangs, then it is safe to enter Ctrl+C, etc. The project is good to go and everything else should work normally.

Run gulp to build and start the development environment. More detail on Gulp tasks

User Groups

Please feel free to ask any questions on our GitHub Issues or Google Group.

Generators

Available generators:

Languages and Features supported:

  • Angular Versions
    • 1.2.*, 1.3.*, 1.4.*
  • Markup
    • HAML, HTML, Jade
  • Application scripting languages
    • CoffeeScript, EcmaScript2015 (ES6) with Babel, JavaScript (ES5), TypeScript
  • Testing scripting languages
    • CoffeeScript, EcmaScript2015 (ES6) with Babel, JavaScript (ES5), TypeScript†
  • Style languages
    • CSS, LESS, SCSS, Stylus
  • Routers
    • Angular Route, UI Router
  • Unit testing
    • Jasmine (Karma as the test runner) for AngularJS
    • Mocha with Chai (Karma as the test runner) for AngularJS
  • e2e testing
    • Jasmine (ran with Protractor) for AngularJS
    • Mocha, Chai, and Chai as Promised (ran with Protractor) for AngularJS
  • Frameworks (scaffolds simple navbar)
    • Angular Material (1.3.* or higher only)
      • Doesn't scaffold navbar, yet
    • Bootstrap with AngularStrap
    • Bootstrap with UI Bootstrap
    • Foundation with Angular Foundation
  • Polymer
    • Core, Paper
  • Task runners
    • Gulp
  • Other supported Bower packages:
    • Angular Animate
    • Angular Cookies
    • Angular Messages
    • Angular Resource
    • Angular Sanitize
    • Angular Touch
    • Font Awesome
    • Lo-Dash
    • Restangular

Configurations:

† e2e tests are not supported in TypeScript. JavaScript will instead be used for e2e tests.

Gulp Tasks Briefing

gulp will start a localhost and open in the default browser

Using --stage prod will concat and minify HTML, CSS, and Angular modules.

gulp build will compile the assets

gulp dev will call the build task and setup the development environment

gulp unitTest will run unit tests via Karma and create code coverage reports

gulp webdriverUpdate will download the Selenium server standalone and Chrome driver for e2e testing

gulp e2eTest will run e2e tests via Protractor (must start a localhost before running gulp e2eTest)

Gulp Tasks in Detail


All generators ask for a module name except app and element. All generators except app take a name as an argument. A name can be written with CamelCase or hyphens.

Generators requiring a module can take a module option to bypass the prompt:

yo ng-poly:view newView --module=home/kitchen

A module value of app will add the new components to the module defined in app.js or app.coffee.


Examples are shown with HTML, LESS, JavaScript, Jasmine, and UI Router as the app configuration.

App

Asks for application name and language preferences to scaffold out an application with a home module. It will also ask if tests should be placed in the app/ or tests/ directory. It'll ask for some additional Bower dependencies and then install npm and Bower dependencies.

Example:

Run yo ng-poly to get started. ng-poly will then asks you some questions:

[?] What is the app's name?
[?] Which version of Angular should be used?
[?] Which structure should be used?
[?] Which is the preferred markup language?
[?] Which is the preferred application scripting language?
[?] Want to use Controller As syntax?
[?] Should directives be generated using a templateUrl (and markup file) instead of an inline template?
[?] By default, should the route generator create controllers?
[?] Which is the preferred test scripting language?
[?] Which is the preferred unit testing framework?
[?] Which is the preferred e2e testing framework?
[?] Which is the preferred style language?
[?] Should Polymer support be enabled?
[?] Should a framework be setup?
[?] Should ngRoute be used instead of UI Router?
[?] Which additional Bower components should be installed?

ng-poly makes some assumptions, but these can be overridden.

Option Default Value Info
host localhost BrowserSync and Protractor will use this host.
port 3000 BrowserSync and Protractor will use this port.
app-dir app Source code will be generated here.
unit-test-dir app Unit tests will be generated here.
skip-controller false Should the route generator skip creating a controller?
skip-install false Should ng-poly skip installing Bower and npm dependencies?

Example: yo ng-poly --port=8080 --app-dir=src to override the default port and app directory.

A module-only structure produces:

root/
├── app/
│   ├── fonts/ (empty)
│   ├── home/
│   │   ├── home-module.{coffee,es6,js,ts}
│   │   ├── home-routes.{coffee,es6,js,ts}
│   │   ├── home.{css,less,scss,styl}
│   │   ├── home.tpl.{haml,html,jade}
│   │   ├── home-controller.{coffee,es6,js,ts}
│   │   └── home-controller_test.{coffee,es6,js,ts}
│   ├── images/ (empty)
│   ├── app-module.{coffee,es6,js,ts}
│   ├── app-routes.{coffee,es6,js,ts}
│   └── index.{haml,html,jade}
├── bower_components/
├── e2e/
│   └── home/
│       ├── home.po.{coffee,es6,js}
│       └── home_test.{coffee,es6,js}
├── gulp/
│   ├── analyze.js
│   ├── build.js
│   ├── test.js
│   └── watch.js
├── node_modules/
├── typings/*
├── .bowerrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .jscsrc
├── .jshintrc
├── .yo-rc.json
├── bower.json
├── build.config.js
├── Gulpfile.js
├── karma.config.js
├── package.json
├── protractor.config.js
├── README.md
├── tsd.json*
└── tslint.json*

A module-type structure produces:

root/
├── app/
│   ├── fonts/ (empty)
│   ├── home/
│   │   ├── controllers/
│   │   │   ├── home-controller.{coffee,es6,js,ts}
│   │   │   └── home-controller_test.{coffee,es6,js,ts}
│   │   ├── views/
│   │   │   ├── home.{css,less,scss,styl}
│   │   │   └── home.tpl.{haml,html,jade}
│   │   ├── home-module.{coffee,es6,js,ts}
│   │   └── home-routes.{coffee,es6,js,ts}
│   ├── images/ (empty)
│   ├── app-module.{coffee,es6,js,ts}
│   ├── app-routes.{coffee,es6,js,ts}
│   └── index.{haml,html,jade}
├── bower_components/
├── e2e/
│   └── home/
│       ├── home.po.{coffee,es6,js}
│       └── home_test.{coffee,es6,js}
├── gulp/
│   ├── analyze.js
│   ├── build.js
│   ├── test.js
│   └── watch.js
├── node_modules/
├── typings/*
├── .bowerrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .jscsrc
├── .jshintrc
├── .yo-rc.json
├── bower.json
├── build.config.js
├── Gulpfile.js
├── karma.config.js
├── package.json
├── protractor.config.js
├── README.md
├── tsd.json*
└── tslint.json*

* Only TypeScript projects will have this.

Constant

Generates a constant and its test.

Example:

yo ng-poly:constant theHero
[?] Which module is this for?

Produces app/module/the-hero-constant.js:

(function () {
  'use strict';

  /**
   * @ngdoc service
   * @name module.constant:theHero
   *
   * @description
   *
   */
  angular
    .module('module')
    .constant('theHero', 0);
}());

Produces app/module/the-hero-constant_test.js:

/*global describe, beforeEach, it, expect, inject, module*/
'use strict';

describe('theHero', function () {
  var constant;

  beforeEach(module('module'));

  beforeEach(inject(function (theHero) {
    constant = theHero;
  }));

  it('should equal 0', function () {
    expect(constant).toBe(0);
  });
});

Controller

Genrates a controller and its test.

Example:

yo ng-poly:controller micro
[?] Which module is this for?

Produces app/module/micro-controller.js:

(function () {
  'use strict';

  /**
   * @ngdoc object
   * @name module.controller:MicroCtrl
   * @requires $scope
   *
   * @description
   *
   */
  angular
    .module('module')
    .controller('MicroCtrl', MicroCtrl);

  function MicroCtrl($scope) {
    $scope.micro = {};
    $scope.micro.ctrlName = 'MicroCtrl';
  }
}());

Produces app/module/micro-controller_test.js:

/*global describe, beforeEach, it, expect, inject, module*/
'use strict';

describe('MicroCtrl', function () {
  var scope;

  beforeEach(module('module'));

  beforeEach(inject(function ($rootScope, $controller) {
    scope = $rootScope.$new();
    $controller('MicroCtrl', {$scope: scope});
  }));

  it('should have ctrlName as MicroCtrl', function () {
    expect(scope.micro.ctrlName).toEqual('MicroCtrl');
  });
});

Decorator

Generates a decorator and its test.

Example:

yo ng-poly:decorator awesomeService
[?] Which module is this for?

Note: If decorating a service starting with a $ you must escape it like:

yo ng-poly:decorator \$state

Produces app/module/awesome-service-decorator.js:

(function () {
  'use strict';

  /**
   * @ngdoc decorator
   * @name home.decorator:awesomeService
   * @restrict EA
   * @element
   *
   * @description
   *
   */
  angular
    .module('module')
    .config(decorator);

  function decorator($provide) {
    $provide.decorator('awesomeService', function ($delegate) {
      $delegate.simpleFunction = function () {
        return 'awesomeService';
      };
      return $delegate;
    });
  }
}());

Produces: app/module/awesome-service-decorator_test.js:

/*global describe, beforeEach, it, expect, inject, module*/
'use strict';

describe('awesomeService', function () {
  var decorator;

  beforeEach(module('module'));

  beforeEach(inject(function (awesomeService) {
    decorator = awesomeService;
  }));

  it('should have simpleFunction return awesomeService', function () {
    expect(decorator.simpleFunction()).toEqual('awesomeService');
  });
});

Directive

Generates a directive, its template, and its test.

Example:

yo ng-poly:directive fancy-button
[?] Which module is this for?

Produces app/module/fancy-button-directive.js:

(function () {
  'use strict';

  /**
   * @ngdoc directive
   * @name module.directive:fancyButton
   * @restrict EA
   * @element
   *
   * @description
   *
   * @example
     <example module="module">
       <file name="index.html">
        <fancy-button></fancy-button>
       </file>
     </example>
   *
   */
  angular
    .module('module')
    .directive('fancyButton', fancyButton);

  function fancyButton() {
    return {
      restrict: 'EA',
      scope: {},
      templateUrl: 'module/fancy-button-directive.tpl.html',
      replace: false,
      controller: function (scope) {
        scope.fancyButton = {};
        scope.fancyButton.name = 'fancyButton';
      },
      link: function (scope, element, attrs) {
        /*jshint unused:false */
        /*eslint "no-unused-vars": [2, {"args": "none"}]*/
      }
    };
  }
}());

Produces app/module/fancy-button-directive.tpl.html:

<div>{{fancyButton.name}}</div>

Produces app/module/fancy-button-directive_test.js:

/*global describe, beforeEach, it, expect, inject, module*/
'use strict';

describe('fancyButton', function () {
  var scope;
  var element;

  beforeEach(module('module', 'module/fancy-button-directive.tpl.html'));

  beforeEach(inject(function ($compile, $rootScope) {
    scope = $rootScope.$new();
    element = $compile(angular.element('<fancy-button></fancy-button>'))(scope);
  }));

  it('should have correct text', function () {
    scope.$apply();
    expect(element.isolateScope().fancyButton.name).toEqual('fancyButton');
  });
});

The directive's template (HAML, HTML, or Jade) is converted to a temporary module automatically for testing.

Factory

Generates a factory and its test.

Example:

yo ng-poly:factory cake
[?] Which module is this for?

Produces app/module/cake-factory.js:

(function () {
  'use strict';

  /**
   * @ngdoc service
   * @name module.factory:Cake
   *
   * @description
   *
   */
  angular
    .module('module')
    .factory('Cake', Cake);

  function Cake() {
    var CakeBase = {};
    CakeBase.someValue = 'Cake';
    CakeBase.someMethod = function () {
      return 'Cake';
    };
    return CakeBase;
  }
}());

Produces app/module/Cake-factory_test.js:

/*global describe, beforeEach, it, expect, inject, module*/
'use strict';

describe('Cake', function () {
  var factory;

  beforeEach(module('module'));

  beforeEach(inject(function (Cake) {
    factory = Cake;
  }));

  it('should have someValue be Cake', function () {
    expect(factory.someValue).toEqual('Cake');
  });

  it('should have someMethod return Cake', function () {
    expect(factory.someMethod()).toEqual('Cake');
  });
});

Filter

Generates a filter and its test.

Example:

yo ng-poly:filter coffee
[?] Which module is this for?

Produces app/module/coffee-filter.js:

(function () {
  'use strict';

  /**
   * @ngdoc filter
   * @name module.filter:coffee
   *
   * @description
   *
   * 
                      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap