How to setup AngularJs in MVC5 Application

In this Article we will learn how to setup Angular JS in MVC5 Application.

Let’s work

You can always download the source code here.

dicon Download Source

Start virtual studio, Click New Project


This  window will appear on screen


New ASP.NET Project window will appear on screen


Solution creation is done with load all need file


Right button click on solution, and click Manage NuGet Packages For Solution


Manage NuGet Packeges Window appear on screen.


Loading Angular Js Files


Click Scripts Folder, and we see angular JS Files


Ok let ‘s go for Create simple application with angular JS

Create ScriptsNg folder in solution, we will create 4 folder within  ScriptsNg

  1. Controller
  2. Directive
  3. Module
  4. Service

Why use those folder:

Controller: Angular JS Controller Control Data between model and view in application, keep all Controller Script files within Controller folder.

Directive: Angular JS Directive Extend html with new attribute, keep all Directive files within Directive Folder.

Module: Modules are used to separate logics say services, controllers, application etc. and keep the code clean, keep all module files in module folder.

Service: service is function, keep all customize service files within Service Folder  

Create Script file named “app.js” within module folder

Create Controller named “DashboardCtrl” within Controller folder

Create DashboardController class within mvc Conteroller folder

Create view



Hope this will help


One thought on “How to setup AngularJs in MVC5 Application

Leave a Reply

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