Setting AngularJS Structure in MVC project

AngularJS introduction

Angular JS work on MVC architecture which provide us a facility to integrate it with our MVC project. So we need to define its structure which can be used with our MVC Application.
In this article i will show you how you can set architecture of AngularJS in your MVC project so you can use it in your application.


Open visual studio and create a new mvc project. Now open Package Manager Console from Tools->Library Package Manager-> Package Manager Console.
Now write down following command to install AngularJS in your current project.
Install-Package AngularJS.Core
install Angular in visual studio
After installation you will see some js files in your script folder name start with angular.
Angular files after download

Create Folder Structure

After successful installation create a new folder name with Angular inside script folder. And than 3 sub-folders inside Angular folder.
As explain in below image.
Folder Structure of angular


Controller folder contain our angularJS controller files.
Module folder contain our application scope.
Service folder contain our HTTP calls which communicate our MVC controller Actions.

For learing how we use this structure please Read this article