title: AngularJS seed: putting JavaScript into separate files (app.js, controllers.js, directives.js, filters.js, services.js)
body: <p>I'm using the <a href="https://github.com/angular/angular-seed" rel="noreferrer">angular-seed</a> template to structure my application. Initially I put all my JavaScript code into a single file, <code>main.js</code>. This file contained my module declaration, controllers, directives, filters, and services. The application works fine like this, but I'm worried about scalability and maintainability as my application becomes more complex. I noticed that the angular-seed template has separate files for each of these, so I've attempted to distribute my code from the single <code>main.js</code> file into each of the other files mentioned in the title to this question and found in the <code>app/js</code> directory of the <a href="https://github.com/angular/angular-seed/tree/master/app/js" rel="noreferrer">angular-seed</a> template.</p>
  
  <p>My question is: how do I manage the dependencies to get the application to work? The existing documentation found <a href="http://docs.angularjs.org/guide" rel="noreferrer">here</a> isn't very clear in this regard since each of the examples given shows a single JavaScript source file.</p>
  
  <p>An example of what I have is:</p>
  
  <h3>app.js</h3>
  
  <pre><code>angular.module('myApp', 
      ['myApp.filters',
       'myApp.services',
       'myApp.controllers']);
  </code></pre>
  
  <h3>controllers.js</h3>
  
  <pre><code>angular.module('myApp.controllers', []).
      controller('AppCtrl', [function ($scope, $http, $filter, MyService) {
  
          $scope.myService = MyService; // found in services.js
  
          // other functions...
      }
  ]);
  </code></pre>
  
  <h3>filters.js</h3>
  
  <pre><code>angular.module('myApp.filters', []).
      filter('myFilter', [function (MyService) {
          return function(value) {
              if (MyService.data) { // test to ensure service is loaded
                  for (var i = 0; i &lt; MyService.data.length; i++) {
                      // code to return appropriate value from MyService
                  }
              }
          }
      }]
  );
  </code></pre>
  
  <h3>services.js</h3>
  
  <pre><code>angular.module('myApp.services', []).
      factory('MyService', function($http) {
          var MyService = {};
          $http.get('resources/data.json').success(function(response) {
              MyService.data = response;
          });
          return MyService;
      }
  );
  </code></pre>
  
  <h3>main.js</h3>
  
  <pre><code>/* This is the single file I want to separate into the others */
  var myApp = angular.module('myApp'), []);
  
  myApp.factory('MyService', function($http) {
      // same code as in services.js
  }
  
  myApp.filter('myFilter', function(MyService) {
      // same code as in filters.js
  }
  
  function AppCtrl ($scope, $http, $filter, MyService) {
      // same code as in app.js
  }
  </code></pre>
  
  <p>How do I manage the dependencies?</p>
  
  <p>Thanks in advance.</p>