title: How to extend or isolate a constant value in AngularJS when using modules?
body: <p>To keep my code clean I'm in the habit of defining url's as constants in my AngularJs applications, looking like:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['myModule']);
  myApp.constant('URL', {
      google: 'http://www.google.com',
      facebook: 'http://www.facebook.com'
  });
  </code></pre>
  
  <p>Now, that works fine but I get into problems when I also define (and use) this constant in my module:</p>
  
  <pre><code>var myModule= angular.module('myModule', []);
  myModule.constant('URL', {
      twitter: 'http://www.twitter.com'
  });
  </code></pre>
  
  <p>Because, now when I want to use the URL.twitter constant in a directive (inside my module) it is no longer available because the definition of the URL constant in 'myApp' has overriden the value. For example when I create a directive:</p>
  
  <pre><code>myModule.directive('myDirective', function(){
      return {
          template: '&lt;div&gt;&lt;/div&gt;',
          controller: function(URL){
              console.log(URL.twitter); // logs undefined when used within 'myApp'
          }
      };
  });
  </code></pre>
  
  <p>See a live example: <a href="http://plnkr.co/edit/xiOGVWfJ4GupSvkTs0Ic?p=preview" rel="nofollow">http://plnkr.co/edit/xiOGVWfJ4GupSvkTs0Ic?p=preview</a></p>
  
  <p>Think of 'myModule' being a third-party module which I include in my project. If I accidentally use the same names for my constants, the whole thing is broken.</p>
  
  <p>How to overcome this use case without having to use different names for the same purpose?</p>