Table of Contents

    AngularJs also has an inbuilt set of directives like ng-app, ng-Bind, and ng-Mode. These directives give a new behavior to HTML. The view in HTML can access this data model and display them. Directives bind the inner HTML to the specified model property. In the steps ahead we will be using the ng-directive to bind data from the model to the view on HTML controls. The second element is ASP.NET. ASP.NET is related and is a great platform to deliver HTML and JavaScript. Using AngularJs and ASP.NET for development one can have a great start with HTML and javascript without using dependent technology.

    Starting to work with both is not that difficult and these two major steps are required:

    1. First is to setup Angular JS in ASP.NET MVC

    2. The data from the database needs to be fetched using AngularJs in the MVC application

    Let us get into some details now

    Directives bind the inner HTML to the specified model property. In the steps ahead we will be using the ng-directive to bind data from the model to the view on HTML controls. The second element is ASP.NET. ASP.NET is related and is a great platform to deliver HTML and JavaScript. Using AngularJs and ASP.NET for development one can have a great start with HTML and javascript without using dependent technology. Starting to work with both is not that difficult and these two major steps are required:

    1. First is to setup Angular JS in ASP.NET MVC

    2. The data from the database needs to be fetched using AngularJs in the MVC application

    Let us get into some details now

    1. The Angular JS Setup

    The following steps should be taken to achieve the setup:

    1. Create A New ASP.NET MVC Project

    This project should be completely empty without any bare default codes. This point is important to start this project from the very start.

    2. Download And Install The AngularJs Library.

    3. Add This AngularJs Library To Your Project

    There are two options available to add AngularJs library. The one is adding bundles to add AngularJs library and the other is adding AngularJs in the Script section. The drawback with adding in script section is that the added AngularJs cannot be used in the entire application. So, we will go ahead with the bundle addition.

    4. Add Bundles To Render AngularJs Files

    Simply open the BundleConfig.cs file and add bundle. Add the bundle in the code as below:

    bundles.Add(newScriptBundle("~/bundles/angular").Include(

    5. Modify the _layout CS.html Page To Support AngularJs.

    Change the following lines of codes:

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")

    6. Add A Controller In The Controller Folder

    Controllers are important as they contain methods and variables to make our front-end business logic work.

    7. Add New Action In The Controller To Get View. Your Can Have The Following Additions In Your Code:

    publicActionResultIndex()
    {
    returnView();
    }

    8. Define Ng Controller

    Ng-controller defines the controller which is in charge of the view. Add the lines: Here, ng-controller is defined as HomeController

    9. Run The Application

    You have successfully setup AngularJs in ASP.NET MVC application
    2. Fetch Data from the database

    1. Add A Database

    Select a SQL server database and give it a name

    2. Create A Table

    A table for example is given below
    Details Data Type Default
    Name varchar(100)
    Contact int
    Email Id varchar(200)
    Address varchar(300)

    3. Add Entity Data Model

    Select the table and other entities that will be kept as part of the model

    4. Again, Create A Controller

    5. Add New Action Into It To Fetch Data From Database And Return As Result In Json Following Can Be The Code Added To Fetch The Last Address:

    publicclassDataController:Controller
    {
    publicJsonResultGetLastAddress()
    {
    Contact c =null;
    using(MyDatabaseEntities dc =newMyDatabaseEntities())
    {
    c =dc.Address.OrderByDescending(a =>a.AddressID).Take(1).FirstOrDefault();
    }
    returnnewJsonResult{Data= c,JsonRequestBehavior=
    JsonRequestBehavior.AllowGet};
    }

    6. Add A New JS File To Add AngularJs Controller And A Factory.

    The following lines of codes can be added:
    $scope.Address=null;
    AddressService.GetLastAddress().then(function(d) {
    $scope.Address=d.data;
    },function(){
    alert('Failed');// Failed
    });
    .factory('AddressService',function($http){
    varfac={};
    fac.GetLastAddress=function(){
    return $http.get('/Data/GetLastAddress');
    }
    returnfac;

    7. Add New Action Is Controller To Show Data From Database.

    The code can be:
    publicActionResultPart2()
    {
    returnView();
    }

    8. Add The View For The Action And Run The Application

    Finally, the Data is fetched from the database using Angular Jason.
    Finally, the implementation of AngularJs with ASP.NET MVC is complete. Using ASP.NET and AngularJs together is one of the best options for web development. Both the technologies benefit each other and coexist.AngularJs very well supports the MVC style for application design.AngularJs looks after routing between pages in the front end and MVC architecture looks after the pages served. It may take time to get accustomed to MVC but it is worth.

    About Author

    Manektech Team

    Milan Shah

    Chief Technical Officer

    Milan Shah is Chief Technical Officer at ManekTech, having 18+ years experience in .Net department and technical expertise with increasing leadership responsibility. Having an experience of business processes of various Domains like, Online ticket booking Industry, Law-Firm Industry and Transport & Logistics.

    Subscribe to Our Newsletter!

    Join us to stay updated with our latest blog updates, marketing tips, service tips, trends, news and announcements!

    Areas we serve

    USA

    4100 NW Loop 410, Suite 200, San Antonio, Texas, USA 78229

    UK

    7 Artisan Place Harrow, HA3 5DS

    India

    4th Floor, Timber Point, Prahaladnagar Road, Ahmedabad, Gujarat - 380015

    Germany

    Franz-Joseph-Strasse, 11,Munich, 80801, Germany

    PREV
    NEXT