Introduction to AngularJS HelloWorld with ASP.NET MVC5

Mathew Soji

Rate me:

4.64/5 (35 votes)

27 Sep 2014CPOL3 min read

66.4K

Basic introduction to using AngularJS framework along with ASP.NET MVC5

Introduction

This article introduces AngularJS with ASP.NET MVC5 application. We are developing a simple web application using Angular framework and its integration with ASP.NET MVC. Here, I will be developing a Hello World kind of ASP.NET MVC5 application using AngularJS .

Before we start, just a brief about AngularJS. AngularJS is an open source web development framework best fit for creating SPA (Single Page Application- An application in which we have a main page and we can load multiple views/pages into the main page). AngularJS extends HTML with new attributes to serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

ASP.NET MVC5 is an open source web development framework from Microsoft utilizing the power of ASP.NET and the .NET Framework.

For the demo application, I will be using Visual Studio Express 2013 for Web as development environment targeting .NET framework 4.5.

Step 1

Open Visual Studio 2013 for Web and create a new ASP.NET Web application selecting Empty template and checking the option to add folders and reference for MVC as below:

Now we have created a basic ASP.NET MVC folder with very minimal reference. The Solution Explorer looks as below:

Step 2

We need to download AngularJS files and add to our solution using NuGet package manager.

In VS 2013 Solution Explorer -> Right click on Reference and Select Manage NuGet Packages.
Search for ‘angularjs’ and Install the AngularJs Core library as shown below.

Note: Here instead of NuGet, you can download AngularJS library directly from the Angular web site and add to the scripts folder.

Once the installation is successful, we can see the AngularJS files under the Solution Explorer -> /scripts folder.

Step 3

Create a sub folder named ‘Angular’ under ’\Views’ folder in our solution explorer as below.

Solution Explorer -> Right Click Views folder -> Add -> New folder
Name the folder as ‘Angular’ to keep our views.
Solution Explorer -> Right Click Angular folder -> Add -> Views...
Add an empty template view and name it as Index.cshtml.

Step 4

Now we need to create a corresponding controller for our Angular views folder.

Solution Explorer -> Right Click Controller folder -> Add -> Controller…
Select MVC 5 Controller – Empty template and rename the controller file as AngularController.cs.

After step 3 and step 4, our solution explorer looks as below:

Now our application is ready to run. To test, hit F5 (or whatever you have configured your debug key in Visual Studio) and see the blank index page loaded.

Step 5

To use Angular framework as part of our application, we need to add reference to the script file as below.

In our Index.cshtml file, add code as below. You can simply drag and drop the AngularJS script file also under the HTML head tag. Adding AngularJS script file enables our ASP.NET MVC 5 application to utilize the capabilities of Angular framework.

HTML

@*Index.cshtml*@
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
        <script src="~/scripts/angular.js"></script>
    <title>Index</title>
</head>
<body>
    <div>
        Angular JS Demo
    </div>
</body>
</html>

Step 6

Next, we are adding code to display the simple binding capability of Angular framework.

Add the below code to our view.

Here ng-app directive is added to define the div section as an Angular JS application. Without this directive, our application fails to produce AngularJS capabilities.

ng-model directive binds the HTML5 input text box control to the Angular application variable “helloworld”.

HTML

{{  }} - AngularJS expressions are written inside double braces {{ expressionname }}.
@*Index.cshtml*@
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/scripts/angular.js"></script>
    <title>Index</title>
</head>
<body>
    <div ng-app="">
        Angular JS Demo <br />
        Input :  <input type="text" ng-model="helloworld" /><br />

        {{helloworld}}

    </div>
</body>
</html>

Now, hit F5 (or whatever you have configured your debug key in Visual Studio) to see the AngularJS binding demo. Enter some text in the input control and the same text will be displayed using Angular below the input control.

This is just a beginner article on how to use Angular framework with ASP.NET MVC 5. Please refer to the Angular documentation for more details on AngularJS directive and its capabilities.

In a production version, we need to use the bundling features of ASP.NET to improve the load time. Also, you can load the AngularJS script file from a content delivery network (CDN) server as a best practice.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Mathew Soji

Software Developer

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.