How to use AngularJs with MVC C#

So this tutorial is related to JSON data

Download the project file form here
What we will do in this tutorial?

1. Will know what is JSON data?
2. How to get JSON data returned from a method in C#?
3. How to use them in AngularJs or in Javascript?

First start with  what is JSON data?

As per Json.org it is Javascript Object Notation which is very lightweight and easy to use for machine and us also.
For more details visit : http://json.org/

How to get JSON data returned from a method in C#?
So yo can see video here and get to know how it actually works.
Steps are as:

1.  Take a empty MVC project and name it what ever you want.
2.  Create a new model StudentDetails (or what ever you want you are free to do so)
3.  Take a controller and it will be good to take Default for learning purpose
4.  Create A JsonResult (Represents a class that is used to send JSON-formatted content to the response.) Type method as mentioned in Video
5.  Create instance of model and assign value to its property.
6.  and get returned value by calling that action method from web browser.

How to use them in AngularJs or in Javascript?

So in this example we take real life scenario in which we develop real time web application using AngularJs and MVC C#.
First of all we need to setup angularJs in our application file to do so follow these steps:

1.  We need to add all script files of angularJs in Script folder of our application for reference of Angular and Jquery library.
2.  When we will create Controller and Factory method then we should not manually give reference to these files.
3.  We need to implement Bundeling using BundelConfig.cs file in App_Start But here we are doing it manually as this is for example purpose for quick start.
4.  We need a Global.js file that we store all global static value fr our Ui application Like some Enum value or MVC controller URL.

No we have added all files of related to AngularJs in our application so we are ready to do.

1. Create Static Folder in project >> JS folder >> Controller Folder, Factory folder
2.  Add app.js, Global.js files in Static folder app.js file will holde app module of our application in which we will pass our all dependency.
3.  Global.js file to hold constant value like MVC Controller URL.
4.  Inside Controller folder we will create our AngularJs controller and Factory methods in Factory folder (Factory method will be used to create Http request to server)
5. Now we have a _Layour.cshtml page that will act like master page for our application and all reference to Js files goed there. (You can see in video)
6. We already have MVC method to get data.

Just need to implement this in our angular project.

So we are going to get data in run time so our controller will access Factory service method to hit MVC controller method. To access this Factory service method we

will have to dependency of Factory in app.js file.
After this we should create controller are of angular by doing ng-controller in cshtml file of our view.

I assume you must have some basic introductory knowledge of AngularJs like what is ng-app, ng-controller and how to render angular data.

So just use this in your application and hope you will enjoy this article.