How to have controllers in separate file in AngularJS
<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>