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

Vignesh Mani

9y110k7100Article

7 Comments

Join the conversation! Your thoughts help the community grow.

Riddhi Valecha5y ago
Very Useful for beginners.... I have a query - I have a web service (.asmx) and I need to get data from that service on .aspx page using angular. I am getting an error ""[$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.https://errors.angularjs.org/1.8.2/$injector/nomod?p0=myModule"
Dharmendra Kumar Pandit6y ago
Its static, not helpfull for me. I want to fill html table from database using angularjs in aspx page without mvc. Can you help me in this regard. Thank you.
agathee sadhasivam8y ago
Thanks. Nice Article
Harshad Patel8y ago
Thx for Sharing Vignesh, but first its not Asp .NET, U R using simple HTML page, doesn't make any difference. If u have any pure ASP .net Example plz upload it.
Deepan8y ago
Thanks for valuable information
Anu V9y ago
Thanks for sharing.. Nice article..
Former member9y ago
Nowadays people are talking about angular js version2+ where you are talking about old angular version :(

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.

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.

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.

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.

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.

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.