Angular with .Net

Hi Friends,

In today’s discussion we’ll see how to implement Angular using ASP.Net. So, basically i’ll be writing one ASP.net MVC APP where in i’ll be using ANGULAR to implement the client side logic.However, i do suggest readers to go through the basics of Angular in my earlier Angular discussion. So, let’s get started. Let’s Create a new ASP.net MVC 4 Empty project .

Now, let’s do some dummy test 1st.So, let’s go and create 1st demo controller as HelloWorld controller as shown below, then add respective view for the same.

Now, let’s create a view and replace the existing code with the below one. However, since am using VS 2013, so, you will see that even @ the script level, you will be getting good intellisense.

So, if you see the page, inside this MVC project Angular is loading. so, it’s important to note that 1st MVC operation will be done, then Angular operation will be performed. However, in the above case, i have computed two values inside {{data-binding expression}}. Now, let’s go ahead and bring one layout page in the app.

Now, let’s go ahead and start building a real app, so for now let’s get rid of this hello world controller and let’s build movie site itself which we have earlier build but this time we build it with Angular. But, before doing the same, i need few library references as we have created an empty project. so, let’s 1st Jquery, then Bootstrap for some look and feel and then Add Json.Net to serialize our data and pass the same to view.

ok, Now let’s add these references to our layout page as shown below

Now, also go ahead and download a free bootstrap theme from the Bootswatch.com

Now, let’s build the same and refresh, then i can see CSS effect in there.

However, i do need to populate few movies in there. so for that am going to add some movies on the page and then bootstrap the same with directive ng-repeat. here, i have used ng-repeat to loop through the collection. For now, I have hard coded few of the movie names on the page itself as shown below