generator-angularify

Angularify Generator

Yeoman generator for AngularJS - help you quickly set up a new project , which use UI-Router with RequireJS to load controller , service and so on dynamically. if you require the ngRoute module , recommend generator-angular

Usage

Install generator-angular:

npm install -g generator-angularify

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo angularify, optionally passing an app name:

yo angularify [app-name]

Run gulp for building and gulp server for preview

Generators

Available generators:

• angularify (aka angularify:app)
• angularify:controller
• angularify:directive
• angularify:filter
• angularify:route
• angularify:service
• angularify:provider
• angularify:factory
• angularify:value
• angularify:constant
• angularify:decorator
• angularify:view

Note: Generators are to be run from the root directory of your app.

App

Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator using bower installs Angular, Angular-UI-Router and RequireJS by default , also optionally installs Bootstrap and additional AngularJS modules

Example:

yo angularify

Route

Generates a controller and view, and configures a route in app/app.js connecting them.

Example:

yo angularify:route myroute

Produces app/scripts/controllers/myroute/myroute.js:

define(['app', 'angular'], function (app, angular) {
    app.controller('ListCtrl', ["$scope", function ($scope) {
        $scope.title = "List page"
    }]);
    // ...
    //or use angular.module to create a new module
});

Produces app/views/myroute/myroute.html:

<p>This is the myroute view.</p>
<p>{[{title}]}</p>%

Explicitly populate state

Example:

yo angular:route myRoute --state=my.route

Produces controller and view as above and populate state to app/app.js

$stateProvider
                .state('my.route', {
                  url: '/myroute',
                  files: 'first.service',
                  resolve: {}
                })

if in doubt about example above, for more details lazyLoad

Controller

Generates a controller in app/scripts/controllers.

Example:

yo angularify:controller user

Produces app/scripts/controllers/user/user.js:

define(['app', 'angular'], function (app, angular) {
    app.controller('UserCtrl', ["$scope", function ($scope) {
        $scope.title = "User page"
    }]);
    // ...
    //or use angular.module to create a new module
});

Directive

Generates a directive in app/scripts/directives.

Example:

yo angularify:directive myDirective

Produces app/scripts/directives/mydirective.js:

define(['app', 'angular'], function (app, angular) {
    app.directive('myDirective', function () {
        return {
            template: '<div></div>',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {
                element.text('this is the myDirective directive');
            }
        };
    });
    // or use angular.module to create a new module
});

Filter

Generates a filter in app/scripts/filters.

Example:

yo angularify:filter myFilter

Produces app/scripts/filters/myfilter.js:

define(['app', 'angular'], function (app, angular) {
    app.filter('myFilter', function () {
        return function (input) {
            return 'myFilter filter: ' + input;
        };
    });
    // or use angular.module to create a new module
});

Service

Generates an AngularJS service.

Example:

yo angularify:service my

Produces app/scripts/services/my.service.js:

define(['app', 'angular'], function (app, angular) {
   app.service('my', function my() {
        // AngularJS will instantiate a singleton by calling "new" on this function
   });
    // or use angular.module to create a new module
});

You can also do yo angularify:factory,yo angularify:provider, yo angularify:value, and yo angularify:constant for other types of services.

Decorator

Generates an AngularJS service decorator.

Example:

yo angularify:decorator serviceName

Produces app/scripts/decorators/servicename.decorator.js:

define(['app', 'angular'], function (app, angular) {
    app.config(function ($provide) {
        $provide.decorator('serviceName', function ($delegate) {
            // decorate the $delegate
            return $delegate;
        });
    });
    // or use angular.module to create a new module
});

Options

In general, these options can be applied to any generator, though they only affect generators that produce scripts.

CoffeeScript

todo

Minification Safe

Add angularjs dependency injection annotations with gulp-ng-annotate

Add to Index

By default, new css are added to the index.html file.

Optimizing JavaScript

To integrate AngularJS and Requirejs :

• Define config in main.js, all dependencies are in build directory

require.config({
    baseUrl: "build",
    paths: {
        "angular": "lib/angular.min",
        "uiRouter": "lib/angular-ui-router.min",
        "app": "app"
    },
    shim: {
        "angular": {
            exports: "angular"
        }
        ,"uiRouter": {
            deps: ["angular"],
            exports: "uiRouter"
        }
    }
});

• r.js is the RequireJS optimizer , which can combine the modules that are specifies in the build profile's file , just like this:

{
    mainConfigFile: "build/main.js",
    optimize: "uglify2",
    baseUrl: "build",
    name: "main",
    out: "build/bundle.js",  //output file
    removeCombined: true,
    generateSourceMaps: true,
    preserveLicenseComments: false,
    findNestedDependencies: true
}

• Only load require.js in index.html , the data-main is set to bundle.js , which is the output file bundle all above files

<script src="/lib/require.js" data-main="/bundle.js"></script>

LazyLoad

With ocLazyLoad , ui-router can load files on demand. It's also possibe to simplify the stateConfig object like this:

$stateProvider
                .state('list', {
                  url: '/list',
                  files: ['first.service'],
                  resolve: {}
                })

Once the stateChangeStart event fires and target state name is list, the templateUrl and controller of target state is assigned a given directory and file name.

    controller:"ListCtrl as list",
    templateUrl:"views/list/list.html"

Then load function in the resolve object returns a promise, which ensures the controller and dependences files are loaded in the proper order. Finally the stateConfig object looks like this:

{
    controller:"ListCtrl as list",
    name:"list",
    templateUrl:"views/list/list.html",
    url:"/list",
    resolve:{
            load: function(){
                //load the controller,service,filter,directive
            }
    }
}

The dependences file can include services, filters and directives.

files: {
    s:	"serviceFileName", //service, defaults to "js/services/"
    f:	["filterFileOne","filterFileOne"],  //filter, defaults to  "js/filters/"
    d:	["directiveFileName"] //directive, defaults to "js/directives/"
}

Bower Components

The following packages are always installed by the app generator:

• requirejs
• angular
• angular-ui-router
• angular-mocks
• angular-scenario

The following additional modules are available as components on bower, and installable via bower install:

• angular-cookies
• angular-resource
• angular-sanitize
• angular-animate
• angular-touch

All of these can be updated with bower update as new versions of AngularJS are released.

Configuration

Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.

Testing

Running gulp test will run the unit tests with karma.

Changelog

• 0.0.2

  • Mnification safe
  • Add gulp server task

• 0.0.3

  • Package.json update

• 0.0.4

  • Options now accept paths
  • AngularJS 1.3.0

Reference

• angularjs-styleguide
• ocLazyLoad
• CustomerManager