Setting AngularJS Structure in Asp.net MVC project

AngularJS introduction

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

Installation

Open visual studio and create a new asp.net 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

Description

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

For learing how we use this structure please Read this article