AngularJS for .Net Developers Part 1

Tuesday, October 20, 2015

AngularJS for .Net Developers Part 1

AngularJS is a popular client side MVC and MVVM Javascript library used for creating Single Page Application.

Starting an Empty Web Site Project in Visual Studio 2015 and adding Nuget packages for AngularJS Core and Routing.

Though AngularJs can be developed using any Text Editor I prefer using Visual Studio which also provides intellisense for AngularJS.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
</head>
<body>

    <div ng-app="">
        Name <input type="text" ng-model="Name"/>
        <br/>
        Hello {{Name}}
    </div>

</body>
</html>

AngularJS comprises of Directives which can be defined as Html Atrributes. ng-model here behind the scene creates a property in the ViewModel.

{{}} is equivalent to <% %> in Asp .Net Web Forms.

As you type inside the textbox, the Hello message gets updated,

ng-repeat Directive

ng-repeat is equivalent to foreach in C#, ie. iterating a colleciton.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="" ng-init="names=['Shalvin P D','Ajay','Rajeev']">
        <ul>
            <li ng-repeat="x in names">
                {{ x }}
            </li>
        </ul>
    </div>
</body>
</html>

Here I am using ng-init for initilizing the data.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="" ng-init="names=[
{name:'Shalvin',location:'Kochi'},
{name:'Rajeev',location:'Kollam'},
{name:'Ajesh',location:'Alappey'}]">

        <ul>
            <li ng-repeat="x in names">
                {{ x.name + ' - ' + x.location }}
            </li>
        </ul>
    </div>
</body>
</html>

Here I am using a complex array comprising of name and location.

$scope Service

In AngularJS whatever starts with $ is a service. $scope service is equivalent to ViewBag in Asp .Net MVC. It is the glue between Controller and View. $scope supports two way data binding.

Modules
Modules are equivalent to namespace in .Net.

<!doctype html>

<html ng-app="Contacts">
<head>
    <title>Contact Management</title>
   
    <script src="Scripts/angular.js"></script>
    
    <script>
      
      var parking = angular.module("Contacts", []);
     
      parking.controller("HomeCtrl", function ($scope) {
       
        $scope.Contacts = [
          {Name: 'Shalvin'},
          {Name: 'Sooraj'},
          {Name: 'Mahesh'}
        ];
        
      });
    </script>
</head>

<body ng-controller="HomeCtrl">
    <h3>Modules and Controllers - Shalvin</h3>
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
               <tr ng-repeat="n in Contacts">
                   <td>{{n.Name}}</td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

Here I am defining a Module named Contacts which contains a controller named HomeCtrl. Inside the controller I an array of Names and passing it to View.