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

npm test

Lint command: check the syntax of the code

npm run lint

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

npm run test:ci

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

Steps

1. Create the project
2. Create Data Services
3. Create a view
4. Create an edit form
5. Add a Data Grid
6. Use Action Hub

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@^19 new bark-back --routing --style=css --no-ssr
cd bark-back

Once the project is created, within the project directory, npx @angular/cli can be shortened to npx ng — ng is the command for the Angular CLI.

For convenience, set a generous budget for the bundle size. Also, turn on code coverage reporting.

npx ng config 'projects.bark-back.architect.build.configurations.production.budgets[0].maximumError' 2mb
npx ng config 'projects.bark-back.architect.test.options.codeCoverage' true

Add Prettier and ES Lint support:

npm install -D prettier@^3 eslint-config-prettier@^10 @trivago/prettier-plugin-sort-imports@^5
npx ng add @angular-eslint/schematics@^19 --skip-confirmation
npx ng add @skyux-sdk/eslint-schematics --skip-confirmation

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

npx ng add @skyux/packages --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/icon \
  @skyux/indicators \
  @skyux/inline-form \
  @skyux/layout \
  @skyux/lookup \
  @skyux/modals \
  @skyux/pages

Create the welcome page:

npx ng generate component welcome-to-skyux

The ng generate command can be shortened to ng g.

• 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"

Back to steps list

2. Create Data Services

Start with the project from the previous step:

This demo app will use a data service that loads data from a static file and saves it to the browser's session storage. It also uses browser storage for an implementation of SkyUIConfigService. A more complex application would leverage authentication and a backend API.

First, let's generate some code:

• Create a session storage handler for talking to the browser's session storage.
• Create a mock session storage service to use in tests.
• Implement SkyUIConfigService.

npx ng g class services/session-storage/session-storage
npx ng g service services/session-storage/mock-session-storage --skip-tests
npx ng g service services/app-ui-config/app-ui-config

Next, let's generate the data model:

• Define the data model for an animal profile, including a serialized version for saving to session storage.
• Create a file for an ID token.
• Define the interface for a persistence service.

npx ng g interface types/animal-profile
npx ng g interface types/animal-profile-serialized
npx ng g interface types/id
npx ng g interface services/data/persistence-service-interface

Lastly, let's create the services:

• Create a data service to manage the data.
• Create a persistence service to save and load data.
• Create a mock persistence service to use in tests.

npx ng g service services/data/data
npx ng g service services/data/persistence
npx ng g service services/data/mock-persistence --skip-tests

Angular CLI will create the scaffolding, but you will need to implement the logic in the files. Here's what that might look like:

• ▶️ Run app in StackBlitz
• ⚖️ Run tests in StackBlitz
• Review the code changes
• Back to steps list

3. Create a view

Start with the project from the previous step:

Getting into user interface design, we need to create a record view for the profiles:

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

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

• ▶️ Run app in StackBlitz
• ⚖️ Run tests in StackBlitz
• Review the code changes
• Back to steps list

4. Create an edit form

Start with the project from the previous step:

In order to edit the animal profiles, we need to create a form:

• Create a form component that loads in a SKY UX modal.
• Use Angular's reactive forms.
• Use SKY UX components for a consistent look and feel.
• Provide informative labelText for accessibility.
• Set up a route to see the view.
• Create a service to make it easier to load the form from different contexts.

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

• ▶️ Run app in StackBlitz
• ⚖️ Run tests in StackBlitz
• Review the code changes
• Back to steps list

5. Add a Data Grid

Start with the project from the previous step:

Now that we have a record view and edit form, we need to create a data grid where we can see all the animal profiles:

• Use the SKY UX data grid to display a list of animal profiles, including the additional styles.
• Use the SKY UX data manager to manage the data view.
• Use flyouts to show animal profile details.

npx ng g interface types/animal-profile-row
npx ng g component animal-profiles/list
npx ng g component animal-profiles/list/context-menu --style=none
npx ng g @skyux/packages:add-ag-grid-styles

• ▶️ Run app in StackBlitz
• ⚖️ Run tests in StackBlitz
• Review the code changes
• Back to steps list

6. Use Action Hub

Start with the project from the previous step:

Lastly, we need to create an action hub to show the number of animals needing attention:

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

npx ng g component hub

• ▶️ Run app in StackBlitz
• ⚖️ Run tests in StackBlitz
• Review the code changes
• Back to steps list

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