Hello World Example With AngularJS and ASP.NET MVC

This article equips you to create your first hello world example using AngularJS framework and ASP.NET MVC.

Here I will give brief introduction to AngularJS framework and steps to create your first application with AngularJS features like ng-app, controller, two way bindings etc.


Introduction to AngularJS

AngularJS is structural JavaScript framework. It helps you to make your Web App dynamic by extending plain HTML with new attributes. It gives you ng-app, ng-model, ng-bind directives. It also provides easy way for two way binding and dependency injection.

AngularJS provides all features and flexibility to build dynamic, CRUD support, data binding, data/input validation, reusability through templates, url routing. It also allow you for writing automated unit testing, mock tests and end to end testing.

It supports MV* architecture means AngularJS gives you flexibility to design your application with Model, View and Whatever (MVC / MVVM / MVW) approach.


Hello World with AngularJS

Open your visual studio and create empty ASP.NET MVC application. Name it as FirstAngularJS. Newly created project should have Model, View, Controller folders.

Right click on Controller folder and add new controller with name Home. Open Home controller and add new ActionResult with name FirstAngularPage.

Right click on FirstAngularPage ActionResult and Add new view. In this view you will use AngularJS ng-app directive. ng-app directive tells AngularJS that the element which it is associated is the root element of application. Usually it is placed with page or root div of page.

AngularJS uses {{ }} to manipulate data. Add below code to FirstAngularPage.cshtml. Where ng-app is associated to div.


<!DOCTYPE html>
<html>
<head>
    <title>First Angular Page<title>
</head>
<body>
    <div id="angular" ng-app>
        {{"Hello"+" World"}}
        <br />
        {{20+40}}
        <br />
        {{[10,20,30,40,50][3]}}
        <br />        
            {{"Hello"+" World"}}
    </div>
    <div id="static">
        {{"Hello"+" World"}}
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"
        type="text/javascript"></script>
</body>
</html>

            

The content inside the div which is associated with ng-app can use AngularJS features. Anything which uses {{}} will be manipulate by AngularJS.

The first line will concatenate the string and returns string "Hello World".
Second statement will add two numbers and return result.
Third statement returns third element of array.

The contents of second div which has id static will not be manipulate by AngularJS as it is not associated by ng-app directive. So it returns static "{{"Hello"+" World"}}".

The script has reference to AngularJS from Google CDN which allow you to use AngularJS framework and its features.

Now execute the application and browse to http://localhost:60334/home/FirstAngularPage. It shows you result of your first AngularJS application as shown below picture.

hello world example with angularjs


AngularJS Controller

$controller is service responsible for instantiating controllers. It is Javascript constructor function which instantiates a controller object with injectable $scope parameter.

You can attach controller to DOM element using AngularJS ng-controller directive.

The AngularJS controller are used to set initial state of $scope object or add behavior to $scope object. It should ideally be contain only business logic required for single view. You should always encapsulate operations into services which are not related to controller and then use these services in controller by hooking up dependency injection.

To see example of AngularJS controller open HomeController and add below Action method.


public ActionResult SecondAngularPage()
{
    return View();
}     
           
            

In HomeController right click on SecondAngularPage and select Add View.
Add below HTML code in SecondAngularPage.cshtml


<!DOCTYPE html>
<html ng-app>
<head>
    <title>Second Angular Page</title>
</head>
<body>
    <div ng-controller="HWController">
        {{helloMessage}}
    </div>

    <div ng-controller="HWController2">
         Full Name: {{firstName + " " + lastName}}
    </div>

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs
                        /1.2.26/angular.min.js"></script>
   <script>
        function HWController($scope) {
            $scope.helloMessage = "Hello World from Angular Controller 1";
        }

        function HWController2($scope) {
            $scope.firstName = "John",
            $scope.lastName = "Doe"
        }
    </script>
</body>
</html>            
    
            

Notice that the ng-app directive is associated with html tag. So you can use AngularJS features anywhere in this view.

In script part I created two functions which uses Angular controllers. For introduction to controller I just set some values to $scope parameter of controller.

I attached ng-controller to the div element. So you can use the objects which are created by corresponding controller. You need to set controller name to ng-controller directive.

Now execute the application and browse to http://localhost:60334/home/SecondAngularPage. It shows below output.

AngularJS controller example

Download source code

Speak your mind :
Leave a comment for this article on dotnetbloogers.com
User profile picture on dotnetmentors.com

by C at 4/29/2015 5:37:00 AM
Gr8 article to start angularjs
post comment on dotnetmentors.com
User profile picture on dotnetmentors.com

by lewishai at 10/6/2015 8:50:00 PM
It's good article, it's simple and easy to learn. Have an Angularjs, MVC, RESTful Web Service Entity frame work example here
post comment on dotnetmentors.com
User profile picture on dotnetmentors.com

by Raj at 11/24/2015 10:29:00 PM
good article
post comment on dotnetmentors.com