separated angular components into modules

angular.html

@@ -43,6 +43,7 @@
   <script src="js/filters/bytes.js"></script>
   <script src="js/filters/path.js"></script>
 
+  <script src="js/services/constants.js"></script>
   <script src="js/services/deps.js"></script>
   <script src="js/services/base64.js"></script>
   <script src="js/services/utils.js"></script>
@@ -99,7 +100,7 @@
         </ul>
       </li>
 
-      <li class="dropdown" id="stop_downloads">
+      <li class="dropdown" ng-show="false">
       <a class="dropdown-toggle" href="#">
         Manage <b class="caret"></b>
       </a>
@@ -113,7 +114,7 @@
 
     </ul>
 
-    <ul class="nav">
+    <ul class="nav" ng-show="false">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" >
           Settings <b class="caret"></b>
@@ -128,7 +129,7 @@
       </li>
     </ul>
 
-    <ul class="nav pull-right">
+    <ul class="nav pull-right" ng-show="false">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" >
           About <b class="caret"></b>
@@ -150,6 +151,10 @@
 <!-- {{{ downloads -->
 <div role="main" class="container" ng-controller="DownloadCtrl">
 
+  <div ng-show="!getDownloads().length" class="hero-unit">
+    <h3>Currently no downloads in line to display, use the Add download button to start downloading files!</h3>
+  </div>
+
   <!-- {{{ download template -->
   <table ng-repeat="download in getDownloads()" class="download" data-gid="{{download.gid}}">
     <tbody>

js/ctrls/download.js

@@ -1,4 +1,8 @@
-app.controller('DownloadCtrl', [ '$scope', '$rpc', '$utils',
+angular
+.module('webui.ctrls.download', [
+  'webui.services.utils', 'webui.services.rpc'
+])
+.controller('DownloadCtrl', [ '$scope', '$rpc', '$utils',
 function(scope, rpc, utils) {
 
   scope.active = [], scope.waiting = [], scope.stopped = [];

js/ctrls/modal.js

@@ -1,4 +1,8 @@
-app.controller('ModalCtrl', ['$_', '$scope', '$rpc', function(_, scope, rpc) {
+angular
+.module('webui.ctrls.modal', [
+  'webui.services.rpc', 'webui.services.deps'
+])
+.controller('ModalCtrl', ['$_', '$scope', '$rpc', function(_, scope, rpc) {
   scope.uris = '';
   scope.addUris = function() {
     console.log(scope.uris);

js/ctrls/nav.js

@@ -1,4 +1,6 @@
-app.controller('NavCtrl', ['$scope', '$name', function(scope, name) {
+angular
+.module('webui.ctrls.nav', ['webui.services.constants', 'webui.services.modals'])
+.controller('NavCtrl', ['$scope', '$name', '$modals', function(scope, name, modals) {
   scope.name = name;
 
   // initially collapsed in mobile resolution

js/directives/chunkbar.js

@@ -20,7 +20,9 @@ var draw = function(canvas, chunks, fillStyle) {
 // put chunkbar and bitfield attributes in a canvas element
 // to use the directive, draw is optional and canvas is
 // only drawn when it is true if given
-app.directive('chunkbar', ['$utils', function(utils) {
+angular
+.module('webui.directives.chunkbar', ['webui.services.utils'])
+.directive('chunkbar', ['$utils', function(utils) {
   return function(scope, elem, attrs) {
     var bitfield = "", pieces = 0, canDraw = true;
     var update = function() {

js/directives/dgraph.js

@@ -1,8 +1,9 @@
 // graph takes dspeed and uspeed, it queries them every second and draws
 // the last 20 secs, it also takes draw as an optional attribute and only
 // draws the graph when it is true, if not given then graph is always drawn
-app.directive('dgraph', ['$', '$filter', '$parse', function($, filter, parse) {
-
+angular
+.module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps'])
+.directive('dgraph', ['$', '$filter', '$parse', function($, filter, parse) {
   return function(scope, elem, attrs) {
     var canDraw = true;
 

js/filters/bytes.js

@@ -1,4 +1,6 @@
-app.filter('changeLength', function() {
+angular
+.module('webui.filters.bytes', [])
+.filter('changeLength', function() {
   return function(len, pref) {
     len = parseFloat(len);
     if(len <= (1<<10)) return len.toFixed(1)  + " " + pref;
@@ -6,21 +8,18 @@ app.filter('changeLength', function() {
     else if(len <= (1<<30)) return (len/(1<<20)).toFixed(1) + " M" + pref;
     else return (len/(1<<30)).toFixed(1) + " G" + pref;
   };
-});
-
-app.filter('blength', ['$filter', function(filter) {
+})
+.filter('blength', ['$filter', function(filter) {
   return function(len) {
     return filter('changeLength')(len, 'B');
   };
-}]);
-
-app.filter('bspeed', ['$filter', function(filter) {
+}])
+.filter('bspeed', ['$filter', function(filter) {
   return function(speed) {
     return filter('changeLength')(speed, 'B/s');
   };
-}]);
-
-app.filter('time', function() {
+}])
+.filter('time', function() {
   return function(time) {
     time = parseFloat(time);
     if (isNaN(time) || !isFinite(time)) return " infinite";

js/filters/path.js

@@ -1,5 +1,6 @@
 // returns the relative path from base
-app.filter('prelative', function() {
+angular.module('webui.filters.path', [])
+.filter('prelative', function() {
   return function(path, base) {
     return path.replace(/\\/g, '/')
       .replace(base.replace(/\\/, '/'), '.');

js/init.js

@@ -1,10 +1,15 @@
-var app = angular.module('app', []);
+angular.module('webui', [
+  'webui.services.utils', 'webui.services.deps', 'webui.services.base64',
+  'webui.services.constants', 'webui.services.rpc',
+  'webui.filters.bytes', 'webui.filters.path',
+  'webui.directives.chunkbar', 'webui.directives.dgraph',
+  'webui.ctrls.download', 'webui.ctrls.nav', 'webui.ctrls.modal'
+]);
 
 $(function() {
   angular.bootstrap(document, [
     // external deps
     'ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle',
-
-    'app'
+    'webui'
   ])
 });

js/services/base64.js

@@ -1,4 +1,6 @@
-app.factory('$base64', [function()  {
+angular
+  .module('webui.services.base64', [])
+  .factory('$base64', [function()  {
   var obj = {};
   var a64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
     a256 = {

js/services/constants.js

@@ -0,0 +1,5 @@
+angular
+.module('webui.services.constants',  [])
+.constant('$name', 'webui-aria2')
+.constant('$globalTimeout', 5000)
+

js/services/deps.js

@@ -1,6 +1,5 @@
-app.constant('$name', 'webui-aria2');
-app.constant('$globalTimeout', 5000);
-
-app.value('$', $);
-app.value('$_', _);
-app.value('$json', JSON);
+angular
+  .module('webui.services.deps', [])
+  .value('$', $)
+  .value('$_', _)
+  .value('$json', JSON);

js/services/rpc/jsoncall.js

@@ -1,4 +1,7 @@
-app.factory('$jsoncall', ['$', '$json', '$base64', function($, JSON, base64) {
+angular
+  .module('webui.services.rpc.jsoncall', [
+    'webui.services.deps', 'webui.services.base64'])
+  .factory('$jsoncall', ['$', '$json', '$base64', function($, JSON, base64) {
   return {
     init: function(conf) {
       this.avgTimeout = 2000;

js/services/rpc/rpc.js

@@ -1,4 +1,8 @@
-app.factory('$rpc', ['$syscall', '$globalTimeout', function(syscall, time) {
+angular
+  .module('webui.services.rpc', [
+    'webui.services.rpc.syscall', 'webui.services.constants'
+  ])
+  .factory('$rpc', ['$syscall', '$globalTimeout', function(syscall, time) {
   var subscriptions = []
     , configurations = [{ host: 'localhost', port: 6800 }]
     , timeout = null

js/services/rpc/sockcall.js

@@ -1,4 +1,9 @@
-app.factory('$sockcall', ['$_', '$json', '$name', '$utils', function(_, JSON, name, utils) {
+angular
+  .module('webui.services.rpc.sockcall', [
+    'webui.services.deps', 'webui.services.utils', 'webui.services.base64'
+  ])
+  .factory('$sockcall', ['$_', '$json', '$name', '$utils', function(_, JSON, name, utils) {
+
   var sockRPC = {
     // true when sockrpc is ready to be used,
     // false when either initializing

js/services/rpc/syscall.js

@@ -1,4 +1,9 @@
-app.factory('$syscall', ['$log', '$jsoncall', '$sockcall', function(log, jsonRPC, sockRPC) {
+angular
+  .module('webui.services.rpc.syscall', [
+    'webui.services.rpc.jsoncall', 'webui.services.rpc.sockcall',
+    'webui.services.utils'
+  ])
+  .factory('$syscall', ['$log', '$jsoncall', '$sockcall', function(log, jsonRPC, sockRPC) {
   return {
     // called to initialize the rpc interface, call everytime configuration changes
     // conf has the following structure:

js/services/utils.js

@@ -1,4 +1,5 @@
-app.factory('$utils', function() {
+angular.module('webui.services.utils', [])
+.factory('$utils', function() {
   return {
     getFileName: function(path) {
       var seed = path.split(/[/\\]/);