Single Page Application with AngularJS in .NET

The first parameter is the name of your Angular app, for our demo it is named "App".

The second parameter is an array of dependencies, we have only two dependencies, currently, they are:

'AngularDemo.EmpAddController', 'AngularDemo.AddressController' and 'AngularDemo.DeleteController'.

ng-app directive

Once you name your AngularJs you need to use it in your HTML page depending upon your requirements. For this demo, I have used ng-app in the _Layout page in the HTML tag as in the following code snippet:

Client-side Routing

So, we have defined the name of our AngularJs app and specified an array of dependencies. Now, let’s create the routing at the client side. For this, I have created three routes as in the following with templateUrl and controller.

config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: '/Home/AddEmployee',
        controller: 'EmpAddCtrl',
    });
    $routeProvider.when('/Edit', {
        templateUrl: '/Home/EditEmployee',
        controller: 'EditCtrl'
    });
    $routeProvider.when('/Delete', {
        templateUrl: '/Home/DeleteEmployee',
        controller: 'DeleteCtrl'
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
    // Specify HTML5 mode (using the History APIs) or HashBang syntax.
    $locationProvider.html5Mode(false).hashPrefix('!');

}]);

Whenever AngularJs finds the URL that was specified in routing, it goes to the corresponding AngularJs controller, where we need to create models and Ajax calls to the server. The following is the controller code.

// Add and display Employee Controller
angular.module('AngularDemo.EmpAddController', ['ngRoute'])
.controller('EmpAddCtrl', function ($scope, $http) {

    $scope.EmpDetailsModel = 
    {
        EmpID: '',
        EmpName: '',
        EmpPhone: ''
    };

    $scope.EmpAddressModel = 
    {
        Address1: '',
        Address2: '',
        Address3: ''
    };

    $scope.EmployeeViewModel = {
        empDetailModel: $scope.EmpDetailsModel,
        empAddressModel: $scope.EmpAddressModel
    };

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;
    });
    
    $scope.AddEmployee = function () {
        $.ajax({
            url: '/Home/AddEmpDetails',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),
            success: function (data) {
                $scope.EmpAddressList.push(data[0]);
                $scope.$apply();
                alert("Record is been added");
            }
        });
    };
});

$scope is responsible for setting the model properties and the functions/behavior of the specific controller.

In the EmpAddCtrl controller, we have two models (EmpDetailsModeland EmpAddressModel) and ViewModel (EmployeeViewModel) where we will be passing this viewmodel to the server to save data to the database, using the$scope.AddEmployee function and $http.get will get the list of all records on pageloads.

Views

Now we are done with AngularJs. We need to use this in HTML pages. So, this is what my _layout page looks like.

_Layout.html

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/CustomAngular")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <nav class="navbar navbar-default navbar-static-top">
            <p class="container">
                <p class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </p>
                <p id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#!/">Add</a></li>
                        <li><a href="#!/Address">Edit/Update</a></li>
                        <li><a href="#!/Delete">Delete</a></li>
                    </ul>
                </p>
                <!--/.nav-collapse -->
            </p>
        </nav>
    </header>
    <p id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </p>

    @RenderSection("scripts", required: false)
</body>
</html>

Index.html page

Just copy the following code and paste it into the index HTML page. ng-view is a placeholder where the partial views are dynamically loaded.

<p ng-view=""></p>

AddEmployee.html partial page

Copy the following code and paste it into your AddEmployee partial view. In this view, the user can add a new employee and address information and it also displays a list of employees in grid format.

The ng-model directive binds the value of HTML controls (input, select, and textarea) to the application data.

<p style="width: 50%; margin: 50px auto;">
    <table>
        <tr>
            <td>
                <strong>Employee Name:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpName" placeholder="Employee Name" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Employee Phone:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpPhone" placeholder="Employee Phone" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 1:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address1" placeholder="Address 1" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 2:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address2" placeholder="Address 2" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 3:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address3" placeholder="Address 3" />
            </td>
        </tr>

        <tr>
            <td>    
            </td>
            <td>
                <button type="button" ng-click="AddEmployee();" class="btn btn-primary">Save</button>
            </td>
        </tr>
    </table>
</p>
<hr style="color: black" />
<p style="width: 50%; margin: 50px auto;">
    <p class="panel panel-default">
        <!-- Default panel contents -->
        <p class="panel-heading"><b>Employee Details </b></p>
        <p class="table-responsive">
            <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Employee Phone</th>
                        <th>Employee Address1</th>
                        <th>Employee Address2</th>
                        <th>Employee Address3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Emp in EmpAddressList">
                        <td>{{Emp.empDetailModel.EmpName}}</td>
                        <td>{{Emp.empDetailModel.EmpPhone}}</td>
                        <td>{{Emp.empAddressModel.Address1}}</td>
                        <td>{{Emp.empAddressModel.Address2}}</td>
                        <td>{{Emp.empAddressModel.Address3}}</td>
                    </tr>
                    @*<tr ng-if="states.NewRow">*@   
                    <tr ng-if="EmpAddressList.length == 0">
                        <td class="text-center" colspan="4">There are no Employee details to display
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </p>
</p>

Output screens

Now we are done with all our coding. Run it by pressing F5, you can see the following screenshot. Initially, we don't have any data, therefore it displays There are no Employee details to display.

Save Button

Enter the data of an employee and their address(es), when the user clicks the Save button, it triggers the AddEmployee function in AngularJs that calls the corresponding controller action. The following image shows that we have entered information.

Once the user clicks on Save, the view model is passed from AngularJs to the MVC controller action. I have the following two screenshots to show the data being passed to the models (empDetailsModel and empAddressModel).

After saving into the database you will get confirmation saying the record has been added.

Database

The data we have entered into the UI has been saved to the database.

Conclusion

A single-page application will provide you with better performance compared to traditional web apps, but never compromise when it comes to security and you should think about security and implement sufficient measures for it before developing single-page applications.