Using AngularJS in Asp.net Web Application with MVC architecture

AngularJS

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(pl.data);
            $scope.authorList = pl.data;
        },

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

    }
});
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(
                    "~/Scripts/angular.min.js"
                ));

            bundles.Add(new ScriptBundle("~/bundles/AngularStructure").Include(
                             "~/Scripts/Angular/Module/Module.js",
                            "~/Scripts/Angular/Controller/Controller.js",
                            "~/Scripts/Angular/Service/Service.js"
                           
                        ));
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 Asp.net MVC controller to fetch result from database.

Asp.net 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

[HttpGet]
        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()">
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        <tr ng-repeat="author in authorList">
            <td>{{author.au_lname}}</td>
            <td>{{author.au_fname}}</td>
        </tr>
    </table>
</div>

Result

use angularJS in Asp.net MVC