Adding Angular component, service, class to ASP.NET MVC 5

This article continues from Using Angular in ASP.NET MVC 5, demonstrates how to add Angular Components, Services, Class using Angular CLI.

Topics Covered

  • Class
  • Angular Service
  • HttpClient to call REST API
  • Use RxJS for transforming an object
  • Angular Component to display data

We are using the same ngGitHouse application from the previous article. Generate and add a class, services, components using Angular CLI using Visual Studio IDE.
Use the Angular CLI documentation for commands.

Class

A class is a representation of some real-world object like Cars, People etc. In our demo, we create Angular class GitRepoInfo using CLI commands. Run the following command from the console to create GitRepoInfo class.

ng generate class gitrepoinfo

This is a TypeScript class consisting of Github repository properties. Code snippet for GitRepoInfo class is shown here

1
2
3
4
5
6
7
export class GitRepoInfo {
name:string;
htmlUrl: string;
stars: number;
forks: number;
description: string;
}

Angular Service

Service is specific purpose class dealing with functions outside of Angular Component. These Services can be used across the Angular application using Dependency Injection concept.

An ideal example of Angular Service is which calls REST APIs to perform CRUD operation. Recommend reading Angular Service documentation

To generate one such service, run the below CLI command from the root folder of the project and copy the below code.
ng generate service github

Breaking down the code

  • HttpClient is an Angular module to call REST APIs, its dependency injected in the constructor (line 12)
  • getUserRepos method calls my Github Repo using GitHub APIs to get the list of public repositories
    While GitHub APIs response is quite extensive, we are interested only a few fields. So for this we use RxJS map operator to map to class GithubRepoInfo created above. (line 14 - 26)

Angular Component

Angular Components are class that acts as VIEWS on browser, they contain code to call various services, load data, style them, and many other things. Read Angular docs on Component.

To generate component using Angular CLI, run the following command
ng generate component gitrepos

Breaking down the code

  • Injects GithubService created above into component class
  • Calls the method to getUserRepos in service and assigns to gitRepoList

This component needs UI (html) to display the repo’s list. The file gitrepos.component.html is used as view for this component. Lets check out the html written on it.

It displays the list of my GitHub Repositories with STARS & FORK count in tabular form. I used ngFor directive to load the list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Forks</th>

</tr>
</thead>
<tbody>
<tr *ngFor="let git of gitRepoList">
<td><a href="" target="_blank"></a></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Running the application

  • From the console, run the command ng build –watch to kick Angular apps build. It looks for any changes and compiles it.
  • F5 the ASP.NET MVC 5 project and navigate to Contact page. It displays the Angular app and also my Github repositories list

Angular Component in ASP.NET MVC 5

Source Code

ngGitHouse Source Code, click here to play around with it