A mini SPA with ASP.NET MVC and AngularJS

SPA stands for Single Page Application; I think you already have little idea on it. Here I will demonstrate a mini SPA with ASP.NET MVC and AngularJS. So, let’s start.

Step 1: Create a ASP.NET MVC application with empty template

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Empty Template and Razor as view engine

Step 2: Install required packages
Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package jQuery
PM> Install-Package angularjs -Version 1.0.7
PM> Install-Package Newtonsoft.Json

Step 3: Create View model
In this application I will try to demonstrate two pages for Trainer and Training. For this purpose, create TrainerVM, TrainingVM, RegistrationVm view model in Model folder. JSONBuilder is a class in Model folder which make model as json serialized.

    public class TrainingVm
        public string TrainingCode { get; set; }
        public string Title { get; set; }
        public string Trainer { get; set; }

    public class TrainerVm
        public string Name { get; set; }
        public string Email { get; set; }
        public string Venue { get; set; }

    public class RegistrationVm
        public string Trainings { get; set; }
        public string Trainers { get; set; }

public class JSONBuilder
        public RegistrationVm BuildRegistrationVm()
            var registrationVm = new RegistrationVm
                Trainings = GetSerializedTraining(),
                Trainers = GetSerializedTrainers()

            return registrationVm;

        public string GetSerializedTraining()
            var trainings = new[]
                    new TrainingVm {TrainingCode = "TRA001", Title = "ASP.NET MVC 4", Trainer="Mahedee Hasan"},
                    new TrainingVm {TrainingCode = "TRA002", Title = "ASP.NET Web Form", Trainer="Asrafuzzaman"},
                    new TrainingVm {TrainingCode = "TRA003", Title = "AngularJs Fundamental", Trainer="Foysal Alam"},
                    new TrainingVm {TrainingCode = "TRA004", Title = "ASP.NET MVC 5 with web API", Trainer="Asfaquzzaman"},
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            var serializeCourses = JsonConvert.SerializeObject(trainings, Formatting.None, settings);
            return serializeCourses;

        public string GetSerializedTrainers()
            var trainers = new[]
                    new TrainerVm {Name = "Mahedee Hasan", Email = "mahedee.hasan@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Asrafuzzaman", Email = "asraf@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Foysal Alam", Email = "foysal@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
                    new TrainerVm {Name = "Asfaquzzaman", Email = "asfaq@gmail.com", Venue="Leadsoft Bangladesh Ltd"},
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            var serializedInstructors = JsonConvert.SerializeObject(trainers, Formatting.None, settings);
            return serializedInstructors;

Step 4: Create a RegistrationController in controller folder

public class RegistrationController : Controller
        private JSONBuilder jsonBuilder = new JSONBuilder();

        public ActionResult Index()
            return View(jsonBuilder.BuildRegistrationVm());


Step 5: Create TrainingController and TrainerController
Create TrainingsController.js and TrainersController.js in Scripts->Application->Controllers folder


'use strict';

registrationModule.controller("TrainersController", function ($scope, registrationData) {
    $scope.trainers = registrationData.trainers;


'use strict';

registrationModule.controller("TrainingsController", function ($scope, registrationData) {
    $scope.trainings = registrationData.trainings;

I will define registrationModule and registrationData in next steps.

Step 6: Create registrationModule
Create registrationModule.js in Scripts->Application. This is the configuration file for angular routing in client side.

var registrationModule = angular.module("registrationModule", [])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/Registration/Trainings', {
            templateUrl: '/templates/Trainings.html',
            controller: 'TrainingsController'

        $routeProvider.when('/Registration/Trainers', {
            templateUrl: '/templates/trainers.html',
            controller: 'TrainersController'


Here you might see that I map template and controller on corresponding routing. But I didn’t declare template yet. I will declare template in next steps.

Step 7: Create a layout page
Create a layout page in Views-> Shared ->_Layout.cshtml and add reference of angularjs, jquery and registration module.


        Training Registration
        @RenderSection("JavascriptInHead", required:false)

Step 8: Create Index view
Right click on Index action of Registration controller and add a view. Modify the view as following.

@model MiniSPA.Models.RegistrationVm

    ViewBag.Title = "Training Regirstration";
    Layout = "~/Views/Shared/_Layout.cshtml";

@section JavascriptInHead

  • Training Registration

Step 9: Create template
Create training.html and trainer.html in templates folder as follows




Trainer Name Email Venue
{{trainer.name}} {{trainer.email}} {{trainer.venue}}


Training Details

Training Code Training Title Trainer Name
{{training.trainingCode}} {{training.title}} {{training.trainer}}

Step 10: Modify RouteConfig.cs
Modify the RouteConfig.cs as follows for routing Registration controller default and catching all other parameter.

public class RouteConfig
        public static void RegisterRoutes(RouteCollection routes)

            name: "Mini SPA",
            url: "Registration/{*catchall}",
            defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional }

                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Registration", action = "Index", id = UrlParameter.Optional }

This structure is not best. So it is not recommended for large application. For large application use service. Hope, I will publish a complete SPA soon. Thanks for your patient!

Please share, if it is helpfulShare on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page

2 thoughts on “A mini SPA with ASP.NET MVC and AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *