title: How to fix error caused by separating the angularjs code from the html code?
body: <p>I am setting up the app.js file in my angular application but i am getting n error in the console. I have all the files following the each other as recommended and icluded. How do i solve this error "</p>
  
  <blockquote>
    <p>Error: "[$compile:tpload] <a href="http://errors.angularjs.org/1.6.9/$compile/tpload?p0=main.html&amp;p1=404&amp;p2=Not%20Found" rel="nofollow noreferrer">http://errors.angularjs.org/1.6.9/$compile/tpload?p0=main.html&amp;p1=404&amp;p2=Not%20Found</a>"?</p>
  </blockquote>
  
  <p>Below is the code i am using.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap  /4.3.1/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="content/css/main.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="main_bg" ng-app="Travelapp"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt; 
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  
  
  <pre><code>var app = angular.module('Travelapp', ["ngRoute"]);
  app.config(function($routeProvider){
      $routeProvider
      .when("/",{
        templateUrl: "main.html",
        controller: "mainController"
      })
      .otherwise({
        template: "&lt;h1&gt;Request error&lt;/h1&gt;&lt;br/&gt;&lt;p&gt;Error in your request, Could not be handled&lt;/p&gt;"
      });
  });
  
  app.controller("mainController", function($scope){    
  });
  </code></pre>