Generator Angular Enterprise

What is this?

This is the most comprehensive and strict code generator that adheres to Angular's most popular best practices guide. It also generates companion tests and gives you a gulp build/test process. It even documents best practices that are being employed when generating a snippet (see below).

Why would I use this over other generators?

Most Angular tutorials teach very bad patterns for creating larger Angular applications. Eventually, most devs hit a wall before realizing everybody else has abandoned the practices their tutorials once endorsed.

There are also a lot of really popular patterns that aren't always practiced in the JavaScript community (such as code coverage analysis). This generator encourages some of these patterns as well.

These known best t are often called "enterprise" patterns simply because they aren't critical in small projects. This generator should be used in any project that plans to expand beyond a few primary states.

Main Features

• Teaches Best Practices - Clearly labels code structures based on best practices (see next section)
• Enables Continuous Integration - Out of the box support for Travis and Drone
• Encourages TDD + ATDD - Built in build process for both unit and functional (e2e) testing
• Performs Code Analysis - Leverages some of the toolchain Best Practices (code coverage, complexity analysis, jshint, htmlhint, and JSCS)
• (Coming soon) Integrates with Enterprise APIs - Integrated Swagger-based server for mocked end points

Best Practices Annotations

Whenever possible, rules are directly linked to the standards guide where invoked. This will help ensure future developers continue building on the best practices. For example, when generating a controller:

// start example snippet ...
/**
 * Chain to fetch module
 *   https://github.com/johnpapa/angular-styleguide#style-y022
 */
angular
  .module('myApp.aboutPage')
  .controller('AboutPageController', AboutPageController);
 
/**
 * Avoid anonymous functions as callbacks
 *   https://github.com/johnpapa/angular-styleguide#style-y024
 *
 * Document dependency injenction using annotations
 *  https://github.com/johnpapa/angular-styleguide#style-y100
 */
/* @ngInject */
function AboutPageController() {
// ... end example snippet

Installation

To use it, you will need Yeoman - a tool for managing code generators.

npm install -g yo

Next, you'll need to install the generator

npm install -g generator-angular-enterprise

Now, create a new directory where you want your angular app to live. Then enter that directory.

cd Projects/
mkdir new-angular-app
cd new-angular-app

Then, initiate the generator:

ae new

Create your application's starting point:

ae feature myStartingSection

The above would generate the following folder/files in your designated application folder:

app/
    my-starting-section/
        my-starting-section.module.js
        my-starting-section.route.js
        my-starting-section.route.spec.js

You would then add sub-components such as controllers to this module:

ae controller myStartingPage

Now your app looks like this:

app/
    my-starting-section/
        my-starting-page.controller.js
        my-starting-page.controller.spec.js
        my-starting-page.html
        my-starting-section.module.js
        my-starting-section.route.js # <= modified with new routes
        my-starting-section.route.spec.js # <= modified with new routes

Other commands

Running the app:

gulp serve

Running tests:

npm test

While developing, run tests and refresh the app automatically as you make changes:

gulp watch

Other Generators

ae directive myDirective # "myDirective" is the camel case representation of your directive name 
ae feature myFeature # "myFeature" is the name of the module (will generate a controller/routes) 
ae filter myFilter # "myFilter" is what you would use in the HTML 
ae factory myFactory # "myFactory" is the name of factory 
ae service myService # "myService" is the name of service (singleton) 

Contributing

If you want to make changes to the generator, you'll want to make sure to observe our testing patterns. You can run tests with:

gulp test

And enable auto-testing via:

gulp watch

To develop on this generator, you will want to clone this repo and run:

npm link

This will "install" your local copy of this repository as a registered Yeoman generator. Note that the name of the project folder you clone to must match the name of this generator (e.g., generator-...).

License

MIT. Copyright (c) 2015 Michi Kono, John Katsnelson, Forrest Thomas

Still todo

• Closure-ifying all files instead of manually doing it
• Code coverage analysis (cyclomatic, halstead)
• Complexity analysis