nshmp-template

Angular template for NSHMP applications.

Documenation and User Guide

Repository and Angular documentation:

• https://ghsc.code-pages.usgs.gov/nshmp/nshmp-template/

Prerequisites

• Node and NPM: Recommend using Node Version Manager (NVM)
  • Windows
  • MacOS/Linux

Technologies

• Angular
• Angular Material
• USWDS - Styling components and utilities
• gts - Code styling

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.

Command Line

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

Edit file: ~/.npmrc

# 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

npm install -S @ghsc/nshmp-template

Styles and Theme

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

Import

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

@use '~@ghsc/nshmp-template/styles/styles.scss';

Angular.json

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

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

Assets

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

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

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.

<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/google/gts
7. https://docs.npmjs.com/cli/v7/using-npm/scope
8. https://docs.npmjs.com/cli/v7/configuring-npm/npmrc