Share via

Overview And Getting Started With AngularJS In ASP.NET Using Visual Studio 2017

  • Article

Introduction

This article explains how to use AngularJS in ASP.NET, using Visual Studio 2017 and how to setup AngularJS supporting files to develop a Web Applications, using AngularJS.

AngularJS

AngularJS is a JavaScript framework. It is used to build dynamic Web Applications. We are using AngularJS with HTML tag. It is very simple and develops in an easy way. It is a fully client-side Web Application. Google developed AngularJS. It is open source and especially desgned to develop single page Applications.

Benefits

  • Dependency Injection is the main benefit of an AngularJS. It helps the developer to develop an Application in an easy way.

  • Two-way data binding – If changes the value in Model or View. It automatically changes between View and Model.

  • AngularJS is developed with the testing environment with thre Applications. It is used to easily develop Unit Testing and End-to-End testing.

  • We can develop an Application with clean MVC (Model-View-Controller) structure. It helps to easily maintain our Applications.

  • Filters, Directives, Modules, Routes, Factories, Validators and Providers are very important in AngulerJS.

    http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image001.gif

Download AngularJS

We can download all supporting and script files in the URL https://angularjs.org/. We can download the latest and older versions from AngularJS Website. This Website provides many resources to learn the AngularJS.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image002.jpg

Now, click Download AngularJS and we can see the Branch, Build, CDN, Bower, npm options; which looks, as shown below. Select Build option as Zip.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image003.jpg

We can see the previous version of AngularJS, if we click Previous Version. Finally, click download and get all the supporting files to develop an Application, using AngularJS as a ZIP file.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image004.jpg

Select Save File and click OK. Now, it will save in our system, followed by extracting zip file, which we have downloaded in the folder.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image005.jpg

 After extracting the folder, we can see the two important JavaScript files inside Angular-1.6.3 folder. One is angular and another one is angular.min, which looks, as shown below. Using this script file, we can develop an Application in AngularJS.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image006.jpg

Using AngularJS in ASP.NET

Open new project in Visual Studio. Now, New Project Window will open. Afterwards, select Web. After selecting Web, select ASP.NET Web Application (.NET Framework) under The Web. We need to give the project name in name column, which looks, as shown below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image007.jpg

Project template Window will open after clicking OK button. Select Empty and click OK button in template Window.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image008.jpg

The empty project will open. Now, add one folder as Script in solution, which looks, as shown below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image009.jpg
Now, copy angular or angular.min script file from angular-1.6.3 folder, which needs to be downloaded from Angular Website and the past into script folder in ASP.NET. Now, add one HTML page in the solution.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image010.jpg

To implement Angular, we need to add Angular reference and add Directives in HTML tag, which look, as shown below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image011.jpg

Code

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>AngularJS Begin</title>  
  6.     <script src="Script/angular.min.js"></script>  
  7. </head>  
  8. <body ng-app>  
  9.     <h2>Arithmetic Expression In Angularjs</h2> <br />  
  10.   
  11.     <h3>Addition</h3>   
  12.     10 + 20 = {{10+20}}  
  13.   
  14.     <br /><h3>Subtraction</h3>  
  15.     30 - 20 = {{30-20}}  
  16.   
  17.     <br /><h3>Multiply</h3>  
  18.     10 * 20 = {{10*20}}  
  19.   
  20.     <br /><h3>Division</h3>  
  21.     20 / 10 = {{20/10}}  
  22.   
  23. </body>  
  24. </html>   

Output

Finally, build and run the Application. We can see the output looks, as shown below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/overview-and-starting-way-of-angularjs-in-asp-net-using-visual-studio-2017/Images/image012.jpg

Conclusion

This article has explained about AngularJS and how to start new AngularJS for new learners. This step by step article helps new learners and developers. The next article will explain about AngularJS topics in a detailed manner.