[Dev Tip] Learning {{AngularJS}} with ASP.NET MVC – Part 3



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.

Structure

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.

one request2- Load the page first, then get the data via an ajax call and update the page accordingly.

tworequestSo 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.

Now In the view, lets copy the html that we created in our last post where we assigned data in ng-init. As, we don’t want to hard code the data in our view itself and want this to fetch from server. We can easily pass the data with view. Here we need the data in JSON format at client side so while sending the data, we can serialize the data in JSON format and pass it. So my controller looks like

image

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

image

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.

image

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

1
<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 hardcoded 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

1
2
3
4
5
eventModule.factory(“<ServiceName>”, function() {
// Do some task and return data
});

In our example, we have created a service named InitialLoadService  as

image

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

image

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

image

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 learned some UI directives like ng-init, ng-repeat and used controllermodule and services. Sample application is attached with this post. Hope you have enjoyed the post.

Happy Coding
Brij

Advertisements

One thought on “[Dev Tip] Learning {{AngularJS}} with ASP.NET MVC – Part 3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s