title: Angularjs: How to create separate files for the main-module and the main-controller
body: <p>I've the same issues as in <a href="https://stackoverflow.com/questions/20087627/how-to-create-separate-angularjs-controller-files">how-to-create-separate-angularjs-controller-files</a>, but it seems to be a little bit more complicated: I want to separate my module declaration and the "MAIN-Controller" into separate files, say app.js and appCtrl.js. </p>
  
  <p>app.js contains:</p>
  
  <pre><code>angular.module('app', []);
  </code></pre>
  
  <p>appCtrl.js contains:</p>
  
  <pre><code>angular.module('app').controller('appCtrl', function($scope){
      $scope.model = { MyValue : "coucou" };
  }]);
  </code></pre>
  
  <p>Following code is ok:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app.js"/&gt;
      &lt;script src="scripts/ctrl/appCtrl.js"/&gt;
  &lt;/head&gt;
  &lt;body ng-app="app" ng-controller="appCtrl"&gt;
      My value = {{model.MyValue}}
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but following code is NOT OK:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body ng-app="app" ng-controller="appCtrl"&gt;
      My value = {{model.MyValue}}
  
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app.js"/&gt;
      &lt;script src="scripts/ctrl/appCtrl.js"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Angular throws the Error: "[ng:areq] Argument 'appCtrl' is not a function, got undefined" Unfortunately, the latter is the recommanded way to include angular and the modules...</p>
  
  <p>Is there a solution to this issue? Thank you in advance!</p>