Can I make a function available in every controller in angular

Question

If I have a utility function foo that I want to be able to call from anywhere inside of my ng-app declaration  Is there someway I can make it globally accessible in my module setup or do I need to add it to the scope in every controller

User · Answer

Though the first approach is advocated as 'the angular like' approach, I feel this adds overheads.

Consider if I want to use this myservice.foo function in 10 different controllers. I will have to specify this 'myService' dependency and then $scope.callFoo scope property in all ten of them. This is simply a repetition and somehow violates the DRY principle.

Whereas, if I use the $rootScope approach, I specify this global function gobalFoo only once and it will be available in all my future controllers, no matter how many.

User · Answer

AngularJs has  Services  and  Factories  just for problems like yours These are used to have something global between Controllers  Directives  Other Services or any other angularjs components  You can defined functions  store data  make calculate functions or whatever you want inside Services and use them in AngularJs Components as Global like  angular module  MyModule             service  MyService      http   function  http       return          users                getUserFriends  function userId             return  http               method   GET               url    api user friends     userId                                                  if you need more  Find More About Why We Need AngularJs Services and Factories

User · Answer

I m a bit newer to Angular but what I found useful to do  and pretty simple  is I made a global script that I load onto my page before the local script with global variables that I need to access on all pages anyway  In that script  I created an object called  globalFunctions  and added the functions that I need to access globally as properties  e g  globalFunctions foo   myFunc     Then  in each local script  I wrote  scope globalFunctions   globalFunctions  and I instantly have access to any function I added to the globalFunctions object in the global script   This is a bit of a workaround and I m not sure it helps you but it definitely helped me as I had many functions and it was a pain adding all of them to each page

User · Answer

You basically have two options  either define it as a service  or place it on your root scope  I would suggest that you make a service out of it to avoid polluting the root scope  You create a service and make it available in your controller like this    lt  doctype html gt   lt html ng-app  myApp  gt   lt head gt       lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt       lt script src  http   code angularjs org 1 1 2 angular min js  gt  lt  script gt       lt script type  text javascript  gt      var myApp   angular module  myApp             myApp factory  myService   function             return               foo  function                     alert  I m foo                                           myApp controller  MainCtrl      scope    myService   function  scope  myService             scope callFoo   function                 myService foo                            lt  script gt   lt  head gt   lt body ng-controller  MainCtrl  gt       lt button ng-click  callFoo    gt Call foo lt  button gt   lt  body gt   lt  html gt    If that s not an option for you  you can add it to the root scope like this    lt  doctype html gt   lt html ng-app  myApp  gt   lt head gt       lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt       lt script src  http   code angularjs org 1 1 2 angular min js  gt  lt  script gt       lt script type  text javascript  gt      var myApp   angular module  myApp             myApp run function  rootScope             rootScope globalFoo   function                 alert  I m global foo                             myApp controller  MainCtrl      scope   function  scope                  lt  script gt   lt  head gt   lt body ng-controller  MainCtrl  gt       lt button ng-click  globalFoo    gt Call global foo lt  button gt   lt  body gt   lt  html gt    That way  all of your templates can call globalFoo   without having to pass it to the template from the controller

User · Answer

You can also combine them I guess    lt  doctype html gt   lt html ng-app  myApp  gt   lt head gt       lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt       lt script src  http   code angularjs org 1 1 2 angular min js  gt  lt  script gt       lt script type  text javascript  gt          var myApp   angular module  myApp                 myApp factory  myService   function                 return                   foo  function                         alert  I m foo                                                           myApp run function  rootScope  myService                 rootScope appData   myService                       myApp controller  MainCtrl      scope   function  scope                       lt  script gt   lt  head gt   lt body ng-controller  MainCtrl  gt       lt button ng-click  appData foo    gt Call foo lt  button gt   lt  body gt   lt  html gt

[angularjs] Can I make a function available in every controller in angular?

Examples related to angularjs

Examples related to function

Examples related to global