AngularJS in MVC with WEBAPI

These days, AngularJS and ASP.NET MVC is getting focus on web development world.In this post we will learn how to combine the best of both worlds and use the goodness of AngularJS in ASP.NET MVC by demonstrating how to use AngularJS in an ASP.NET MVC application. This sample application will help to understand how AngularJS can integrate on MVC UI frame work and call a web API to populate the data.
Controller
A controller is the JavaScript constructor function which contains data and business logic. The controller and the view talk to each other using the $scope object. Scope is nothing but binding. It binds a logical view model to physical model.
Service
A service is the function by which an instance gets created once per application life cycle. Anything shared across the controller should be part of the service. A service can be created in many different ways. The most popular way is by using the service method or the factory method.
Modules
Modules are the functions which contain other functions like a service or a controller. There should be at least one module per Angular app.
This Application has three sections. Before you copy this code please make sure you have created a ASP.NET MVC application ready:
1. Create ASP.NET Web Application using MVC template.
2. Add AngulrJs libraries to the application (This sample use web reference)
3. Create a WEBAPI get method to punch out JSON object.
Create a App.JS file under scripts and copy this code:

var CountryApp = angular.module('CountryApp', []);
CountryApp.controller('CountryController', function ($scope, CountryService) {
    getCountries();
    function getCountries() {
        CountryService.getCountries()
            .success(function (data) {
                $scope.countries = data;
            })
            .error(function (error) {
                $scope.status = 'Unable to load country data: ' + error.message;
            });
    }
});

CountryApp.factory('CountryService', ['$http', function ($http) {
    var CountryService = {};
    CountryService.getCountries = function () {
        return $http.get('/Api/Home');
    };
    return CountryService;
}]);

Copy this code in API controller

        public List<Country> Get()
        {
            return new List<Country>()
            {
                new Country() {Name = "USA",Region = "NA",ID =  1 },
                new Country() {Name = "India",Region = "Asia", ID = 2 }
            };
        }

Index.chtml page will looks like below

<!DOCTYPE html>
    <html >
    <head>
        <title ng-bind="models.helloAngular"></title>
    </head>
    <body>
<div ng-app="CountryApp" class="container">
<div ng-controller="CountryController">
<table class="table">
<tr ng-repeat="r in countries | filter : searchCountry">
<td>{{r.ID}}</td>
<td>{{r.Name}}</td>
<td>
                            {{r.Region}}</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="~/Scripts/Controllers/App.js"></script>
     </body>
    </html>

Model class

    public class Country
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Region { get; set; }
    }

Folder stracture should be:
Capture.PNG

AngularJS Code Samples

AngularJS, a JavaScript framework developed by a Google and supported by Google. As the technology grows we have lost the patience to wait for a search results on web and wanted faster results. We do not want to render a HTML page on server side and the concept of Single page Application (SPA) started which leads to many front-end frameworks like Knockout, Ember, Angular, backbone what not!
Briefly: AngularJS is focused on maintaining data models for objects, and how they are viewed on the front end. It assists with running single-page applications (SPA).
AngularJS uses a Model-View-Controller programming concept. This involves separating the:
– Model (the data objects represented in your application), from the
– View (all the stuff the user sees — for example, all the differently tweaked screens and sub screens in Android vs iOS vs desktop browser versions of Chrome/Firefox/IE/Safari, etc), from the
– Controller (the glue code that manages the Model and connects it with the various Views).
Before we get into any theory, let us get our hands dirty with some actual Angular code.
Let us see a small Hello World application and we will try to see what the new terminologies it brings up. In above demo, just write something in the textbox and press Add button. This will adds whatever you type in text box in an array. The content of array is displayed below in a list.

<!DOCTYPE html>
<html ng-app id="ng-app"> 
<title>Hello World, AngularJS</title> 
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script> 
</head> 
<body> 
<div ng-controller="ContactController">      
        Email:<input type="text" ng-model="newcontact"/>     
    <button ng-click="add()">Add</button>     
    <h2>Contacts</h2>       
        <ul>         
            <li ng-repeat="contact in contacts"> {{ contact }} </li>     
        </ul>   
</div> 
<script type="text/javascript">
    function ContactController($scope) {
        $scope.contacts = ["Jijo.Venginikkadan@barclayscapital.com", "vgjijo@gmail.com", "vgjijo@me.com"];

        $scope.add = function () {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";
         }
        }
</script> 
</body> 
</html> 

Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.
ng-controller defines a Controller to be bound with the view. In this case we defined a controller called ContactController in DIV using ng-controller attribute.
ContactController is nothing but a plain vanilla JavaScript function. In the demo we defined it as function. Also see the definition of ContactController function. There is an object $scope which we pass as an argument. This object is used to bind the controller with view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection
ngRepeat is one of the most used AngularJS attribute. It iterate through an array and bind the view with each element. So in our example it creates tag for each item within contacts array. ngRepeat takes expression as argument. In our case “contact in contacts” where contact is user defined variable and contacts is an array within $scope.
The function add() is bound to Add button using an attribute ng-click. ng-click binds the click event on the button or link or any clickable element with the function that is defined within $scope. So in this case, whenever Add button is clicked, the add() method on $scope will be called. In add() method we add (or push) a string in contacts array. This is the string that user ty