(ASP.NET MVC, AngularJS) - Installing AngularJS in ASP.NET MVC with Visual Studio

What this article covers?

How to Install AngularJS in your project?

Understanding Nuget Package Manager in VisualStudio.

How to use AngularJS library?

AngularJS Hello World Example

By the completion of this article you will get knowledge on how to install (or) integrate the AngularJS in your ASP.NET MVC application with Visual Studio.

Before proceeding I suggest you to refer my previous articles. 

AngularJS - Overview

ASP.NET MVC - Creating Hello World Application with Visual Studio 2017

How to Install AngularJS in your project?

You can install the AngularJS in your application with the help of the Nuget Package Manager Tool in the Visual Studio.

Open your project and go to the Solution Explorer, Right Click on the project and select Manage Nuget Packages option, it will open the Nuget Package Manager window. 

Click on the Browse menu.

Search for the AngularJS, then select the AngularJS library.

You have a provision to install specific version based on your preference. By default latest version will be selected, if you want to install specific version select it and then click on install, then it’ll be added to your application.

Please check the installation status in the Output window. If the plugin installation failed you can check the reasons for Installation failing.

So now all the AngularJS libraries will be available in Scripts folder in the project.

How to use AngularJS in your project?

If you want to use the AngularJS in one page you can directly add reference to the Angular.js file in your View.

Open the View and add the reference to Angular.js file as shown below.

Now the AngularJS will be loaded dynamically into your view while page loading.

AngularJS Hello World Example

Let’s add a small code snippet to your page. Add the html content to your View body as shown below.

Code Explanation:

In the above script ng-app tells the Angular that please initialize and then parse all the nodes within it.

Initializing the value of the message variable using the ng-init directive, and then binding the same message to the h1 element with the help of Angular Expressions.

Now run the application Angular will display the output as shown below.