johnhwhite/my-app

MyApp

Overview

This project is designed to demonstrate some basic features of building a Single Page Application (SPA) using Angular and SKY UX.

Start command: serve the SPA while developing locally

npx ng serve --open

Test command: run unit tests in the browser

npx ng test

Lint command: check the syntax of the code

npx ng lint

Test command for continuous integration: run unit tests in a headless browser

npx ng test --browsers=ChromeHeadless --no-watch --no-progress

Steps used to create this project

Create the project

• Basic Angular application.
• ES Lint and Prettier for code quality.
• SKY UX design system to provide a consistent look and feel.

Start with the Angular CLI to create a new project.

npx @angular/cli@^17 new my-app \
  --routing \
  --skip-git \
  --style=scss \
  --no-ssr
cd my-app

Add ES Lint and Prettier support:

npx ng add @angular-eslint/schematics --skip-confirmation
npm i -D \
  prettier \
  prettier-eslint \
  eslint-config-prettier \
  eslint-plugin-prettier
npx ng add @skyux-sdk/eslint-config --skip-confirmation

Add @skyux/packages to the project, which adds SKY UX stylesheets and sets up upgrades:

npx ng add @skyux/packages \
  --project my-app \
  --skip-confirmation

Install NPM packages that we plan to use:

npm install \
  @ng-web-apis/common \
  @skyux-sdk/testing \
  @skyux/ag-grid \
  @skyux/data-manager \
  @skyux/forms \
  @skyux/indicators \
  @skyux/lookup \
  @skyux/modals \
  @skyux/pages

(code changes)

Format and commit:

npx prettier -w .
git init
git add -A
git commit -m "Initial commit"

Create an HTTP Service

npx ng g service services/data/data
npx ng g service services/data/persistence

• Wire up HTTP client.
• Write tests.
• Write test service to simplify testing consuming components.

Create a Form

npx ng g c records/edit

• Use reactive forms for more programmatic control.
• Use SKY UX components for a consistent look and feel.
• Provide informative labelText for accessibility.

Add a Data Grid

npx ng g c records/list
npx ng g @skyux/packages:add-ag-grid-styles --project my-app

(code changes)

Use Action Hub

npx ng g c hub

(code changes)