Migrate from ASP.NET MVC 5 to ASP.NET Core 7 Web API

Controllers/LandingController.cs

@@ -1,16 +1,21 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Web;
-using System.Web.Mvc;
+using Microsoft.AspNetCore.Mvc;
 
 namespace asp_net_angularjs.Controllers
 {
-  public class LandingController : Controller
-  {
-    public ActionResult Index()
+    [ApiController]
+    [Route("api/[controller]")]
+    public class LandingController : ControllerBase
     {
-      return View();
+        [HttpGet]
+        public IActionResult Get()
+        {
+            return Ok(new { message = "ASP.NET Core 7 Web API is running", timestamp = DateTime.UtcNow });
+        }
+
+        [HttpGet("health")]
+        public IActionResult Health()
+        {
+            return Ok(new { status = "healthy", service = "angularjs-aspnetcore-webapi" });
+        }
     }
-  }
 }

Program.cs

@@ -0,0 +1,48 @@
+using Microsoft.Extensions.FileProviders;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddControllers();
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen();
+
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowAngularJS", policy =>
+    {
+        policy.AllowAnyOrigin()
+              .AllowAnyMethod()
+              .AllowAnyHeader();
+    });
+});
+
+var app = builder.Build();
+
+if (app.Environment.IsDevelopment())
+{
+    app.UseSwagger();
+    app.UseSwaggerUI();
+}
+
+app.UseHttpsRedirection();
+
+app.UseCors("AllowAngularJS");
+
+app.UseStaticFiles();
+
+app.UseStaticFiles(new StaticFileOptions
+{
+    FileProvider = new PhysicalFileProvider(
+        Path.Combine(builder.Environment.ContentRootPath, "node_modules")),
+    RequestPath = "/node_modules"
+});
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapControllers();
+
+app.MapFallbackToFile("index.html");
+
+app.Run();

Properties/launchSettings.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:51267",
+      "sslPort": 0
+    }
+  },
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "https://localhost:7000;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

angularjs-aspnetcore-webapi.csproj

@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>asp_net_angularjs</RootNamespace>
+    <AssemblyName>asp-net-angularjs</AssemblyName>
+    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.10" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.8.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Remove="App_Start/**" />
+    <Compile Remove="Global.asax.cs" />
+    <Compile Remove="Views/**" />
+    <Content Remove="Views/**" />
+    <Content Remove="Global.asax" />
+  </ItemGroup>
+
+</Project>

appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}

wwwroot/css/site.css

@@ -0,0 +1,4 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  padding: 20px;
+}

wwwroot/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width" />
+  <title>XLTS for AngularJS with ASP.NET Core</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/css/site.css" />
+  <link rel="stylesheet" href="/js/Components/test.component.css" />
+  <link rel="stylesheet" href="/js/Directives/test.directive.css" />
+</head>
+<body ng-app="app">
+  <h1 data-testid="title">XLTS for AngularJS with ASP.NET Core</h1>
+  <test-directive></test-directive>
+  <test-component></test-component>
+
+  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="/node_modules/angular/angular.min.js"></script>
+  <script src="/js/app.js"></script>
+  <script src="/js/Components/test.component.js"></script>
+  <script src="/js/Directives/test.directive.js"></script>
+</body>
+</html>

wwwroot/js/Components/test.component.css

@@ -0,0 +1,5 @@
+.test-component {
+  color: #1565c0;
+  font-size: x-large;
+  font-weight: bold;
+}

wwwroot/js/Components/test.component.js

@@ -0,0 +1,17 @@
+angular.module('app').component('testComponent', {
+  controllerAs: 'vm',
+  controller: TestComponent,
+  template: '<div data-testid="angularjs-version" class="test-component">AngularJS Version: {{vm.version}}</div>',
+  bindings: {},
+});
+
+TestComponent.$inject = ['$log'];
+
+function TestComponent($log) {
+  var vm = this;
+  vm.version = angular.version.full;
+
+  vm.$onInit = function () {
+    $log.info('test-component initialized...');
+  };
+}

wwwroot/js/Directives/test.directive.css

@@ -0,0 +1,5 @@
+.test-directive {
+  color: #2196f3;
+  font-size: large;
+  font-weight: bold;
+}

wwwroot/js/Directives/test.directive.html

@@ -0,0 +1 @@
+<div data-testid="jquery-version" class="test-directive">jQuery Version: {{ vm.version }}</div>

wwwroot/js/Directives/test.directive.js

@@ -0,0 +1,17 @@
+angular.module('app').directive('testDirective', TestDirective);
+
+TestDirective.$inject = ['$log'];
+
+function TestDirective($log) {
+  return {
+    restrict: 'E',
+    scope: {},
+    templateUrl: '/js/Directives/test.directive.html',
+    controllerAs: 'vm',
+    controller: function () {
+      var vm = this;
+      vm.version = $().jquery;
+      $log.info('test-directive initialized...');
+    },
+  };
+}

wwwroot/js/app.js

@@ -0,0 +1 @@
+angular.module('app', []);