Create a Library Finder App in Angular: Library Service and Routing

In one of my previous Angular tutorial series, I covered the basics of Angular, starting from installing the CLI and then discussing how to create basic components and implement routing. Check out my post on Creating Your First Angular App: Basics, for a refresher on installing the Angular CLI and other recommended tools to create an Angular app with ease.

• 
  Angular
  
  
  Creating Your First Angular App: Basics
  
  
  Monty Shokeen

The country information app that we created in that series was good for getting started with Angular, but it lacked a few features. For example, we stored the information that we wanted to display to our users inside an array. However, in this tutorial, we will move beyond a small set of data and let users search the library database available from CDNJS.

Here's the app we'll be building:

In the introductory tutorial of this series, I mentioned that we would be getting all our library data with the help of the CDNJS API. I also mentioned that two components in our app would be using the data from the returned response to show useful information to the user.

• 
  Angular
  
  
  Create a Library Finder App in Angular: Introduction
  
  
  Monty Shokeen

In this post, we will write all the code required to access information about different libraries in a single file called library.service.ts. 

We created a similar file in another tutorial called create your first Angular app: storing and accessing data. In that case, we stored the data locally inside an array and then wrote some methods inside the service class to access the information from a central location. We will be doing something similar this time as well.

Creating a LibraryService Class

Things will be a little different than the last time when we defined a service class. At that time, the data was stored locally so we could access it instantly. This time, we will be getting the data from a server, so we have to import a different set of dependencies.

We will also have to modify the methods we use to access our data because the information won't be available instantly this time. Keeping these things in mind, let's start writing the code for LibraryService.

We will import two dependencies for our LibraryService class. The Injectable dependency available inside @angular/core will allow us to inject our LibraryService class inside other components which need it.

We will also import HttpClient from @angular/component/http. This injectable class gives us access to different methods which can be used to make HTTP requests. We will be using the get() method from this class to retrieve all our library data.

We'll define two methods inside our LibraryService class which will either get the data about a particular library or get a list of multiple libraries. Here is the complete code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LibraryService {

    constructor(private http: HttpClient) {
    }

    showLibrary(libraryName) {
        const url = 'https://api.cdnjs.com/libraries/' + encodeURI(libraryName);
        return this.http.get(url).toPromise();
    }

    searchLibraries(searchTerm) {
        const url = 'https://api.cdnjs.com/libraries?search=' + encodeURI(searchTerm) + '&fields=version,description';
        return this.http.get(url).toPromise();
    }
}

Inside the showLibrary() and searchLibraries() methods, we use the same format to construct our URL that we discussed in the previous tutorial. For searchLibraries(), we only get the version and description of each library. For showLibrary(), we don't specify any particular field so we get everything, including the link to the homepage, repository, etc.

After that, we use the toPromise() method to convert the Observable returned by the get() method into a Promise. Promises make it easier for us to write asynchronous code. Once a Promise has been fulfilled or rejected, it will give you a return value which can be used accordingly. We can use the then() method on a Promise to append fulfillment and rejection handlers to our promise. This will be covered in a later tutorial where we will learn how to manipulate the returned data and show it to our users.

Implementing Routing for Our App

We have not created any components from our library finder app, but we still know which component needs to be shown when.

To write our routing code, we will create a file named app-routing.module.ts and add the following code inside it:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { LibraryDetailsComponent } from './library-details/library-details.component';
import { LibraryListComponent } from './library-list/library-list.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:library', component: LibraryDetailsComponent },
    { path: 'list/:search', component: LibraryListComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

We begin by importing different Angular dependencies well as other components that we will create later. Any time users visit a path specified inside the routes array, we will render the corresponding component for them.

The colon (:) present in the third and fourth paths is used to signify that both library and search are placeholders for more specific library names and search terms. This way, we can avoid defining new paths for each library and just use a general path from which we can easily extract the library name or the search terms.

Updating the app.module.ts File

After creating our LibraryService class and implementing the routing logic, all that we have to do is update the app.module.ts file. This file is used by Angular to construct and bootstrap our app. If you open this file, you will notice that it is not empty. Angular has already imported some dependencies that we need to create our app. Angular will also update this app later when we create our own components using the Angular CLI. For now, put the following code inside the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';

import { LibraryService } from './library.service';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [LibraryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

You need to import BrowserModule for every Angular app which will run in the browser. Importing HttpClientModule gives us access to HttpClient and other associated services that we used inside our LibraryService class to get the information about different libraries. Angular has already imported the AppComponent class for us. Now, we just have to import our LibraryService class and AppRoutingModule that we defined in the previous section.

After importing the necessary dependencies, we use the @NgModule decorator which takes a metadata object to tell Angular how to compile and launch our application.

The declarations array is used to specify all the component classes that our app will need. Trying to use a component without listing it here first will result in an error. Right now, the declarations array only contains a single class. Once we generate more components using the Angular CLI, they will be automatically added to this list.

The imports array is used to specify all the modules our app needs. You should only add NgModule classes inside the imports array. In our case, these classes are BrowserModule, HttpClientModule, and AppRoutingModule.

You use the providers array to let the dependency injector know about different services that our app will need. In this case, we are only adding the LibraryService class inside our providers array.

Final Thoughts

We have created three different files in this tutorial. The library.service.ts is used to define a LibraryService class with different methods to get the data about various libraries. The app-routing.module.ts file is used to store the routing logic of our app. We store the information about different paths and the corresponding components that need to be loaded for each path inside the routes array. Finally, we updated the app.module.ts file to include the LibraryService class and the AppRoutingModule available to the whole app.

In the next tutorial, you will create the HomeComponent for our Angular app to allow users to specify a search term or library name. If there is anything that you would like me to clarify in this tutorial, let me know in the comments.