Visual Studio 2017: Adding AngularJS with a simple method

Article
1/17/2024

Introduction

This article explains how to add AngularJS in Visual Studio. We can add AngularJS in many different ways to develop an application in Visual Studio.

Steps for Adding AngularJS

Step 1

Open Visual Studio 2017.

Go to File >> New >> Project. The "New Project" window will open now. Select ASP.NET Web application (.NET Framework) under the web, give Project name, and click OK.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image001.jpg

Select "Empty Project" in New ASP.NET Web Application window and click OK.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image002.jpg

Step 2

Open your empty project now. Go to Solution Explorer. You can see all the files of your project here.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image003.jpg

We need to add AngularJS script and supporting files to develop an application in AngularJS. Now, we see no supporting files or script files in our project's Solution Explorer.

Step 3

We are going to add AngularJS script and supporting files. Go to Tools menu, select NuGet Package Manager, and select "Manage NuGet Packages for solutions'.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image004.jpg

Step 4

NuGet-Solution window will open. Go to Browser and type “angularjs” in search text box. You will see all the related AngularJS on the below list.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image005.jpg

Step 5

Select AngularJS like in below screenshot and select check box on the right side. We need to add AngularJS to our project. Finally, click the "Install" button.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image006.jpg

Now, click OK button in the preview window that looks like below screenshot.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image007.jpg

Step 6

It will take a few minutes to add AngularJS to our project. After adding AngularJS, we can see this looks like the below message.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image008.jpg

Before adding AngularJS, we do not have script folder in our Solution Explorer but now, we can see the script folder. We can see all scripts and support files inside the script folder.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image009.jpg

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image010.jpg

Step 7

We are going to add a simple page and implement a simple AngularJS page, which we have added. Add simple HTML page and give the name as “Test.htm”.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image011.jpg

Step 8

Inherit Angular script and add the following coding in the test.html page.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image012.jpg

Code

<!DOCTYPE html> 
<html> 
  
<head> 
 <meta charset="utf-8" /> 
 <script src="Scripts/angular.js"></script> 
 <title></title> 
</head> 
  
<body ng-app> 
 <h2>Welcome to angularJS Test Page</h2> <br  /> 
 <h3>Addition</h3> {{10+10}} <br  /> 
 <h3>Subtraction</h3> {{30-10}} <br  /> 
 <h3>Multiplication</h3> {{5*4}} <br  /> 
 <h3>Division</h3> {{100/5}} <br  /> </body> 
  
</html>

Step 9

Build and run the application. We can see the exact output so our AngularJS application is working correctly. We developed simple AngularJS page using which we have added script.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/way-of-adding-angular-in-visual-studio-2017-in-simple-method/Images/image013.jpg

Conclusion

This article explained how to add AngularJS in Visual Studio 2017 in a simple way. I hope this article was very useful to those who are new to learning AngularJS.

Share via