NSHMP Template

nshmp-template

Angular template for NSHMP applications.

Documenation and User Guide

Repository and Angular documentation:

Prerequisites

Technologies

Usage

The @ghsc Scope

In order to install nshmp-template into an Angular project, you must configure NPM to be aware of the @ghsc scope. There are two methods to do this:

Note: In these two examples, the first uses an URL-encoded path to the nshmp-template project library. The second uses the nshmp-template project ID. Either value can be used with either method.

Method 1: Command Line

Example :
$ npm config set \
  '@ghsc:registry' \
  "https://code.usgs.gov/api/v4/projects/ghsc%2Fnshmp%2Fnshmp-template/packages/npm/"

Method 2: Edit file: ~/.npmrc

Example :
# Upstream nshmp-template
@ghsc:registry=https://code.usgs.gov/api/v4/projects/1416/packages/npm/

Note: You may alternatively create a .npmrc file in your Angular project with the above info.

The NPM configuration may exist in multiple different locations. Learn more about NPM configuration files.

After properly configuring the NPM scope, you can now install nshmp from the @ghsc scope.

Installation

Example :
npm install -S @ghsc/nshmp-template

Bootstrap

Provide NSHMP Template

Add provideNshmpTemplate function to the bootstrapApplication in the main.ts of the Angular application. This applies some Angular Material settings.

Example :
import {provideNshmpTemplate} from '@ghsc/nshmp-template';

bootstrapApplication(AppComponent, {
  providers: [provideNshmpTemplate()],
});

Styling

To include the NSHMP theme and styling to your Angular application either import the stylesheet or update the angular.json file.

Method 1: Import

Update your Angular main style.scss to import nshmp-template:

Example :
@use '~@ghsc/nshmp-template/styles/styles.scss';
Method 2: Angular.json

Update the angular.json styles property to include nshmp-template stylesheet:

Example :
"styles": [
  "node_modules/@ghsc/mnshmp-template/styles/styles.scss"
]

USWDS

USWDS is used only for some utilities like grid layout, padding and margin.

Add stylePreprocessorOptions and loader to include uswds in build options of the application in the angular.json file:

Example :
"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": ["node_modules", "./node_modules/@uswds/uswds/packages"]
      },
      "loader": {
        ".woff2": "file"
      }
    }
  }
}

Assets

Update the angular.json assets property to include nshmp-template aassets:

Example :
"assests": [
  {
    "glob": "**/*",
    "input": "node_modules/@ghsc/nshmp-template/assets",
    "output": "./assets"
  }
]

Examples

Run npm run start to view the example application.

Note: Server starts on localhost:4200

Simple Application

See the simple application to see how to use the nshmp-template to create a simple app.

Plotting Application

See the plot application to see how to use the nshmp-template to create a plotting app with a control and setting panel.

Mapping Application

See the mapping application to see how to use the nshmp-template to create a mapping app with a control and setting panel.

Inputs and Outputs

The nshmp-template has a few inputs and outputs.

Example :
<nshmp-template
  [navigationList]=""
  appTitle="My App Title"
  (aboutChanged)=""
  (controlPanelChanged)=""
  (controlsChanged)=""
  (mapChanged)=""
  (plotChanged)=""
  (settingsChanged)=""
>
</nshmp-template>

Development

Commands

  • npm run build - build application
  • npm run start - start the example application
  • npm run lint - lint the project
  • npm run lint:fix - fix linting problems if possible

References

  1. https://github.com/coreybutler/nvm-windows
  2. https://github.com/nvm-sh/nvm
  3. https://angular.io/
  4. https://material.angular.io/
  5. https://designsystem.digital.gov/
  6. https://github.com/angular-eslint/angular-eslint
  7. https://docs.npmjs.com/cli/v7/using-npm/scope
  8. https://docs.npmjs.com/cli/v7/configuring-npm/npmrc

results matching ""

    No results matching ""