Just diving into the world of AngularJS. I am using the $http service to make a request for an HTML page from localhost. However, instead of getting the desired result, I'm seeing the source code of the page.
http_service.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJs | HTTP Service</title>
<script src="js/angular.min.js"></script>
<script>
// Setting up the Angular Application
var app = angular.module('myApp', []);
// Creating an Angular Controller
app.controller('controller', function($scope, $http){
// Making a request to fetch a page from the remote server
$http.get('files/myFile.html')
// Using a success function after initializing the $http object
.then(function(response){
$scope.reqData = response.config;
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="controller">
<h4>{{reqData}}</h4>
</body>
</html>
files/myFile.html
<!DOCTYPE html>
<html>
<head>
<title>My file</title>
</head>
<body>
<h1>Hello from AngularJS by Google</h1>
</body>
</html>
Is there a way to display the heading in myFile.html instead of showing the source code?