In the preceding section, we were able to run the application and noticed that the default view is served is the ASP.NET MVC Index view of HomeController. Now, let's update the Index.cshtml view with the content of the Index.html file located under the wwwroot folder. The updated Index.cshtml is shown here:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>My Todo</title>
<script>document.write('<base href="' +
document.location + '" />');</script>
<meta charset="UTF-8">
<!-- Polyfills -->
<script src="libs/shim.min.js"></script>
<script src="libs/zone.min.js"></script>
<script src="libs/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){
console.error(err); });
</script>
</head>
<body>
<h1>My Todo App</h1>
<my-app>Loading My Todo App...</my-app>
</body>
</html>
Run the application now by pressing F5 and note that the my-app special tag has been replaced with the parsed template of app.component.html by Angular, as follows:
Angular app loaded onto the ASP.NET MVC Index view