Master AngularJS with .NET Core: The Ultimate Tutorial for Building Scalable Web Apps

AngularJS is a highly popular JavaScript framework, widely used in web development due to its efficiency in creating dynamic and interactive user interfaces. In recent years, .NET Core has been gaining traction as a flexible, cross-platform development platform. Integrating AngularJS with .NET Core can amplify the strengths of both technologies, allowing for rapid development of robust, modern web applications. This tutorial walks you through the process of creating an AngularJS application using .NET Core.

Before we dive in, ensure you have installed the following prerequisites: .NET Core SDK (2.2 or later), Node.js (10.x or later), and Angular CLI (version compatible with your .NET Core version).

Setting up the AngularJS Project with .NET Core

.NET Core comes with Razor Pages, a simplified, model-view-controller (MVC) inspired web framework. Since AngularJS is a view framework, we'll structure our project around Razor Pages to utilize both technologies effectively.

To start, create a new ASP.NET Core Web App (Razor Pages) project using the .NET Core CLI. Navigate to your project directory in the terminal and run:

Install Angular CLI and initialize the Angular app

First, install Angular CLI globally using npm (Node Package Manager):

npm install -g @angular/cli

Then, initialize an Angular app inside the ' wwwroot' folder of your .NET Core project using Angular CLI:

ng new wwwroot --routing false

Update project configurations for AngularJS

Open your project's .csproj file and add the 'DistributeAngular' target to the 'ItemGroup' tag:

<Target Name="DistributeAngular">
  <Exec Command="ng build --prod" WorkingDirectory="wwwroot" />
</Target>

Add this line at the end of the file to call the 'DistributeAngular' target every time the application is built:

<Target Name="Build" />
<Target Name="AfterBuild">
  < targets='DistributeAngular' />
</Target>

Integrating AngularJS with Razor Pages

Now that our project is set up, let's integrate AngularJS with our Razor Pages.

In your Razor Pages, add a div element where the AngularJS content will be rendered:

<div id="appRoot"></div>

Add script references in _ViewStart.cshtml

Open '_ViewStart.cshtml' in your project's 'Pages' folder. At the end of the 'Head-section' tag, add this line for the Angular bundle:

<script src="~/wwwroot/app/app.js"></script>

Bootstrapping AngularJS in _ViewImports.cshtml

In '_ViewImports.cshtml', add these lines to bootstrap the AngularJS application:

@inject IHtmlHelper Html
@Html.AngularScript("appImported")

Now, replace '~/wwwroot/app/app.js' with the appropriate path to your app's entry point in the script tag added earlier, and restart your ASP.NET Core application.

Creating Your First AngularJS Controller

Let's create a basic AngularJS controller. In your Angular app (inside 'wwwroot/app'), create a new controller file like home.controller.js with this content:

angular.module('app').controller('homeCtrl', function ($scope) {
  $scope.message = 'Hello from AngularJS!';
});

Then, update your app.js to include this new controller. Finally, reflect your app's changes in the Razor Page by updating its content within the 'appRoot' div:

@inject AngularService Angular


  @{Html.Angular("homeCtrl", "appRoot");}

You've now successfully integrated AngularJS with your .NET Core project. Continue to expand your AngularJS app within the 'wwwroot\app' folder, and update your Razor Pages to leverage this integration.

Hosting the Angular App

To serve the Angular app, update the file path in the Startup.cs file's ConfigureServices method:

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "wwwroot/app";
});

In the Configure method, add the following lines before the app.UseHttpsRedirection(); line:

app.UseStaticFiles();
app.UseSpaStaticFiles();

Finally, change the route for the Angular app in the app.UseEndpoints line:

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapSpaFallbackNavigation("./app");
});

Restart your ASP.NET Core application, and your Angular app should now be hosted on the root URL (e.g., 'http://localhost:5000').

Conclusion and Next Steps

By integrating AngularJS with .NET Core, you've expanded your toolset to tackle modern web development challenges. From here, you can build upon this foundation by exploring AngularJS concepts like directives, services, and routing, as well as leveraging .NET Core features like middleware, dependency injection, and C# async programming. Happy coding!