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.
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. This was not a problem because we were only showing the information of a few countries.
In this tutorial, we will move beyond a small set of data and let users search the whole library database available on CDNJS. 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.
Basics of the CDNJS API
The API provided by CDNJS can be used to search for libraries through their database or get information about a particular library.
You can get all the information about a certain library by making the following request:
1 |
https://api.cdnjs.com/libraries/[name] |
Here, name is the name of the library whose information you want to access. Just remember that the name should exactly match a name stored in the CDNJS database. For instance, you will get information about jQuery by setting the name to jquery. Similarly, you will get information about Chart.js by setting the name to Chart.js. As you can see, the name of a library in the database can either be an exact match of the actual library name or it can have a different case.
You can also get a list of all libraries with a specific search term in their title by making the following request:
1 |
https://api.cdnjs.com/libraries?search=[query] |
By default, the list of libraries returned by CDNJS in response to this request will also contain all the information of each of these libraries. We can ask CDNJS to only return certain information by specifying the name of different fields:
1 |
https://api.cdnjs.com/libraries?search=[query]&fields=version,description
|
Here is a list of all the fields whose value can be requested from the database: version, description, homepage, keywords, license, repository, autoupdate, author, and assets.
The following example of the response returned by CDNJS should help you get a rough idea of how the information can be utilized in our Angular app.
The request we made is:
1 |
https://api.cdnjs.com/libraries?search=[sweet%20alert]&fields=version,description&output=human |
The response that we got back is:
1 |
{
|
2 |
"results": [ |
3 |
{
|
4 |
"name": "sweetalert", |
5 |
"latest": "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css", |
6 |
"version": "1.1.3", |
7 |
"description": "A beautiful replacement for JavaScript's \"alert\"" |
8 |
},
|
9 |
{
|
10 |
"name": "bootstrap-sweetalert", |
11 |
"latest": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js", |
12 |
"version": "1.0.1", |
13 |
"description": "A beautiful 'replacement' for JavaScript's alert" |
14 |
},
|
15 |
{
|
16 |
"name": "angular-sweetalert", |
17 |
"latest": "https://cdnjs.cloudflare.com/ajax/libs/angular-sweetalert/1.1.2/SweetAlert.min.js", |
18 |
"version": "1.1.2", |
19 |
"description": "AngularJS wrapper for SweetAlert" |
20 |
},
|
21 |
{
|
22 |
"name": "limonte-sweetalert2", |
23 |
"latest": "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.13.3/sweetalert2.min.js", |
24 |
"version": "7.13.3", |
25 |
"description": "A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes, supported fork of sweetalert" |
26 |
}
|
27 |
],
|
28 |
"total": 4 |
29 |
}
|
The search query "sweet alert" only gave us four results. The number of results returned will depend on the number of files with a similar name. A lot of results are returned for jQuery.
Library Finder App Overview
Now that we have covered the basics of the CDNJS API, it's time to give you an overview of the library finding app that we will be creating.
The HomeComponent of the library will contain the title of our app: Library Finder App in Angular. It will also contain two different input fields. The first one will be used to search through the whole database looking for libraries with the given search query in their name. The second input field can be used to provide the exact name of the library that the user is looking for in the database.
Below these two fields, there will be a section with the name of popular libraries inside different boxes. Users will be able to click on any of these boxes to read more about that particular library.
The next component in our app will be the LibraryListComponent. This component will have the same title as our HomeComponent. However, it will show a list of different libraries under the title. Each library in the list will be separated by a horizontal line.
The name of each library will be inside a big green heading, and after that we will provide the latest version and the description of that library. Finally, there will be a See More Details button which users can click if they want to learn more about a particular library.
Finally, we have our LibraryDetailsComponent component, which provides users with information about a particular library. For this particular app, I am only listing the name, latest version, description, and a link to the homepage of the library. Once we have completed this series, you should try adding more fields on this page and making any other changes you like.
We will also create a back button inside this component. This will work like the back button from the country information app that we created in our previous Angular series.
Setting Things Up
We will wrap up this tutorial by updating the app component files of our library finder app.
The app.component.html file will have a title and a router outlet to display all our routed views.
1 |
<h1>{{title}}</h1> |
2 |
<router-outlet></router-outlet>
|
The app.component.css file will have the CSS necessary to style the h1 tag inside the app.component.html file.
1 |
h1 { |
2 |
font-family: 'Raleway'; |
3 |
text-align: center; |
4 |
color: #999; |
5 |
font-size: 2.5em; |
6 |
}
|
The app.component.ts file just provides a selector, the template URL, and the path to the stylesheet which contains the CSS for the linked template. Inside the class definition, the app.component.ts file only sets the value of the title property.
1 |
import { Component } from '@angular/core'; |
2 |
|
3 |
@Component({ |
4 |
selector: 'app-root', |
5 |
templateUrl: './app.component.html', |
6 |
styleUrls: ['./app.component.css'] |
7 |
})
|
8 |
|
9 |
export class AppComponent { |
10 |
title = 'Library Finder App in Angular'; |
11 |
}
|
If you have never created an Angular app before, you should first read the basics tutorial of my create your first Angular app series. I have explained everything in more detail in that tutorial.
Final Thoughts
This tutorial was meant to introduce you to the CDNJS API that we will be using to create our Angular-based library finder app. After covering the basics of the library, we moved on to discuss a rough outline of our app.
The library finder app will have three different components, each of which has its own unique role to play in the app. The HomeComponent allows users to enter the name of any library or a search term we can look for in the database. The LibraryListComponent lists all libraries with a given search term in their title. The LibraryDetailsComponent allows the users to see more details about any library which interests them.
In the next tutorial, we will create a service class to get information about different libraries. If there is anything that you would like me to clarify in this tutorial, let me know in the comments!
