Reconfiguring Angular's Router with a CMS

<ol>
							<li>"Rewrite API" rules: interpret address<ul>
								<li>URL endpoint turned into a content resource
								<li>`/post-slug/`</li></ul></li>
							<li class="fragment fade-in" data-fragment-index="1">Database: Gets content<ul>
								<li>**Routing strategy: URL maps to _a DB query_**</li></ul></li>
							<li class="fragment fade-in" data-fragment-index="2">"Template Hierarchy": Loads view</li>
							<li class="fragment fade-in" data-fragment-index="3">User Roles & Capabilities: Access controls</li>
							<li class="fragment fade-in" data-fragment-index="4">Hooks & Filters: customize any of the above</li>
						</ol>

<aside class="notes" data-markdown>
						1. pattern match then build query
							- content is organizing principle; basis of schema
							- convert addresses into a resource — a piece of content.
						2. **Route strategy: URLs map to database queries!**
							- devs don't need to figure out literal routes ahead of time
							- Rather, describe strategy for creating them on the fly
						3. if-then tree; view = PHP script; output: struc HTML w/ DB content plugged in
							- query result dictates view you'll get
							- standardized file names; super-specific to generic
						4. decide who's allowed to see what, when
						5. event-driven extensibility system
						6. All work together to [routing definition]
						</aside>

```typescript
import {
	EventEmitter,
	Injectable,
} from '@angular/core';
import {
	CanActivate,
	Routes,
	Router,
	RouterStateSnapshot,
	UrlSegment,
} from '@angular/router';

/*
 * This service interacts with the WordPress' API to get content (routes)
 */
import { BackendService } from './backend.service';

@Injectable()
export class PageRouteService implements CanActivate {
	private _routes: Routes;

	constructor(
		private _backend: BackendService,
		private _router: Router,
	) {
		this._routes = [];
	}

	/*
	 * THE GOODS
	 */

	/*
	 * Load and use dynamic routes for pages as a `canActivate` route guard
	 *
	 * Reset Router config with Routes built for pages provided by backend data.
	 * If NOT routing to home, interrupt routing and reload the original request
	 * with the updated routes. Otherwise, when routing to home, we still need to
	 * reset with updated Routes to prime for `routerLink`-based navigation, but
	 * we have the route we need; we don't need to reload before proceeding with
	 * routing (so we return 'true').
	 */
	canActivate(state: RouterStateSnapshot): Promise {
		let isHome: boolean;
		isHome = '/' === state.url;

		let canActivatePromise: Promise;
		canActivatePromise = new Promise((resolve) => {
			// If home, resolve immediately
			if (isHome) {
				resolve(true);
			}

			// Helper that knows how to get data from BackendService
			this._fetchPageRouteDataFromBackend()
				.then((routeData: Array<{page_path: string}>) => {
					// Get current router config
					let routes: Routes;
					routes = this._router.config;

					// Add routes to beginning of routes config array
					//
					// This helper function knows structure of both page data from BackendService,
					// and the format the Angular router config needs.
					for (let route of this._constructPageRoutesFromPageArray(routeData)) {
						routes.unshift(route);
					}

					// Reset router with modified routes
					this._router.resetConfig(routes);

					// Indicate we are now ready
					this._updateStatus('ready');

					if (! isHome) {
						// interrupt navigation and reload with updated routes
						resolve(false);

						// Retry original request with updated routes, without adding a redirect step to browser history
						this._router.navigateByUrl(state.url, { replaceUrl: true });
					}
				});
		});

		return canActivatePromise;
	}

	/*
	 * Construct routes from an array of page data
	 */
	private _constructPageRoutesFromPageArray(pages: {page_path: string}[]): Routes {
		let routes: Routes;
		routes = [];

		for (let page of pages) {
			let route = {
				path: page.page_path,
				component: PageComponent,
				data: {
					page_path: page.page_path
				}
			};
			routes.push(route);
		}

		return routes;
	}
}
```
				