This post is third part in the series on AngularJS. In first part, we created a simple Hello World application using AngularJS and in second part, we created a page which displays data in tabular format and used some directives to generate that. We also discussed one of the very important components, Module and provided a proper structure to our application. Please find the link of my earlier posts below
Learning {{AngularJS}} with Examples–Part 1
Learning {{AngularJS}} with Examples–Part 2
Let’s see that in last two post what have we covered and what will we be discussing today.
So we have covered three components in our earlier posts and will be using two more components in today’s post as in the above image.
In today’s example, we’ll use AngularJS in an ASP.NET MVC application. In our last post, we created a HTML page and initialized the data using ng-init directive. Now let’s think that how can we have the similar application in ASP.NET MVC . In that application, we provided the data at html page itself. In ASP.NET application, we may want to provide the initial data from server while initial load.
So the data can be provided in two ways.
1- Get the HTML and data from the server while the page loads itself.
2- Load the page first, then get the data via an AJAX call and update the page accordingly.
So we’ll take the first scenario, because in a typical ASP.NET MVC application we provide data to the view via controller and use that model in the cshtml page.
For that I created an ASP.NET MVC empty application and created a Controller named EventsController.cs and it has just an index method. Then I have created an empty view for that.
In the view, copied the html that we created in last post where we assigned data in ng-init. As, we didn’t want to hard code the data in our view itself and want this to be fetched from server. Here we require the data in JSON format at client side so returned the data after serializing in JSON format. The controller looks as
Here, I have created a list of talks and converted it in JSON string format using the .NET library and passed it to the view. Here I have hard coded the data but in real implementation, we can get it from database or some web services. Anyways now we can use this data in our view and provide this to ng-init directive. Now my Index.cshtml looks like
Here talks is initialized with the model (refer the Red encircled area) and provided in ng-init directive.
I also provided the ng-app directive in _Layout.cshtml in body tag. Now let’s run this.
It displays the data as expected. This is a very simple ASP.NET MVC application with AngularJS.
Now let’s move further and convert this application in a structured application, similar to our last post. Let’s first remove the ng-init directive.
Now Let’s copy the module and controller js files. I also put ng-app=”eventModule” in _Layout.cshtml as
<html ng-app="eventModule">
As we have used eventModule on _Layout.cshtml we need to include the eventModule.js file in this file itself.
In last post we hard-coded the data in the controller. Currently we have data at View so the next question is, how to pass it to the angular controller. So there could be multiple ways.
1- Create a JavaScript global variable and use that variable in controller. But that is not a good design
2- Another way, we can add a service that returns the data.
As we have data at our view (index.cshtml) so we need to read it from here and send it to controller in one or other way. For that purpose, we can use services and put it on the view only. But before using services, let’s discuss what is AngularJS Service?
Angular Services are not like any other services which travels over the wire. But it is simple object which does some work for you. In specific words, Angular Services are like a singleton object which does some task for you and can be reused. The main benefits of the services is single responsibility, re-usability and. testability.
AngularJS has many in built services but it also provides us capability to write our own custom services. Once we create a service we need to inject in some controller.
To create a custom service, we’ve have to use another method Factory provided by AngularJS. The syntax looks like as
eventModule.factory(“<ServiceName>”, function() {
// Do some task and return data
});
In our example, we have created a service named InitialLoadService as
In the above code, we have created a service name InitialLoadService that has been registered with module using factory method. This just simply returns the data that is read from the model.
Now we need to use this service. For that we can inject it in our controller (eventController.js) as
Here in our controller, we have injected the services (refer Red encircled Area) and read the data from the service.
Now we have created a custom service and injected the service in controller. Let’s run the application
Great!! Now we have successfully created an ASP.NET MVC and AngularJS application. It is same as earlier one in this post but here we used different components of AngularJS.
In this post, we saw that how we can leverage the power of AngularJS in an ASP.NET MVC application. We used two approaches to load the initial data on client side. Later we discussed another component Services in Angular and used in second approach.
To navigate to previous and next post of the series, use the links at the bottom of the post.
Happy Coding
Brij
Code Wala 
Pingback: Learning {{AngularJS}} with ASP.NET MVC – Part 4 | Code Wala
Pingback: Learning {{AngularJS}} with ASP.NET MVC – Part 6 | Code Wala
This is a REALLY good primer on how Angular and MVC can cooperate together. So many introductions focus solely on Angular, which one does need to understand it in its own right before being able to incorporate the two technologies. Same goes for MVC, Web API, etc. But it is really interesting to see the power of MVC backed Angular front end. I’m not sure, I did something similar as an exercise through Web API via an Angular Controller directed Http request. However, I can definitely see this would simplify things, especially connecting to a back end .NET data source, database, whatever. Routing would become interesting, I think; which is ‘parent’? Probably the MVC project methinks; potentially with smallish, focused, Angular ecosystems. Thank you…
Pingback: Learning {{AngularJS}} with Examples–Part 2 | Code Wala
Great job, Brij! I was looking for this type of information since a long time. Actually, in my problem I have to communicate between angular and C# assembly. Your tutorials are great help. I will go through all the tutorials on AngularJS and let you informed with my progress. Thank for loading these tutorials.
Glad that you liked it @Mahendra
It works! Thanks, Brij
Glad that you find it useful!!