[AngularJS] Adding custom methods to angular.module

There are situations where you might want to add additional methods toangular.module. This is easy to accomplish, and can be a handy technique.

    //For directive template
    <hello></hello>

    //For directive controller
    <li menu-item ng-repeat="category in categories"
        class="menu-animation"
        ng-class="{'highlight':mouse_over}"
        ng-mouseenter="mouse_over = true"
        ng-mouseleave="mouse_over = false"
        ng-class="{'active':isCurrentCategory(category)}">
        <a  ng-click="setCurrentCategory(category)">
            {{category.name}}
        </a>
    </li>

 

var original = angular.module;

angular.module = function(name, deps, config){

    var module = original(name, deps, config);

    module.quickTemplate = function(name, template){
        module.directive(name, function() {
            return {
                template: template
            }
        });
    };

    module.quickController = function(name, controller) {
        module.directive(name, function() {
            return {
                controller: controller
            }
        })
    };

    return module;
};

 

Use: We comment out the meunItem directive, instead using quickController method added to the end of the file.

angular.module('categories', [
    'eggly.models.categories',
    'ngAnimate'
])

    .config(function ($stateProvider) {
        $stateProvider
            .state('eggly.categories', {
                url: '/',
                views: {
                    'categories@': {
                        controller: 'CategoriesController',
                        templateUrl: 'app/categories/categories.tmpl.html'
                    },
                    'bookmarks@': {
                        controller: 'BookmarksController',
                        templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
                    }
                }
            });
    })

    .controller('CategoriesController', function ($scope) {


    })

   /*
   .directive('menuItem', function(){
        var controller = function($scope){
            $scope.mouse_over = false;
        };

        return {
            controller: controller
        }
    })*/

    .animation('.menu-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                if (className == 'highlight') {
                    TweenLite.to(element, 0.2, {
                        width: '223',
                        borderLeft: '10px solid #89CD25',
                        onComplete: done
                    });
                    TweenLite.to(element.find('a'), 0.2, {
                        color: "#89CD25"
                    });
                }
                else {
                    done();
                }
            },

            beforeRemoveClass: function (element, className, done) {
                if (className == 'highlight') {
                    TweenLite.to(element, 0.4, {
                        width: '180',
                        borderLeft: '5px solid #333',
                        onComplete: done
                    });
                    TweenLite.to(element.find('a'), 0.4, {
                        color: "#5bc0de"
                    });
                }
                else {
                    done();
                }
            }
        };
    })

    .quickController('menuItem', function($scope){
        $scope.mouse_over = false;
    })
;

Have to add quickController to the end of the file, otherwise, it breaks the chain.