AngularjS and MVC Small Application Architecture

$routeProvider

$routeProvider is used mainly for routing configuration in Angularjs. It requires ngRoute module to get installed. It is used to update views as per the request.

var demoApp = angular.module('demoApp', ['ngRoute', 'demoControllers', 'demoServices']);
demoApp.config(['$routeProvider', function($routeProvider)
{
    $routeProvider.when('/employees',
    {
        templateUrl: 'Home/EmployeeList',
        controller: 'EmployeeListCtrl'
    }).
    when('/employees/:employeeId', {
        templateUrl: 'Home/EmployeeDetails',
        controller: 'EmployeeDetailCtrl'
    }).
    when('/employeeNew', {
        templateUrl: 'Home/CreateEmployee',
        controller: 'EmployeeNewCtrl'
    }).
    otherwise({
        redirectTo: '/employees'
    });
}]);

ngView

ngView is a predefined directive that works with $route service. It includes the rendered template according to requested url to routing configuration.

<html lang="ng" data-ng-app="demoApp">

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <link href="/Content/Skin.css" rel="stylesheet" />
    <link href="/Content/container.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="~/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/angular-touch.min.js"></script>
    <script src="~/Scripts/angular-animate.min.js"></script>
    <script src="~/Scripts/App/App.js"></script>
    <script src="~/Scripts/App/Services.js"></script>
    <script src="~/Scripts/App/Controllers.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <style type="text/css">
        [class*="col-lg"] {
            float: none;
            display: table-cell;
            vertical-align: top;
            vertical-align: middle;
        }

        [class*="col-"] {
            box-shadow: none !important;
        }

        #contentWrapper .row {
            margin-bottom: 15px !important;
        }

        .row {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }
    </style>
</head>

<body>
    <div data-ng-controller="testCtrl"> Welcome : {{Name}}</div>
    <div id="siteHeadouter">
        <div id="siteHeadinner" class="container">
            <nav class="navbar navbar-default" role="navigation">
                <div class="collapse navbar-collapse" id="example-navbar-collapse-menu">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#/employees">Employee List</a></li>
                        <li><a href="#/employeeNew">Employee Create</a></li>
                        <li><a href="Home/testView">test </a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div id="contentWrapper">
        <div class="container">
            <div ng-view></div>
        </div>
    </div>
</body>

</html>

$q

$q is a service which runs functions asynchronously. It resolves or rejects a request once it is done with request processing.

$q is a promising object of angularjs.

With the help of these services and object (services, Factory)we can achieve a simple angular architect with Microsoft MVC implementation which is containing controller, WebApi for a small projects.