Click here to Skip to main content
13,800,880 members
Click here to Skip to main content
Add your own
alternative version

Stats

54.4K views
47 bookmarked
Posted 27 Sep 2014
Licenced CPOL

Introduction to AngularJS HelloWorld with ASP.NET MVC5

, 27 Sep 2014
Rate this:
Please Sign up or sign in to vote.
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.

@*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”.

{{  }} - 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)

Share

About the Author

Mathew Soji
Software Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questiongreat Pin
edthehorse19-Sep-18 2:50
memberedthehorse19-Sep-18 2:50 
QuestionVery good for beginners! Pin
Mr. Javaman27-Apr-15 4:37
memberMr. Javaman27-Apr-15 4:37 
AnswerRe: Very good for beginners! Pin
Mathew Soji27-Apr-15 21:31
professionalMathew Soji27-Apr-15 21:31 
GeneralCould be a great Tip, definitely not a good article. Pin
debashishPaul8-Feb-15 20:35
professionaldebashishPaul8-Feb-15 20:35 
QuestionPretty basic yet useful. Pin
Yasser S18-Dec-14 21:53
professionalYasser S18-Dec-14 21:53 
GeneralMy vote of 1 Pin
bacm8-Dec-14 3:10
memberbacm8-Dec-14 3:10 
QuestionMy vote is 5 Pin
Franz@654-Nov-14 11:43
memberFranz@654-Nov-14 11:43 
General[My vote of 1] Incomplete Pin
Pascen2-Nov-14 0:54
memberPascen2-Nov-14 0:54 
QuestionDoes not even scratch the surface Pin
Member 84427504-Oct-14 2:58
memberMember 84427504-Oct-14 2:58 
GeneralMy vote of 3 Pin
Member 1088482430-Sep-14 3:48
memberMember 1088482430-Sep-14 3:48 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun27-Sep-14 23:02
memberHumayun Kabir Mamun27-Sep-14 23:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.181215.1 | Last Updated 27 Sep 2014
Article Copyright 2014 by Mathew Soji
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid