Back Matter

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Addendum

Please read this addendum for a few minor details that did not fit into the Web Arcade use case descriptions of the book. We begin by detailing how to create a proxy for accessing the mock services (in the Angular application). The code sample already comes with the proxy configured. However, this section explains the purpose and implementation details.

The code sample for rolling a die was enhanced by launching in a bottom sheet, so we also detail how to use a bottom sheet in the Web Arcade application.

Also, we cover the hash location strategy using the traditional approach for routing in a single-page application. Hash routing prefixes the Angular route with a hash (#). Please note that it is advisable to stick to the default strategy used so far in the book. However, with the current configuration of Http-Server (a developer-class Node.js web server), the code samples do not work if you refresh the page. It forces you to start over from the beginning. Addendum provides hash routing as an alternative, which circumvents the refresh problem for Http-Server.

Creating a Proxy for Mock Services

Remember, in the code samples, the mock services run on a different port and instance. The Angular application runs on localhost (127.0.0.1) on port 4200. The mock web server runs on localhost on port 3000. Typically, web browsers do not allow users to access services on different domains. On a developer machine, consider the solution shown in Listing A-1 to access the mock services.

Configure a proxy for the Angular application, and create a new file, called proxy.conf.json.

{

"/api": {

"target": "http://localhost:3000",

"secure": false

}

Listing A-1

Angular Application Proxy

Notice that an API call with the prefix /api is proxied to a target of localhost:3000. The Angular application in the browser invokes API calls on port 4200. The reroute to port 3000 is abstracted from the browser.

Next, specify the proxy configuration on the ng serve command. Consider the following code snippet. The option --proxy-config provides the configuration file.

"start": "npm run start-api & ng serve --proxy-config proxy.conf.json",

You may specify a proxy with Http-Server (used while running the bundled application). Consider the following snippet:

"start-http-server": "yarn build && http-server dist/web-arcade --proxy http://localhost:3000",

Using the Bottom Sheet for a Die Roll

When we started the book, one of the first components developed was a die. The component files are in the src/components/dice directory. Considering it was one of the first components in the sample project, routing was not introduced. Later, we extended the solution.

In the final solution, you launch the die within a bottom sheet, as shown in Figure A-1, using the button on the toolbar. As you know, the die animates, giving the impression of rolling a die.

Notice that the die is launched on the Game List page. Remember, the component for the game list is BoardGamesComponent. The code is located in the directory src/app/components/board-games.

Figure A-1
Rolling a die in the Web Arcade application

Adding the Bottom Sheet in Web Arcade

To begin using a bottom sheet, import the Angular Material module for the bottom sheet in the App Module, as shown in Listing A-2. See lines 1 and 11, which import MatBottomSheetModule into AppModule.

01: import { MatBottomSheetModule } from '@angular/material/bottom-sheet';

02:

03: @NgModule({

04: declarations: [

05: /* Component declarations go here */

06: ],

07: imports: [

08: BrowserModule,

09: MatCardModule,

10: MatInputModule,

11: MatBottomSheetModule,

12: ],

13: providers: [

14: // Services and providers declared here

15: ],

16: bootstrap: [AppComponent]

17: })

18: export class AppModule { }

Listing A-2

Import MatBottomSheetModule

Showing the Bottom Sheet with the Die Component

Next, import and inject the bottom sheet in BoardGamesComponent (for the game list). Consider Listing A-3.

01: import { Component, OnInit } from '@angular/core';

02: import { MatBottomSheet } from '@angular/material/bottom-sheet';

03: import { DiceComponent } from '../dice/dice.component';

04:

05: @Component({

06: selector: 'wade-board-games',

07: templateUrl: './board-games.component.html',

08: styleUrls: ['./board-games.component.sass']

09: })

10: export class BoardGamesComponent implements OnInit {

11: constructor(

12: private bottomSheet: MatBottomSheet) { }

14: }

Listing A-3

Import and Inject the Bottom Sheet in a Board Games Component

See line 2, which imports the bottom sheet’s TypeScript module in the Angular Material package. Next, see lines 11 and 12 in the code. They inject the bottom sheet into the component.

Also, notice line 3. It imports DiceComponent that encapsulates the die functionality. Next, include the function in Listing A-4, which draws the bottom sheet and shows a die on it.

1: showDice(){

2: this.bottomSheet.open(DiceComponent);

3: }

Listing A-4

Open a Bottom Sheet with Dice

Notice that the function uses this.bottomSheet, an instance injected into the component constructor. The open() function draws the bottom sheet. You pass DiceComponent as a parameter. The bottom sheet is a container drawn at the bottom of the page. The container hosts DiceComponent that is passed in as a parameter. See Figure A-1 for the result.

Invoke this function by clicking the Show Dice menu button. Consider Listing A-5 for the board games HTML template with the menu and the button.

1: <mat-toolbar color="primary">

2: <mat-toolbar-row>

3: <span>Game List</span>

4: <span class="flexExpand"></span>

5: <button mat-button (click)="showDice()">Show Dice</button>

6: </mat-toolbar-row>

7: </mat-toolbar>

8:

Listing A-5

Board Games Template Launching Bottom Sheet

See line 5 with the click handler, which invokes the showDice() function. See Figure A-1 for the result.

Using a Hash Location Strategy

Angular provides the following two location strategies:

PathLocationStrategy: The default location strategy. The screenshots and figures in the book use this strategy.
HashLocationStrategy: Traditional location strategy, which uses the # prefix a path. See Figure A-2.

Most modern applications use the path location strategy. It does not include any special characters in the URL. When an Angular application uses the path location strategy, the web server is expected to return index.html to load the Angular application for all the routes in the application. If a particular web server does not support this behavior (or is not configured to do so), you might fall back to the traditional hash routing strategy.

Note

Remember that Web Arcade uses a developer-class web server, Http-Server. With the following configuration that we used in the sample application, reloading a page at a particular route (for example http://localhost:8080/home) returns an error. As mentioned earlier, the web server needs to return index.html for all the routes so that the Angular application in the browser manages a route. Considering that we don’t have such a configuration, you may switch to hash routing for Web Arcade.

http-server dist/web-arcade --proxy http://localhost:3000

To enable hash routing, update AppRoutingModule in src/app/app-routing.module.ts. See Listing A-6, line 19.

01: import { NgModule } from '@angular/core';

02: import { RouterModule, Routes } from '@angular/router';

03: import { BoardGamesComponent } from './components/board-games/board-games.component';

04: import { GameDetailsComponent } from './components/game-details/game-details.component';

05:

06: const routes: Routes = [{

07: path: "home",

08: component: BoardGamesComponent

09: }, {

10: path: "details",

11: component: GameDetailsComponent

12: }, {

13: path: "",

14: redirectTo: "/home",

15: pathMatch: "full"

16: }];

17:

18: @NgModule({

19: imports: [RouterModule.forRoot(routes, {useHash: true})],

20: exports: [RouterModule]

21: })

22: export class AppRoutingModule { }

Listing A-6

Enabling Hash Routing

Summary

This addendum detailed content that did not fit into the main chapters of the book. First, we detailed how to configure a proxy for mock services. It is typical of Angular and browsers to add a proxy to access resources on different domains than that of the browser application.

Next, we detailed how to enhance the roll-a-die feature, by launching it in a bottom sheet. We covered how to add a bottom sheet to the Web Arcade application and integrate it with the die component.

Finally, we detailed a hash location strategy, an alternative to the default path location strategy. We specifically addressed the problem of refreshing pages deployed on Http-Server.

References and Links

The book and code samples use the following extensively:

Angular framework
Angular Material Library, which is Angular’s implementation of Material Design

Use the following link for Angular’s official documentation on the framework:

https://angular.io/docs

To learn how to build applications with Angular and Material Design, read the following book:

https://www.apress.com/us/book/9781484254332

The following provides documentation on SASS and SCSS for stylesheet development. Web Arcade and the code samples use the indented syntax provided with SASS. Please use the following URL to learn more about SASS and SCSS:

https://sass-lang.com/documentation/syntax

Node Package Manager (NPM) is a default tool for installing node modules, packages, and libraries. The book uses it extensively. To learn more about Node.js and NPM, use the following links:

NPM documentation: https://docs.npmjs.com/about-npm
Node.js documentation: https://nodejs.dev/learn

Yarn is another package manager and a popular alternative. To learn more about Yarn, use the following links:

Website: https://yarnpkg.com/
Yarn documentation: https://classic.yarnpkg.com/en/docs/

The book and the code samples use Angular CLI extensively to create and maintain the Angular application. The book uses the following documentation as a reference:

https://angular.io/cli

The code samples use the Http-Server package for running a developer class web server.

Use the following link for NPM documentation on the package: https://www.npmjs.com/package/http-server
Use the following link for the GitHub code repository: https://github.com/http-party/http-server

The code sample uses url() in SASS (stylesheets). Please use the following link for documentation on the usage:

https://developer.mozilla.org/en-US/docs/Web/CSS/url()

Service workers are a core concept in the book. The book extensively uses documentation provided by Google developer pages. Refer to the following link:

https://developers.google.com/web/fundamentals/primers/service-workers

While using HTTP services, the API uses HTTP methods, and there are conventions for selecting one to use. The code samples and the book take references from the following documentation:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

The book uses Node.js and ExpressJS for developing mock HTTP services. Use the following documentation for learning more about Express:

https://expressjs.com/

Use the following link for a guide:

https://expressjs.com/en/guide/routing.html

IndexedDB is a core concept detailed in the book, which takes references from the API and an implementation from the following documentation and the links:

W3C Recommendation (at the time of writing): https://www.w3.org/TR/IndexedDB-2/
W3C Working Draft (at the time of writing): https://www.w3.org/TR/IndexedDB/

The IndexedDB documentation on the Mozilla.org website is at the following link:

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

A Wikipedia article on IndexedDB can be found here:

https://en.wikipedia.org/wiki/Indexed_Database_API

Browser support for IndexedDB can be found here:

https://caniuse.com/indexeddb

The book explains how to use the Dexie.js library as an alternative API for the default IndexedDB API. It simplifies IndexedDB access. Refer to the documentation for Dexie.js at the following link:

https://dexie.org/docs/Dexie.js

Verify browser support for a feature at CanIUse.com, found here:

https://caniuse.com/indexeddb

The book mentions the following integrated development environments (IDEs) for the code:

Visual Studio Code: https://code.visualstudio.com/
Sublime Text: https://www.sublimetext.com/
Atom: https://atom.io/
WebStorm: https://www.jetbrains.com/webstorm/

Index

activateUpdate() function

addBulkComments() function

Add comment

Add comments offline/online

event listeners

identify getter

IndexedDB

IsOnline field

user experience

web-arcade database

Window service

Angular application

CLI command

configure services

create services

HTTPS

http-server

HTTP service

offline features

provide a service

run

service workers

web arcade

Angular CLI

Angular code

Angular components

Angular module

Angular routing

@angular/service-worker package

App component

appData field

Apps

Assets directory

Atom

Board games

data

endpoint

interfaces

mock data

Cascading style sheets (CSS)

checkForUpdates() function

concatWith() function

Content delivery network (CDN)

createObjectStore() function

Data structure

Delete action

deleteSynchronizedComments() function

Dexie.js

Dexie package

add comment

delete action

install

JS store

local forage

PouchDB

retrieve data

transactions

update action

ZangoDB

dice component

Document Object Model (DOM)

emit() function

European Computer Manufacturers Association (ECMA)

EventEmitter object

filter() function

find() function

gameSelected function

getAllCachedComments() function

getAll() function

getComments() function

get() function

getGameById() function

HTTP POST method

HTTPS connection

Http-Server

HTTP service

HyperText Markup Language (HTML)

Icon files

IdbStorageAccessService

IndexedDB

advantages

angular service

browser support

createIndex API

creating object store

definition

game details page

limitations

native browser API

terminology

web applications

IndexedDB, update data

init() function

inject() decorator

Input() decorator

Integrated development environment (IDE)

interval() function

J, K

JavaScript API

JavaScript Object Notation (JSON)

Java Virtual Machine (JVM)

Leaner style sheets (LESS)

Long-term support (LTS)

macOS

Mock HTTP services

adding comments

game details ID, filtering

retrieving comments

Mock services

ng generate service command

NgModules

ngOnInit() function

Node.js

Node Package Manager (NPM)

onAction() function

onerror() function

Online event

Online/offline events

onsuccess() function

onsuccesscallback() function

onupgradeneeded function

open() function

Output() decorator

P, Q

Pattern matching

post() function

Progressive web app (PWAs)

readFile() function

Relational database management system (RDBMS)

Retrieve data

rollDice() function

send() function

ServiceWorkerModule

Service workers

angular application

browser support

cache data

inspect

lifecycle

pattern matching

strategy

Web Arcade

showOnDice() function

Single-page applications (SPAs)

Snackbar component

Source code management (SCM) tool

Structured Query Language (SQL)

Stylesheets

Sublime text

SwCommunication service

identify

update

SwUpdate service

Synchronize offline comments, server

bulking update

delete data, IndexedDB

online

retrieving data, IndexedDB

Syntactically awesome style sheets (SCSS)

Technical Committee 39 (TC39)

Transaction

transformCommentDataStructure() function

TypeScript file

Update action

Visual Studio Code

W, X

wade-dice

Web Arcade

game details page

add comments

creating component

GET service calls

HTTP service

navigate

POST service calls

routing

Web Arcade IndexedDB

connect

initializes

object store/table

versions

WebStorm

Y, Z

Yarn

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Back Matter

Create new playlist

Sign In

Sign Up

Table of Contents for
Back Matter