I am new to angularJS. So need help on how to add global functions in angular project? File loading my angular app is using showScrollAndGo function which should be work as global method but it is not working. Code of app.js is:

'use strict'; define(
[
    'angular',
    'jQuery',
    'angular-route',
    'angular-resource',
    'angular-ui-bootstrap',
    'highcharts',
    'highcharts-theme',
    'highcharts-ng',
    'controllers/index',
    'directives/index',
    'filters/index',
    'services/index',
    'angular-token-auth',
    'angular-local-storage',
    'jquery.slimscroll',
    'jquery-icheck'
],
function(angular, $) {
    'use strict';
    return angular.module('radian', ['ngRoute', 'ngResource', 'ui.bootstrap', 'app.services', 'app.controllers', 'app.directives','app.filters', 'highcharts-ng', 'ng-token-auth', 'ngStorage'])
        .constant('globals', {
            API_URL: 'http://localhost:3000/api',
            AUTH_URL: '',
            TEMPLATE_URL: 'app/views'
        })
        .constant('pagination', {
            items_per_page: 10,
            max_size: 5,
            direction_links: true,
            boundary_links: true,
            current_page: 1,
            total_items: 0
        })
        .config(['$routeProvider', 'globals', routeConfiguration])
        .config(['$httpProvider', httpConfiguration])
        .config(['$authProvider', 'globals', authProvider])
        .config(['$rootScopeProvider', root_functions])
        .config(['paginationConfig', paginationConfiguration]);

    function authProvider($authProvider, globals) {
        $authProvider.configure({
            apiUrl: globals.AUTH_URL
        });
    }

    function paginationConfiguration(paginationConfig) {
        paginationConfig.firstText = '<<';
        paginationConfig.lastText = '>>';
        paginationConfig.nextText = '>';
        paginationConfig.previousText = '<';
    }

    function routeConfiguration($routeProvider, globals) {
        $routeProvider
            .when('/', {
                templateUrl: globals.TEMPLATE_URL+'/misc/login.html',
                controller: 'LoginController',
                controllerAs: 'login'
            })
            .when('/dashboard', {
                templateUrl: globals.TEMPLATE_URL+'/misc/dashboard.html',
                controller: 'DashboardController',
                controllerAs: 'dashboard'
            })
            .when('/entity/:entity/:action', {
                templateUrl: function(rp) {
                    return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html';
                }
            })
            .when('/entity/:entity/:action/:id', {
                templateUrl: function(rp) {
                    return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html';
                }
            })
            .otherwise({
                redirectTo: '/'
            });
    }

    function httpConfiguration($httpProvider) {
        $httpProvider.defaults.headersmon['Content-Type'] = 'application/json; charset=utf-8';
        $httpProvider.defaults.headersmon['Accept'] = 'application/json, text/javascript';
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.interceptors.push('interceptService');

    }

    function root_functions($rootScope) {
        $rootScope.showScrollAndGo = function(path) {
            alert("I'm global foo!");
        };
    }

});

I need to access showScrollAndGo in different views. So trying to make it global. Any idea where I am doing wrong?

I am using it in view like this:

<a href="#/entity/clients/list" data-ng-click="showScrollAndGo('aaa');"><i class="fa fa-circle mrm mlm"></i>Manage Clients</a>

I am new to angularJS. So need help on how to add global functions in angular project? File loading my angular app is using showScrollAndGo function which should be work as global method but it is not working. Code of app.js is:

'use strict'; define(
[
    'angular',
    'jQuery',
    'angular-route',
    'angular-resource',
    'angular-ui-bootstrap',
    'highcharts',
    'highcharts-theme',
    'highcharts-ng',
    'controllers/index',
    'directives/index',
    'filters/index',
    'services/index',
    'angular-token-auth',
    'angular-local-storage',
    'jquery.slimscroll',
    'jquery-icheck'
],
function(angular, $) {
    'use strict';
    return angular.module('radian', ['ngRoute', 'ngResource', 'ui.bootstrap', 'app.services', 'app.controllers', 'app.directives','app.filters', 'highcharts-ng', 'ng-token-auth', 'ngStorage'])
        .constant('globals', {
            API_URL: 'http://localhost:3000/api',
            AUTH_URL: 'http://radiancor-env.elasticbeanstalk.com',
            TEMPLATE_URL: 'app/views'
        })
        .constant('pagination', {
            items_per_page: 10,
            max_size: 5,
            direction_links: true,
            boundary_links: true,
            current_page: 1,
            total_items: 0
        })
        .config(['$routeProvider', 'globals', routeConfiguration])
        .config(['$httpProvider', httpConfiguration])
        .config(['$authProvider', 'globals', authProvider])
        .config(['$rootScopeProvider', root_functions])
        .config(['paginationConfig', paginationConfiguration]);

    function authProvider($authProvider, globals) {
        $authProvider.configure({
            apiUrl: globals.AUTH_URL
        });
    }

    function paginationConfiguration(paginationConfig) {
        paginationConfig.firstText = '<<';
        paginationConfig.lastText = '>>';
        paginationConfig.nextText = '>';
        paginationConfig.previousText = '<';
    }

    function routeConfiguration($routeProvider, globals) {
        $routeProvider
            .when('/', {
                templateUrl: globals.TEMPLATE_URL+'/misc/login.html',
                controller: 'LoginController',
                controllerAs: 'login'
            })
            .when('/dashboard', {
                templateUrl: globals.TEMPLATE_URL+'/misc/dashboard.html',
                controller: 'DashboardController',
                controllerAs: 'dashboard'
            })
            .when('/entity/:entity/:action', {
                templateUrl: function(rp) {
                    return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html';
                }
            })
            .when('/entity/:entity/:action/:id', {
                templateUrl: function(rp) {
                    return globals.TEMPLATE_URL+'/'+rp.entity+'/'+rp.action+'.html';
                }
            })
            .otherwise({
                redirectTo: '/'
            });
    }

    function httpConfiguration($httpProvider) {
        $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
        $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.interceptors.push('interceptService');

    }

    function root_functions($rootScope) {
        $rootScope.showScrollAndGo = function(path) {
            alert("I'm global foo!");
        };
    }

});

I need to access showScrollAndGo in different views. So trying to make it global. Any idea where I am doing wrong?

I am using it in view like this:

<a href="#/entity/clients/list" data-ng-click="showScrollAndGo('aaa');"><i class="fa fa-circle mrm mlm"></i>Manage Clients</a>

• javascript
• angularjs
• angularjs-scope
• angular-ui

• It would help if you could show how you are trying to call $rootScope.showScrollAndGo, and the error message that the call results in – paul Commented Feb 16, 2015 at 12:16

2 Answers 2

Referring to Angular's document

angular.module('myModule', []).
config(function(injectables) { // provider-injector
  // This is an example of config block.
  // You can have as many of these as you want.
  // You can only inject Providers (not instances)
  // into config blocks.
}).
run(function(injectables) { // instance-injector
  // This is an example of a run block.
  // You can have as many of these as you want.
  // You can only inject instances (not Providers)
  // into run blocks
});

You need config the rootScope at run phase like

app.run(function($rootScope) {
  $rootScope.showScrollAndGo = function(path) {
        alert("I'm global foo!");
    };
});

You can try adding a factory, and refer that factory in all the controllers where u need it.

Sample:

In app.js add a factory:

app.factory('notificationFactory', function (toaster) {
    //.............
});

In any Controller file you can refer this factory by name and use it like below,

app.controller('sampleController', ['$scope','notificationFactory',
    function ($scope, notificationFactory) {
    }
]);