Single Page Application of MVC 5 Using AngularJS

Satisfying business need of Combining MVC 5 Application With AngularJS in Single Page Application.
4.0 (35 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
667 students enrolled
25% off
Take This Course
  • Lectures 18
  • Length 1.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2015 English

Course Description

I want to teach intermediate angular JS to developers who have basic knowledge in application development and want to be able to use Angular javascript at client side effectively in business applications.

This course is having step by step code creation of Single Page Application[SPA] of Angular JS framework with ASP NET MVC 5 Business Application. Based on my Experience i learned that most of the time people get confused when they want to merge ASP Net MVC with AngularJS MVW architecture with SPA, or they do some mistakes without knowing proper way of doing this.

This course will surely solve this issue and make developers understand that how to implement this in real line of business application. In this course i am using number important features of MVC and Angular which are as follows.

  • Asp Net MVC architecture
  • Web API 2
  • AngularJS MVW Architecture
  • Dependency Injection of AngularJS
  • AngularJS Routing
  • AngulatJS Resource
  • Directives like ng-show, ng-pattern, ng-model, ng-repeat, ng-view, ng-disable, ng-click etc.
  • Services like $http, $scope, $resource, $routeProvider, $location, $error, $dirty, $invalid, etc
  • BootStrap CSS for responsive UI

The best thing of this course is we have combined multiple modules, controllers, services, factory of angularJS everything at one place in a small POC [proof of concept] kind of project so that after this developers can directly follow same for their projects. And things will be much clear when they do this with hands on step by step.

I make double sure that all the videos have proper steps and codes which should match with snippet and code source.

What are the requirements?

  • Downlaod and install visual studio 2013 express which is free available and also make sure that SQL server Express is also installed with it.

What am I going to get from this course?

  • At the end of my course, students will be able to create Single Page Application [SPA] in ASP.Net MVC 5 using AngularJS Framework.
  • They will learn how to create SPA in Business Application scenario by combining MVC 5 [Server Side] with AngularJS [Client Side] to fulfill business needs. i have tried to cover this multi layered architecture in a easy to understand format.

Who is the target audience?

  • Students who are having some basic knowledge of Asp.Net MVC and AngularJS can understand this course easily.
  • This Course is not for those who are very new to MVC or AngularJS for them i suggest they first go through my basic course of Learn AngularJS Step By Step

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction of the Course

In this lecture i am explaining the exact architecture of this course and how the server side parts and client side parts are going to be connected to each other. I believe that best way to learn any technology is to create project on that so in this series i have created a project which is having this architecture.

Section 2: Dealing With ASP.Net MVC 5 Application

In this lecture i have created MVC 5 Application using Visual Studio 2013 Update 4 and added a new Sql server Database with Simple Table.


In this lecture we will generate Ado.Net Entity Model for project based on Student Table which we have created.


Using Scaffold templates provided by visual studio we have created Web API 2 controller with GET, PUT, POST, DELETE and we have registered Web API route in global.asax file so that we can use it.

Section 3: Getting Started with AngularJS

In this lecture we have added AngularJS library files in to our project so that we can use it further.


In this lecture we are creating bundle of angular resource files and adding in to layout page, also we are creating some base JavaScript files [Empty] for our project module structure.


In this lecture we have created one main module StudentApp and in that we have injected another angular module with logical controller. Our controller is trying to get data using $http service of angularJS

Section 4: Moving ahead towards Single Page Application

In this lecture i have used angular-resource.js to use $resource service and injected that in main application module.


In this lecture i have created new html page and connected it with index page of mvc also i have used angular ng-view directive


In this lecture i have injected ngRoute and using $routeProvider service i have configured angularJS routing pattern.


In this lecture i have created multiple pages in templates folder and connected it to Angular Route of StudentApp Module.

  • In this i have created a new HTML page to add new student.
  • In this page i have used some angular services like $error, $dirty, $invalid for validations
  • also some angular directives like ng-click, ng-pattern, ng-model, ng-repeat, ng-show, ng-disable,
  • and above all we are using BootStrap classes to make this page UI good looking.
  • In this lecture i have created AddStudent Controller of angular and submitted new student to the server side database.
  • Also i have done navigation using angular route with the help of $location service.

In this lecture i have created page in which we have applied filter on all students collection and also we have done sorting. we have created this full page with responsive UI using BootStrap.


On all students collection we have applied DELETE functionality with the help of $http service


In this lecture i have explained how to use Service function on angular module to reuse code among different modules using dependency injection. also i have clarify when we should use which different function with angular module like Factory, Config, Service and Controller.


In this lecture i have explained all the module dependencies and how we have injected that.


please find attached code snippet

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Maruti Makwana, MCT-Corporate Trainer

I am providing trainings to different IT corporates from last 11+ Years on different Microsoft Technologies and some JavaScript Technologies.i am here to make my lectures online so that everyone can access my knowledge throughout the globe.

i know my strength that i can make complicated things simple and I will be happy if people like my videos and ask questions to me regarding technologies i know. My expertise is mostly on following technologies.

ASP NET MVC 5, Microsoft Azure, Sharepoint 2013, Windows Store Apps, Angular JS, Knockout JS, WebGL, Ember JS, Jquery,HTML 5, CSS3, WCF, WPF, etc

Ready to start learning?
Take This Course