Steps to build your dashboard in Angular

Follow this tutorial to build your dashboard from scratch. Or get the complete code here.

1. Create angular app using angular cli

- Prerequisite

Install @angular/cli globally

npm install @angular/cli -g
- Scaffolding the app
ng new angular-dashboard --routing

2. Install dependencies

- Install HyperTrack helper libraries
cd angular-dashboard #go to the app folder
npm install ht-angular ht-client ht-maps ht-data ht-utility
npm install ht-models -D
- Install extra dependencies

These are required for the helper libraries

npm i underscore moment-mini font-awesome
- Install map dependencies

If using leaflet, install leaflet and marker cluster library.

Google maps

npm i @types/googlemaps


npm i leaflet leaflet.markercluster
npm i @types/leaflet @types/leaflet.markercluster

Note: Checkout tsconfig.json in root folder of the app. Remove "types" field and add "typeRoots": ["node_modules/@types"];

- Add styles script in .angular-cli.json
  "styles": [

Remove leaflet related stylesheet if only google map is used.

3. Setting up the app

- Import modules and setup HtMddule

navigate to src/app/app.module.ts and make the following edits

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HtModule} from "ht-angular";
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  declarations: [
  imports: [
    HtModule.forRoot({token: 'sk_xxxxxxxxxxxxx', mapType: 'google'})
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Add HyperTrack key in place of 'sk_xxxxxxxxxxxxx'

- Import google map and other dependencies

In src/index.html you also need to add the following scripts

<!--google map scripts-->
<script src=""></script>
<script src="<KEY>&libraries=geometry"></script>
<script src=""></script>
<!--google maps script end-->
<!--leaflet stylesheet-->
  <link rel="stylesheet" href=""
<!--leaflet stylesheet end-->

Import either google map libraries or leaflet depending on your choice of map. Add your google map key in place of <KEY> in the script tag.

4. Add view

- Clean placeholder html

go to src/app/app.component.html and clear placeholder html. Finally it should look like the following

- Add home route and page

Use cli to generate a module and component

ng g module home --routing
ng g component home

Add a route to home module. go to src/app/home/home-routing.module.ts and a path like the following

import {HomeComponent} from "./home.component";

const routes: Routes = [
  { path: "", component: HomeComponent}

Add the following route in app route. go to src/app/app-routing.module.ts and home-module as a lazy loaded route.

const routes: Routes = [
  { path: '', loadChildren: "./home/home.module#HomeModule"},

Serve the app locally to check if home component is correctly being displayed.

npm start #go to localhost:4200 after compilation
- Add view to a page

Go to src/home/home.module.ts and add UsersMapContainerModule in import array of the module

import {UsersMapContainerModule} from "ht-angular";
import {GetUrlParam} from "ht-utility";

  imports: [
    UsersMapContainerModule //imports UsersMapContainerComponent
  declarations: [HomeComponent]
export class HomeModule { 
  Injecting HtClientService atleast onec is mandatory. 
  This can be removed if has been injected somewhere else.
  constructor(htClient: HtClientService) {
    get token from query param; e.g. "?key=sk_xxxxxxxxxxxxxxx"
    const token = GetUrlParam('key');
    set token from query param instead on hard coding it during instantiation of HtModule
    if (token) htClient.token = token; 

go to src/home/home.component.html, and add the html corresponding to UsersMapContainerComponent


close the local serve and restart using npm start. The home page now should show UsersMapContainerComponent


5. Create prod build

ng build -prod

This is create a dist folder with html, css and js file which is ready to be served.

Note: If you are serving the app with different base url, e.g., edit the <base href="/"> to <base href="/mydashboard"> in src/index.html.

results matching ""

    No results matching ""