title: How to separate routes in angularjs
body: <p>So i created a simple app.js like this </p>
  
  <pre><code>var app = angular.module('app', ['ngRoute', 'ngResource']);
  
  
  app.config(function ($routeProvider) {
  
    $routeProvider
  
        .when('/', {
          templateUrl: 'html/home.html',
  
        });
  
  
  });
  </code></pre>
  
  <p>but when i create a separate file routes.js</p>
  
  <pre><code>app.config(function ($routeProvider) {
  
      $routeProvider
      .when('/', {
          templateUrl: 'html/home.html',
  
  });
  
  
  });
  </code></pre>
  
  <p>The homepage is not shown. I double checked everything and i added the routes.js to the index page. </p>
  
  <p>But it gives me this error : Uncaught ReferenceError: app is not defined.
  But i don't know why? the app is not an anonymous function.</p>
  
  <p>This is my index page </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  
      &lt;script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="routes.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>