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.
![ASP.NET]()
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.
![AngularJS]()
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.
![AngularJS]()
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.
![AngularJS]()
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.
![AngularJS]()
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.
![AngularJS]()
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.
![AngularJS]()
Project template Window will open after clicking OK button. Select Empty and click OK button in template Window.
![AngularJS]()
The empty project will open. Now, add one folder as Script in solution, which looks, as shown below.
![AngularJS]()
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.
![AngularJS]()
To implement Angular, we need to add Angular reference and add Directives in HTML tag, which look, as shown below.
![AngularJS]()
Code
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>AngularJS Begin</title>
- <script src="Script/angular.min.js"></script>
- </head>
- <body ng-app>
- <h2>Arithmetic Expression In Angularjs</h2> <br />
-
- <h3>Addition</h3>
- 10 + 20 = {{10+20}}
-
- <br /><h3>Subtraction</h3>
- 30 - 20 = {{30-20}}
-
- <br /><h3>Multiply</h3>
- 10 * 20 = {{10*20}}
-
- <br /><h3>Division</h3>
- 20 / 10 = {{20/10}}
-
- </body>
- </html>
Output
Finally, build and run the Application. We can see the output looks, as shown below.
![AngularJS]()
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.