Global functions in the corner

Question

I am new to angularJS. So need help on how to add global functions to an angular project? The file downloading my angular application uses the showScrollAndGo function, which should work as a global method, but it does not work. Code app.js:

'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. Therefore, I try to make it global. Any idea where I'm doing it wrong?

I use it like this:

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

Answer 1

Citing an Angular 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 to configure rootScope at startup, for example

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

Answer 2

You can try adding a factory and referring to the factory to all controllers where necessary.

Example:

In app.js add factory:

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

In any controller file, you can reference this factory by name and use it as shown below.

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