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