title: How to have controllers in separate file in AngularJS
body: <p>I look around a bit and didn't find an answer that fit with my current situation. I have a app.js file:</p>
  
  <pre><code>'use strict';
  
  var demoApp = angular.module('demoApp', [
      // Dépendances du "module" &lt;-- demoApp
      'ngRoute',
      'routeAppControllers',
      'todoList'
  ]);
  
  demoApp.config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) { 
  
          // Système de routage
          $routeProvider
          .when('/home', {
              templateUrl: 'views/home.html',
              controller: 'homeCtrl'
          })
          .when('/contact/:msg?', {
              templateUrl: 'views/contact.html',
              controller: 'contactCtrl'
          })
          .when('/todolist', {
              templateUrl: 'views/todolist.html',
              controller: 'listeCtrl'
          })
          .when('/testfiltre', {
              templateUrl: 'views/testfiltre.html',
              controller: 'demoFiltreCtrl'
          })
          .when('/testCreationfiltre', {
              templateUrl: 'views/testcreationfiltre.html',
              controller: 'demoCreationFiltreCtrl'
          })
          .otherwise({
              redirectTo: '/home'
          });
      }
  ]);
  
  
  
  var routeAppControllers = angular.module('routeAppControllers', []);
  
  routeAppControllers.controller('homeCtrl', ['$scope',
      function($scope){
          $scope.message = "Bienvenue sur la page d'accueil";
      }
  ]);
  
  routeAppControllers.controller('contactCtrl', ['$scope','$routeParams',
      function($scope, $routeParams){
          $scope.message = "Laissez-nous un message sur la page de contact !";
          $scope.msg = $routeParams.msg || "Bonne chance pour cette nouvelle appli !";
      }
  ]);
  
  routeAppControllers.controller('listeCtrl', [function(){}]);
  </code></pre>
  
  <p>I have todolist module in todolist_controller.js:</p>
  
  <pre><code>var todoList=angular.module('todoList',[]);
  
  todoList.controller('todoCtrl', ['$scope',
      function ($scope) {
  
          var todos = $scope.todos = [];
  
          $scope.addTodo = function () {
              var newTodo = $scope.newTodo.trim();
              if (!newTodo.length) {
                  return;
              }
              todos.push({
                  title: newTodo,
                  completed: false
              });
  
              $scope.newTodo = '';
          };
  
          $scope.removeTodo = function (todo) {
              todos.splice(todos.indexOf(todo), 1);
          };
  
          $scope.markAll = function (completed) {
              todos.forEach(function (todo) {
                  todo.completed = completed;
              });
          };
  
          $scope.clearCompletedTodos = function () {
              $scope.todos = todos = todos.filter(function (todo) {
                  return !todo.completed;
              });
          };
      }
  ]);
  </code></pre>
  
  <p>I have my index.html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="fr" ng-app="demoApp"&gt;
          &lt;head&gt;
              &lt;meta charset="utf-8" /&gt;
              &lt;title&gt;Demo App&lt;/title&gt;        
              &lt;link rel="stylesheet" href="styles/style.css"&gt;
              &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"&gt;&lt;/script&gt;
              &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"&gt;&lt;/script&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.2/angular-locale_fr-ca.min.js"&gt;&lt;/script&gt;
              &lt;script src="scripts/controllers/app.js"&gt;&lt;/script&gt;
              &lt;script src="scripts/controllers/todolist_controllers.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div ng-view&gt;
              &lt;/div&gt;
              &lt;nav&gt;
                  &lt;a href="#/home" class="btn btn-primary"&gt;Page d'accueil&lt;/a&gt;
                  &lt;a href="#/contact" class="btn btn-success"&gt;Page de contact&lt;/a&gt;
                  &lt;a href="#/todolist" class="btn btn-primary"&gt;Todo list&lt;/a&gt;
                  &lt;a href="#/testfiltre" class="btn btn-success"&gt;test filtre&lt;/a&gt;
                  &lt;a href="#/testCreationfiltre" class="btn btn-primary"&gt;test création filtre&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I read that I'm suppose to call, for example, my main module App and all my other module file should start with: angular.module('App').controller(...</p>
  
  <p>But, this would imply that if I change the name of my app from 'app' to 'my_app' for example, I would have to go trough all my controllers and change 'app' for 'my-app'. </p>
  
  <p>I would like to avoid that and just be able to import my file in index.html and just have to declare it in the dependencies of my 'app' module.</p>