BarkBack

"Bark Back" is a fictional animal shelter that demonstrates using SKY UX components to build a web application.

Overview

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

Each of the steps under Building the Project adds a new feature. You can follow along by forking the project in StackBlitz and running the code in your browser.

If you want to run the project locally, you can clone the repository and check out the branch for the step you're interested in.

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

Using StackBlitz

You can use StackBlitz to run this project in your browser. Within each section below, click the "Open in StackBlitz" button to get started.

Look at Configuring your browser to run WebContainers for help with running StackBlitz, as well as troubleshooting tips.

Building the Project

Jump to the section you'd like to explore and click ▶︎ to show details:

1. 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 bark-back \
  --routing \
  --skip-git \
  --style=scss \
  --no-ssr
cd bark-back

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 bark-back \
  --skip-confirmation

Install NPM packages that we plan to use:

npm install \
  @skyux-sdk/testing \
  @skyux/ag-grid \
  @skyux/animations \
  @skyux/autonumeric \
  @skyux/avatar \
  @skyux/data-manager \
  @skyux/datetime \
  @skyux/flyout \
  @skyux/forms \
  @skyux/indicators \
  @skyux/inline-form \
  @skyux/layout \
  @skyux/lookup \
  @skyux/modals \
  @skyux/pages

Create the welcome page:

npx ng generate component welcome-to-skyux

• Clear the boilerplate from the app component.
• Add a welcome message to the welcome component.
• Add the initial theme provider.

Format and commit:

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

2. Create an HTTP Service

Start with the project from the previous step:

npx ng generate class settings --skip-tests
npx ng generate service services/app-ui-config/app-ui-config --skip-tests
npx ng generate interface types/animal-profile
npx ng generate service services/data/data
npx ng generate service services/data/persistence

• Create a settings file to hold application settings.
• Wire up HTTP client.
• Implement SkyUIConfigService.
• Write tests.
• Write test service to simplify testing consuming components.

▶️ Run app in StackBlitz ⁄ ⚖️ Run tests in StackBlitz

Review the code changes

3. Create a view

Start with the project from the previous step:

npx ng generate component animal-profiles/view
npx ng generate component animal-profiles/view/description-list
npx ng generate component animal-profiles/view/description-list/description-list-item --flat --inline-template --style=none --skip-tests

• Create a reusable description list component to simplify a pattern.
• Create a view component to use in both a flyout and as a standalone page.

▶️ Run app in StackBlitz ⁄ ⚖️ Run tests in StackBlitz

Review the code changes

4. Create an edit form

Start with the project from the previous step:

npx ng generate component animal-profiles/view/view-page --flat --style=none
npx ng generate component animal-profiles/edit
npx ng generate service animal-profiles/edit/edit

• Use reactive forms for more programmatic control.
• Use SKY UX components for a consistent look and feel.
• Provide informative labelText for accessibility.
• Set up a route to see the view.

▶️ Run app in StackBlitz ⁄ ⚖️ Run tests in StackBlitz

Review the code changes

5. Add a Data Grid

Start with the project from the previous step:

npx ng generate interface types/animal-profile-row
npx ng generate component animal-profiles/list
npx ng generate @skyux/packages:add-ag-grid-styles --project bark-back

• Use the SKY UX data grid to display a list of animal profiles.
• Use the SKY UX data manager to manage the data view.
• Use flyouts to show animal profile details.
• Use modals to edit animal profiles.

▶️ Run app in StackBlitz ⁄ ⚖️ Run tests in StackBlitz

Review the code changes

6. Use Action Hub

Start with the project from the previous step:

npx ng generate component hub

• Create an Action Hub page.
• Use the data service to get a count of animals needing attention.

▶️ Run app in StackBlitz ⁄ ⚖️ Run tests in StackBlitz

Review the code changes

Next Steps

• More code examples and documentation: SKY UX Documentation
• For supporting additional languages: Angular localization
• Deploying Angular applications: Angular deployment
• For new SKY UX releases, use ng update: npx ng update @skyux/packages