Using AngularJS in Web Application with MVC architecture


In this article I will show you how we can use AngularJS architecture which I describe in this article.
In this article we GET a authors list form database using AngularJS and populate it on front end.

AngularJS Code

Now create a new JS file in Module folder name it Module.js and write following code.

var app;
(function () {
    app = angular.module("ANG", []);
Now add a new file in controller folder name it controller.js and write the following code.
app.controller('NgController', function ($scope, NgService) {

    $scope.authorList = [];

    $scope.GetAuthorList = function () {
        var promisePost = NgService.GetAuthorList();
        promisePost.then(function (pl) {
           // var obj = JSON.parse(;
            $scope.authorList =;

    function (errorPl) {
     console.log("Countries list fetching error : " +;

Now again add a new file in service folder name it service.js and add following code.
app.service('NgService', function ($http) {

    this.GetAuthorList = function () {
        var request = $http({
            method: "Get",
            url: "/AngularJS/AuthorsList"
        return request;
Now open your project bundleConfig.cs file and create bundles of AngularJS and above created files.
 bundles.Add(new ScriptBundle("~/bundles/angular").Include(

            bundles.Add(new ScriptBundle("~/bundles/AngularStructure").Include(
you need to add refrence of these bundles in your main layout file.
As we define a URL in our service.js file so lets set-up our MVC controller to fetch result from database. MVC Controller Code

Add a new controller in controller folder (Asp controller) and write following code. I used Entity framework for fetch data.
For more information please see my this article

        public JsonResult AuthorsList()
            pubsEntities dbcontext = new pubsEntities();
            dbcontext.Configuration.ProxyCreationEnabled = false;
            return Json(dbcontext.authors.ToList(), JsonRequestBehavior.AllowGet);


View Code

open your main layout.cshtml file and add a angular attribute with html tag.

<html ng-app="ANG">
Now add a new ActionResult in Asp controller name it index and add its corresponding view.
inside the view write following code.
<div  ng-controller="NgController" ng-init="GetAuthorList()">
            <th>First Name</th>
            <th>Last Name</th>
        <tr ng-repeat="author in authorList">


use angularJS in MVC