Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

In this Angular tutorial, you will learn how to create an app to compare bus fares. We will be using Angular IDE to create our application, which will fetch bus fare data using goibibo’s web services.

Creating a New Angular Project

In the new Angular project wizard, enter BusFareCompare as the project name. We used Angular CLI version 1.1.0, Node.js version 6.11.2, and NPM version 3.10.10 in our tutorial, but you are free to use more recent versions.

bus-fare-select-versions

Click Finish to complete the creation of a new Angular 4 project. In the Terminal+ view, you can see commands being executed by Angular CLI. After the installation of all the modules is complete, we are now ready to continue with development.

Adding Angular Material

To style our application, we will be using Angular Material, which is a set of high-quality UI components developed by the Angular team, based on the Google Material design specification. These components help us to build applications with an attractive, yet familiar UI, giving users a consistent experience across devices. To install HammerJS, Angular Material and Angular CDK, type and execute the following commands in Terminal+.

bus-fare-npm-install

Modern Angular projects already include the Angular animations module (@angular/animations), but if you happen to be following along with an older version of the CLI or Angular, please install that as well.

Next you add the indigo-pink Angular material theme by adding the following line to your /src/styles.css file

For more on Angular Material, please see our previous post, Building Applications with Angular Material.

Creating the Search Card Component

bus-fare-search-card-component

To create a new Angular component in Angular IDE, we use the menu File > New > Component. In the New Angular CLI Component wizard, enter search-card as element name. Under the advanced section, make sure Do not create code in its own directory(--flat) is checked, as we want to have a flat directory for this project. Now click Finish to complete creation of the search card component. Four new files are created in the src/app folder – search-card.component.css, search-card.component.html, search-card.component.spec.ts and search-card.component.ts were created, and the content of app.module.ts is updated. Let us take a look at some of the things to note when we create a new component via Angular CLI using Angular IDE.

Important File Changes

The file named src/app/search-card.component.ts is the component file for our newly created Search Card component, and its content is below:

At the top of the file, Component and OnInit are imported from @angular/core (each Angular library name begins with the @angular prefix). Component is a decorator function that we use to notify Angular that a class is an Angular component, and OnInit is a trait that our component must inherit in order to respond to the ngOnInit lifecycle hook. You can read more about Angular lifecycles here.

Looking at the metadata passed to the @Component decorator in our component, we see that in order to use this component in an Angular template, the html tagname will be app-search-card, as specified by the selector metadata attribute. Also, this component will use the content of src/app/search-card.component.html as its Angular template and be styled with src/app/search-card.component.css.

We can now use the search card component in our app component, because app.module.ts has been updated as follows: SearchCardComponent is imported, and added to the declarations property of the @NgModule metadata. So update the content of src/app/app.component.html to be

Storing user search input

In order to search for bus rates, we need the user to input the following information:

  • Trip type (One way or return trip)
  • Origin
  • Destination
  • Departure date
  • Return date (if trip type is return)

Let us create a search card interface to be used to type-check the data from the templates in accordance with our requirements above. Use File > New > Interface and type SearchCardInterface into the Name field, and search-card.interface.ts as the File name. Ensure that the source folder is set to /BusFareCompare/src/app. Click Finish and update the content of the newly created file as follows:

Imports

Next we update src/app/app.module.ts to import a bunch of modules.  The file changes are shown in the code below:

Creating the Search Service

Let us create a search service, which uses the data collected from user input to make an API request for bus tickets available. As we mentioned earlier, we will be using the API provided by goibibo, so head over to the developer portal to create an account so you can follow along. You will need to obtain an App Id and App key that you will use later in the search service.

We create the search service, by using the menu File > New > Service. In the new service wizard, enter the search-card element name and click Finish.

bus-fare-new-service

You should import SearchCardInterface in your search-card service, and also create a getSearchResults method in it, which takes the user input, bound to model: SearchCardInterface, and gets search results from the goibibo API. The code snippet for the getSearchResults stub is below:

src/app/search-card.service.ts

Let us now connect this stub method to the onSubmit method of our search-card component. The content of src/app/search-card.component.ts should be

Notice that we did not add SearchService to the provider of the search-card component. We will add it to src/app/app.component.ts because we want all the children of app component to use the same instance of search service. The content of src/app/app.component.ts should be updated as follows:

Template

Let us enter the following code in src/app/search-card.component.html

Add some style in src/app/search-card.component.css


Updating getSearchResults stub

We are going to user the user input to make an HTTP request to the API, and for this, we will need the Angular HttpClient. Let us include HttpClientModule among the imports in src/app/app.module.ts

Next we inject HttpClient in our search service, and also develop the code for the getSearchResults method in src/app/search-card.service.ts. Remember to replace the APPID and APPKEY text in the snippet below with the Id and Key you obtain from the developer portal!

Creating the Search Result Component

Create a new component, SearchResultComponent with the element name search-result and ensure that in the Advanced section of the New Angular CLI Component wizard, you have the --flat option checked. First, we include our newly created component in our app component by updating src/app/app.component.html

Next, we will add search result component to subscribe to the search service in order to get search results. Let us do this by updating src/app/search-result-component.ts

We will display some part of the API response in a simple table, so let us update the template of our search result component, src/app/search-result.component.html

Note: At the time of this writing, due to a bug in Angular IDE, you may see incorrect validation errors reported against this file, for the items within the ngFor loop. This is a known issue that will be fixed shortly.

Styling

We style the search result table, by including our style rules in src/app/search-result.component.css

Running the app

Let us run our Angular app.  There is a server view in Angular IDE, and in order to open it, select Window > Show View > Servers. Right click on BusFareCompare under the Angular CLI node and click Start Server. Angular IDE serves the application on localhost port 4200 by default, so open up http://127.0.0.1:4200 in your browser to see the running app.

bus-fare-run-the-app

Leave “one way trip” selected, enter Bangalore in the origin field and Hyderabad in the destination field, set an appropriate departure date, and click the Let’s Go button.

bus-fare-app

The search results are then displayed as below:

bus-fare-search-results

Conclusion

There are a few obvious improvements that can be made to this app:

  • Storing the API key on the client side is probably not acceptable in most scenarios.
  • Loading animations can be added during search.
  • Return date field should be disabled if “One way” is selected, no results will be displayed if the return date is earlier than the departure date.
  • Using the Angular Material table component would improve the results display significantly.
These, and other small enhancements, are left as an exercise for the reader. We hope you enjoyed developing a real-world Angular application with Angular IDE!

Related Posts

30% off sale, including Angular IDE and more! Step away from the leftovers and come take advantage of our Cyber Monday sale for Angular IDE, Webclipse, MyEclipse and more!   Thanksgiving is a great time for getting together with family, but perhaps more importantly, it’s about the SALES!  Whether it’s Buen Fin or Cyber Monday, we all love a bargain. Now is the time to get the software you alwa...
SDC 2017 SR2 – Software Delivery Evolving Fu... Perhaps you're already a fan of the delicious combo offered by our Secure Delivery Center (SDC) -- you get the right software to your teams and manage a variety of actions (licenses, software updates, rollouts and standardization).  With our new version of SDC, we are bringing even more yummy features to the table!What is included in our 2017 SR2 r...
Realtime Server Monitoring App with Angular 4 , No... This article will show you how to build a very simple monitor that allows you to observe some OS parameters, such as free memory available. We will be using Node.js, Angular 4, and Chart.js - and all you need is Angular IDE.We will be creating two applications; the first is a Node application that will monitor the OS parameters and send them via we...
Beware of Software Scams Even though imitation might be the best form of flattery, we are Genuitec, LLC, not Genuitec, Inc. Someone is using our name and old logo to run a number of scams, including real estate transactions and software sales, with the clear intent to hide behind Genuitec’s good name. We are, however, already taking action to demand an immediate cease and ...

Posted on Sep 8th 2017