Generator-angularify NPM

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:

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/"
}