1

I want to expose to all my views some app-level config value. What is more elegant way to achieve this? Should I declare some app-level controller on <body> element and on expose my value using $scope.myVal = myVal. Or better to use rootScope for this purpose?

Also in context of this question I want to ask following: is it good practice in AngularJS to exclude to view some simple logic, like building src attribute of img tag: 

<img src="{{config.imagesBaseUrl}}{{product.imageFileName}}"

or better to do this concatenation of URL in controller?

WelcomeTo
  • 19,843
  • 53
  • 170
  • 286
  • numerous places shown here http://stackoverflow.com/questions/19881791/is-there-a-place-where-i-can-define-a-global-scope-data-variable-in-my-angularj/19881943#19881943 – charlietfl Jul 08 '14 at 21:06

4 Answers4

3

You would use a service and inject the service where it's needed, eg:

myApp.service("Config", function() {
    this.myValue = 3;
})

Controller:

myApp.controller("MyCtrl", ["$scope", "Config", function($scope, Config) {
    $scope.myVal = Config.myValue;
}]);

As for the img source question, concatenate in the controller and use ng-src to set the source.

tymeJV
  • 103,943
  • 14
  • 161
  • 157
  • Thanks for answer. Actually i'm already using service(factory) for Configuration object and injecting to controllers where it need. But what if I want to expose some value in each view? I think it's not so good to copy-past same code on each controller (I have more than 10 controllers now)? – WelcomeTo Jul 08 '14 at 20:03
1

Populating the rootScope is evil as it would be accessed globally through out the angular module. You can create an Angular service (name it global) and have the config values in it.

Angular Service Tutorial

V31
  • 7,626
  • 3
  • 26
  • 44
  • Thanks. But what if I need to use it globally? Now I have about 10 controllers (will be more in future) and I don't want to expose this variable inside each controller – WelcomeTo Jul 08 '14 at 19:53
  • You can still use this global service that you will create and wherever you require to use the variable just do a dependecy injection of that service just like what @tymeJV has done in his code example. The will keep your global variables at one place and the code more maintainable. – V31 Jul 08 '14 at 20:00
  • yes, im already doing this. But I think it's not good idea to write `$scope.myVar = configService.someVar` in _every_ controller. I think better to expose this variable one time – WelcomeTo Jul 08 '14 at 20:04
  • Pros and cons are for both, pro for rootScope is that it is easy to implement however it will play with the global scope of the angular module. Pro for services is that it wont affect the global scope however it needs to be assigned in every controller as you mentioned. It really depends upon your requirement and architecture of the app you want to decide on. – V31 Jul 09 '14 at 20:02
0

Consider creating a service that fetches and contains your app wide constants. Then inject this service into the controllers. You can then reference these values from within the controller, and use them for whatever you want. One usage of these values would be to create controller ($scope) level variables for use in your template or other code. In our example this could be used to concatenate the url.

JerryKur
  • 7,279
  • 6
  • 24
  • 33
0

This is where Angular's services come in to play!

angular.module("myApp")
  .constant("config", {
     // Configure all the things
  });

Here's the docs on constant as well. Then you can use it anywhere else in the app...

angular.module("myApp")
  .factory("SomeService", function(config) {
     // config.urlBase or whatever
     return {
         doStuff: function() {}
     };
  });

There's also a really cool grunt task that can help you with this stuff too...

http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/

jcreamer898
  • 8,109
  • 5
  • 41
  • 56