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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    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="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<KEY>&libraries=geometry"></script>
<!--google maps script end-->
<!--leaflet stylesheet-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
        integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
        crossorigin=""/>
<!--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

<router-outlet></router-outlet>
- 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";

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
    UsersMapContainerModule //imports UsersMapContainerComponent
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

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

<ht-users-map-container></ht-users-map-container>

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

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. www.abc.com/mydashboard, edit the <base href="/"> to <base href="/mydashboard"> in src/index.html.

results matching ""

    No results matching ""