How to Create a Business Directory Website With Angular – Step-by-Step Guide

Currently, quite a moderate volume of efforts required for a small business market introduction allows numerous new brands, companies, and organizations to appear regularly in the global business arena.

Along with that, however, it becomes difficult for a mass consumer to select a single standing-out service provider among a huge number of available options. This is where some intense promotion is required to make one’s business strike the eye of a potential client.

Here’s where business directory websites may provide the next level of promotional input. These are independent resources that offer whole ranked databases of company names and service/product offers that are sorted out and can be searched through by certain parameters.

What we’d like to highlight in this article, though, is how you can gain an upper hand in all the competition by creating an online directory website of your own via the renowned Angular framework – a titan among the advanced tools for creating Progressive Web Apps.

Things to Deal With Before Starting to Build a Business Directory Website

Here are a couple of prep steps you should take before starting a business directory website. Make sure you settle with the following nuances before you code your Angular-based solution.

Choose your directory niche & monetization methods

You should know from the get-go that there cannot be a universal business directory resource that collects providers of all sorts in one place. You are unlikely to handle covering everything at once (at the very least, this would require an enormous amount of both effort and investment).

That’s why you should settle with a particular niche or business branches the collection of names on your resource would represent. It can be tourism, real estate, restaurant business, entertainment, retail, IT, etc.

If you don’t have sufficient funds and a large team of specialized experts, instead of going for a worldwide directory website (one that collects company names from all around the planet), you can opt for a local format. As such, it is much easier to create a directory that covers your city, region, state or country while such resources are usually in high demand among both local and offshore-based service seekers.

Find out more about settling with the niche for your directory resource in Directory Websites is One of The Best Ways to Make Money Online.

Get domain & hosting

A dedicated domain name is what makes your website unique. There are three domain levels in all and each provides a one-of-a-kind resource identifier in the global web. Top-level domains include .com, .net, .us, .info, .biz, etc. They are subdivided into two major sub-groups: territorial (.us, .gb, .de, etc.) and generic international (.com, .org, .net, etc.).

If you register such a domain, it should be followed by a registered second-level and a third-level (optionally) domain as well. Thus, adding a second-level domain, you get your standard site name – e.g., yahoo.com. The following third-level domain is usually used to define company departments, with “www.” being the most widely used option.

As for hosting for your website, pick from the most prominent providers in your locality (you can use some directory website for that, by the way) and based on the desired scale and rates of performance (for instance, a cloud server is your best bet if you expect your resource to handle intense volumes of traffic; otherwise, a shared server will be enough for a lightweight solution).

Learn more details about selecting a domain and hosting in How to Choose and Set Up Web Hosting – MPS Guide.

Create a design

Design is crucial when it comes to positioning your directory website among your TA. We’d strongly recommend going with minimalistic solutions without trying to be over creative. The interface should be simple, pretty to look at, and intuitive in use, but not crammed with visual and functional elements. The overall navigation should be accessible to a five-year-old.

Any heavyweight animations will also affect the overall website performance, especially slowing it down in the conditions of the unstable or low-speed Internet connection. As a role model and source of inspiration for your efforts, take a good look at the Yelp site, with its concise and elegant yet practical design.

Examples of Progressive Web Apps (PWAs) in 2020

Business directory development

Before commencing any coding, list all the basic elements your future project should feature. Usually, a regular directory resource has company listings and profiles, interactive maps, as well as a set of standard elements, such as a registration page, necessary input text input forms, etc.

Basically, you are looking at an implementation of a multi-page site with a specific structure, which dictates particular performance, accessibility, and intuitivity requirements.

Step-by-Step Tutorial on How to Create a Business Directory Website with Angular

The following tutorial describes the basic process of implementing a page for your future directory software in the form of an Angular-based Progressive Web App. This is a more practical and efficient way to go around such a task which also allows to save on web development tools and expect high rates of user satisfaction due to the utter reliability, speed, and engagement of a PWA.

Surely, you can simply use a readymade engine like WordPress and connect a PWA plugin to it. If we are talking about a directory site, however, developers may require the flexibility that none of the existing “all-in-one” CMS systems can provide.

So, how to build a business directory website in the form of an Angular-based PWA? Let’s start.

Creating a new project

First, you should get the latest version of Angular CLI so that you could employ the capabilities of Node.js 10.16 or lower. Use the following command for this:

$node -v

Next, if you get a result that doesn’t match the version requirements, you should go to Node.js and download the required version from there.

Now, you can install the latest version of Angular CLI in the following way:

$npm install -g @angular/cli

or this way if we’re talking about the root command:

$sudo npm install -g @angular/cli

Lastly, create a new project with the following command:

$ng new NgPwa

Commencing the app development

Now, for our PWA implementation.

Connect Angular Material

Two brief lines are required for that:

$cd NgPwa

Configure HTTPClient

You will need an HTTPClient to create a proper request sending script. Connect it so you are able to employ it further on in any part of your software:

      /*...*/
      import { HttpClientModule } from  '@angular/common/http';
      @NgModule({
      declarations: [
      AppComponent
      ],
      imports: [
      /*...*/
      HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
      })
      export  class AppModule { }
    

Next, you will need to involve a storage for JSON API generation. For that, make sure beforehand that you have CORS and disable the remote data source reading option. In our case, it will be Jargon GitHub Simplified JavaScript. Use the following line that would create a new entity of the ApiService class in the file src/app/api.service.ts:

$ng g service api

Then, specify the following commands that would define dependencies between an HTTPClient and Observable classes:

      import { Injectable } from  '@angular/core';
      import { HttpClient } from  '@angular/common/http';
      import { Observable } from  'rxjs';
      export  interface  Item {
          name:  string;
          description:  string;
          url:  string;
          html:  string;
          markdown:  string;
      }
      @Injectable({
      providedIn:  'root'
      })
      export  class ApiService {
          private  dataURL: string  = "https://www.techiediaries.com/api/data.json";
          constructor(private  httpClient: HttpClient) {}
          get():  Observable<Item[]>{
              return this.httpClient.get(this.dataURL) as Observable<Item[]>; 
          }
      }
    

Now, conduct an import of ApiService and Item class to the PWA. For this, open a previously configured file src/app/app.component.ts and add the following pieces of code into it:

      import { Component, OnInit } from  '@angular/core';
      import { ApiService } from  './api.service';
      import { Item } from  './api.service';
      @Component({
          selector:  'app-root',
          templateUrl:  './app.component.html',
          styleUrls: ['./app.component.css']
      })
      export  class AppComponent  implements OnInit{
          title  = 'NgPwa';
          items:  Array<Item>;
          constructor(private  apiService: ApiService){
          }
          ngOnInit(){
              this.getData();
          }
          getData(){
              this.apiService.get().subscribe((data:  Array<Item>)=>{
              console.log(data);
              this.items  = data;
          }, (err)=>{
                  console.log(err);
              });
          }
      }
    

Creating UI

The UI in a PWA consists of the web page carcass and heading. The carcass component is your Angular Material. You should import it to the file src/app/app.module.ts by specifying the following code:

      /*...*/
      import {MatButtonModule} from '@angular/material/button';
      import {MatExpansionModule} from '@angular/material/expansion';
      import {MatToolbarModule} from '@angular/material/toolbar';
      @NgModule({
          declarations: [
              AppComponent
          ],
          imports: [
              /*...*/
              MatButtonModule,
              MatExpansionModule,
              MatToolbarModule
          ],
          providers: [],
          bootstrap: [AppComponent]
      })
      export class AppModule { }
    

Now, open src/application/app.component.html, delete all of its contents, and specify the following instead:

      <mat-toolbar color="primary">
       <mat-toolbar-row>{{title}}</mat-toolbar-row>
      </mat-toolbar>
      <mat-accordion>
       <mat-expansion-panel *ngFor="let item of items">
         <mat-expansion-panel-header>
           <mat-panel-title>
             {{item.name}}
           </mat-panel-title>
         </mat-expansion-panel-header>
         <div [innerHTML]="item.html"></div>
         <a mat-button [href]="item.url">Go to full article</a>
       </mat-expansion-panel>
      </mat-accordion>
    

Working with the production part

You should know that in the case of working with Angular, as with any other framework, you don’t get default technical tools that grant the correspondence to the PWA software specifics (such tools as Service Worker, Push Notifications, Web App manifest, HTTPS, App Shell, etc.).

You need to install them manually when you build your online directory website. To install an HTTP server, for instance, use this:

$npm i -g http-server

And the following lines to launch it:

cd dist/NgPwa

The latter line with the -o suffix will automatically open the browser and launch your PWA.

Conducting an audit via Lighthouse

To check the correspondence with the PWA specifics, Lighthouse will come in handy.

Open your Chrome browser and specify your PWA address: http://127.0.0.1:8080/.

Launch the DevTools panel and specify “mobile” in the list of available emulators – this will allow boosting the correspondence with the PWA requirements in the mobile environment. Also, disable audit options that are available for other types of apps apart from PWA.

Now, commence an audit. Once the service is done processing, you’ll get a report that highlights all the non-correspondences to the PWA checklist.

You can eliminate any non-correspondences by connecting the following tools which we already mentioned above in the article:

Service Worker

Service Worker is a script that is launched by the browser in the background mode and handles data caching. It isn’t attached to the DOM or page at that, but takes responsibilities for processing network requests, push-notifications, and background synchronization, intercepting HTTPS, App Shell, and other requests. It also can be used in offline mode.

In order to employ all the benefits of Service Worker, you should simply register this service in your project.

HTTPS

HTTPS is also required for achieving a full correspondence with the PWA requirements. Moreover, you may need to acquire an SSL certificate, which is necessary if your PWA is to operate with private user data: authentication data, banking card numbers, email addresses, etc. Ultimately, adding more fields to registration forms upon every other occasion, you should reconsider the need in purchasing an SSL certificate.

Web App Manifest

Web App manifest is a simple JSON file that enables you to customize:

• A PWA desktop icon;
• A splash screen;
• A color scheme;
• A screen orientation;
• An initial URL, etc.

It ultimately allows you to customize some essential non-technical aspects of your solution and let users install the app straight from the browser.

Conducting a follow-up audit

Once you connect some or all the above-mentioned services, you should conduct an iterated audit.

Creating Progressive Web Apps Using Angular

Summary

As you can see, it isn’t that simple to create a business directory website. Still, we hope we managed to clarify the essentials and answer the question of how to start a business directory website at least to some extent.

With all the technical complexity and nuances at hand, however, we’d strongly recommend hiring seasoned experts in the field to help you implement an authentic solution. Contact us if you wish to get all the guarantees of acquiring a high-quality, high-performance, accessible directory resource.