dependency icon indicating copy to clipboard operation
dependency copied to clipboard

External dependency loader for quick ng prototyping

dependency

External dependency loader for quick ng prototyping

Declare your dependencies in one place, and speed up your prototyping!

angular.module('main')
  // Declare dependencies and their source _in your javascript_
  .dependency('ui.router', '//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js')
  .dependency('main.login', 'main/login.js')
  .controller(fn)
;

// Declare sub-modules without dependency annotation
angular.module('login')
  .dependency('ui.router')
;

Go from this verbosity...

<script src="lib/angular/angular.js"></script>
<script src="lib/dependency/dependency.js"></script>
<script src="lib/angular-scroll/angular-scroll.min.js"></script>

<script src="app.js"></script>
<script src="common/services/contacts.js"></script>
<script src="common/directives/table.js"></script>
<script src="lounge/lounge.js"></script>
<script src="lounge/directive.js"></script>
<script src="dining/dining.js"></script>
<script src="dining/controller.js"></script>
<script src="dining/directive.js"></script>
<script src="smoking/smoking.js"></script>
<script src="smoking/service.js"></script>
<!-- ... -->

...to this.

<script src="lib/angular/angular.js"></script>
<script src="lib/dependency/dependency.js"></script>

<script src="app.js"></script>

Instead of listing your dependencies twice, do it all in javascript.


Installation

  1. Grab it from your favorite registry:
  • curl https://raw.githubusercontent.com/zzmp/dependency/master/dependency.js > lib/dependency/dependency.js
  • git clone [email protected]:zzmp/dependency.git
  • bower install dependency
  • npm install ng-dependency
  1. Include it in your index.html, just after angular:
<script src="lib/angular/angular.js"></script>
<script src="lib/dependency/dependency.js"></script>

Features

Declare your dependencies directly in the module

angular.module('main')
  .dependency('depName', '/depPath.js');

Declare multiple dependencies at once

angular.module('main')
  .dependency({
    'depName': '/depPath.js',
    'depTwo' : '/depTwo.js',
    'cdnDep' : '//url'
  });

Declare your sources in one place

angular.module('main')
  .dependency(['depName', 'depTwo', 'cdnDep']);

/* sources.js */
angular.dependency({
  'depName': '/depPath.js',
  'depTwo' : '/depTwo.js',
  'cdnDep' : '//url'
});
Automatically detect duplicate dependencies
angular.module('main')
  .dependency('depName')
  // Only loaded once, from first given path '/depPath'
  .dependency('depName', '/depPath')
  // Already loaded, new path is ignored
  .dependency('depName', '/fakePath');

I work best with prototyping. I do not (yet) concatenate code, so don't use me for something that needs to minimize AJAX calls. I am great for CDN-distributed dependencies.