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 --style=less

change angular-dashboard to the app name you want to create. We currently ship with less global styling. We recommend scaffolding the app using less for styling.

2. Install dependencies

- Install HyperTrack helper libraries
cd angular-dashboard #go to the app folder
npm i ht-angular
- Install extra dependencies

These are required for the helper libraries

npm i underscore moment-mini font-awesome leaflet
- Install typings as dev-dependencies
npm i @types/googlemaps @types/leaflet ht-models -D
- Update typescript

Helper libraries leverage the latest features of typescript. Install typescript >= 2.5.x

npm i typescript@2.5.x -D

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'}) // demo
  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>
<!--google maps script end-->
<!--leaflet stylesheet-->
  <link rel="stylesheet" href=""
<!--leaflet stylesheet end-->

Add your google map key in place of <KEY> in the script tag. No need to import leaflet stylesheet if leaflet is not used in the map.

- Import global styles

in src/styles.less add the global stylesheet

@import "~ht-angular/less/global";
@import "~ht-maps/dist/styles.css";

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";

  imports: [
    UsersMapContainerModule //imports UsersMapContainerComponent
  declarations: [HomeComponent]
export class HomeModule { }

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 ""