Angular JS – Make service globally accessible from controllers and view

by

Found a reasonable solution. Inject it into the bootstrap method (run), and add it to the root scope. From there it will be available to all controllers and views.

myApp.run(function ($rootScope, $location, $http, $timeout, FooService) {
    $rootScope.foo = FooService;
    ....

Re-reading the post I mentioned above, it didn’t say “wrap” exactly… just “abstract”, so I presume the poster was referring to this same solution.

For thoroughness, the answer to (1) is then:

myApp.controller('FooCtrl', ['$scope', function ($scope) { 
    // scope inherits from root scope
    $scope.foo.doSomething();
    ...

and the answer to (2) is simply:

{{doSomething()}}

Adding Christopher’s comment to make sure it’s seen:

@rob – According to best practices, the factory should be injected in
to the controllers that need to use it, rather than on the root scope.
As asked, question number one actually is the antipattern. If you need
the factory 100 times, you inject it 100 times. It’s barely any extra
code when minified, and makes it very clear where the factory is used,
and it makes it easier (and more obvious) to test those controllers
with mocks, by having the required factories all listed in the
function signature. – Christopher WJ Rueber Nov 25 ’13 at 20:06

More Related Contents:

  1. How to access the value of a promise?
  2. Two sets of parentheses after function call
  3. URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6
  4. Caching a promise object in AngularJS service
  5. Element not visible error (not able to click an element)
  6. AngularJS POST Fails: Response for preflight has invalid HTTP status code 404
  7. AngularJS dynamic routing
  8. I want to change the chart for each city or subcity selected
  9. Apply CSS style attribute dynamically in Angular JS
  10. Firebase TIMESTAMP to date and Time
  11. Angular – Can’t make ng-repeat orderBy work
  12. Promise.all behavior with RxJS Observables?
  13. Angular js – route-ui add default parmeter
  14. Dynamic NG-Controller Name
  15. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error for response from http://www.google.com/
  16. Accessing $scope in AngularJS factory?
  17. Angularjs: call other scope which in iframe
  18. Angular ui router unit testing (states to urls)
  19. AngularJS : Clear $watch
  20. Angular.js: set element height on page load
  21. Angular Js and google api client.js (gapi)
  22. How can I handle browser tab close event in Angular? Only close, not refresh
  23. how to change the headers for angularjs $http.jsonp
  24. How can I access the value of a promise?
  25. Angular directive templateUrl relative to .js file
  26. angularjs infinite scroll in a container
  27. Validate phone number using angular js
  28. AngularJS ng-include inside of Google Maps InfoWindow?
  29. How is AngularJS different from jQuery
  30. how to fix 404 warnings for images during karma unit testing

Leave a Comment