htmlangularjsngroute

How to fix error caused by separating the angularjs code from the html code?

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 "

Error: "[$compile:tpload] http://errors.angularjs.org/1.6.9/$compile/tpload?p0=main.html&p1=404&p2=Not%20Found"?

Below is the code i am using.

<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap  /4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>

<body class="main_bg" ng-app="Travelapp">
    <div class="container">
    </div> 
    <div ng-view></div>
    </div>
</body>

</html>

var app = angular.module('Travelapp', ["ngRoute"]);
app.config(function($routeProvider){
    $routeProvider
    .when("/",{
      templateUrl: "main.html",
      controller: "mainController"
    })
    .otherwise({
      template: "<h1>Request error</h1><br/><p>Error in your request, Could not be handled</p>"
    });
});

app.controller("mainController", function($scope){    
});
Solution

  • The error says that your main.html "Not Found". The cause of it can be that this file does not exist