Angular with .Net – 1st Part

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 .
1st

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.

2nd

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.

3rd

4th

6th

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.

7th 8th

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

9th

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

10th

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

11th

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

12th 13th

so, with this i would like to wrap this session. We’ll delve much deeper in the coming series. Till then stay tuned and Happy coding.

Thanks,
Rahul
Happy Coding

1,468 total views, 2 views today