diff --git a/frontend/angular-io.js b/frontend/angular-io.js
index f894bb8..f9e9b99 100644
--- a/frontend/angular-io.js
+++ b/frontend/angular-io.js
@@ -6,7 +6,7 @@
```
-npm install --save @angular/cli // declarative and flexible JavaScript framework for building UI
+npm install --save @angular/cli // install command line interface (CLI) for Angular apps
ng serve // serve the app
ng build // build the release
```
@@ -46,13 +46,15 @@ class MyModule {}
// List of components, directives, and pipes that belong to this module.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]
-// List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
+// List of modules to import into this module. Everything from the imported modules is available
+// to declarations of this module.
imports: [BrowserModule, SomeOtherModule]
// List of components, directives, and pipes visible to modules that import this module.
exports: [MyRedComponent, MyDatePipe]
-// List of dependency injection providers visible both to the contents of this module and to importers of this module.
+// List of dependency injection providers visible both to the contents of this module and to
+// importers of this module.
providers: [MyService, { provide: ... }]
// List of components to bootstrap when this module is bootstrapped.
@@ -71,16 +73,19 @@ bootstrap: [MyAppComponent]
// Binds attribute role to the result of expression myAriaRole.
//
-// Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
+// Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the
+// expression isDelightful.
//
// Binds style property width to the result of expression mySize in pixels. Units are optional.
//
-// Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
+// Calls method readRainbow when a click event is triggered on this button element (or its
+// children) and passes in the event object.
//
-// Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
+// Binds a property to an interpolated string, for example, "Hello Seabiscuit".
+// Equivalent to:
//
// Binds text content to an interpolated string, for example, "Hello Seabiscuit".
@@ -89,21 +94,25 @@ bootstrap: [MyAppComponent]
// Sets up two-way data binding. Equivalent to:
//
-// Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
+// Creates a local variable movieplayer that provides access to the video element instance in
+// data-binding and event-binding expressions in the current template.
//
//
//
-// The * symbol turns the current element into an embedded template. Equivalent to: ...
+// The * symbol turns the current element into an embedded template.
+// Equivalent to: ...
// ...
// Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
// Card No.: {{cardNumber | myCardNumberFormatter}}
-// The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
+// The safe navigation operator (?) means that the employer field is optional and if undefined,
+// the rest of the expression should be ignored.
// Employer: {{employer?.companyName}}
-// An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
+// An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG
+// element from an HTML component.
//
// An root element is detected as an SVG element automatically, without the prefix.
@@ -123,20 +132,24 @@ import { CommonModule } from '@angular/common';
// Removes or recreates a portion of the DOM tree based on the showSection expression.
//
-// Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
+// Turns the li element and its contents into a template, and uses that to instantiate a view for
+// each item in list.
//
-// Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
+// Conditionally swaps the contents of the div by selecting one of the embedded templates based on
+// the current value of conditionExpression.
//
// ...
// ...
// ...
//
-// Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.
+// Binds the presence of CSS classes on the element to the truthiness of the associated map
+// values. The right-hand expression should return {class-name: true/false} map.
//
-// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
+// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the
+// first example, or you can call a method from the component.
//
//
@@ -172,7 +185,8 @@ class MyDirective() {}
@Pipe({...})
class MyPipe() {}
-// Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+// Declares that a class has dependencies that should be injected into the constructor when the
+// dependency injector is creating an instance of this class.
@Injectable()
class MyService() {}
@@ -184,7 +198,8 @@ class MyService() {}
@Directive({ property1: value1, ... })
-// Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().
+// Specifies a CSS selector that identifies this directive within a template. Supported selectors
+// include element, [attribute], .class, and :not().
selector: '.cool-button:not(a)'
// Does not support parent-child relationship selectors.
@@ -223,28 +238,36 @@ styleUrls: ['my-component.css']
import { Input, ... } from '@angular/core';
-// Declares an input property that you can update via property binding (example:
).
+// Declares an input property that you can update via property binding
+// (example: ).
@Input() myProperty;
-// Declares an output property that fires events that you can subscribe to with an event binding (example: ).
+// Declares an output property that fires events that you can subscribe to with an event binding
+// (example: ).
@Output() myEvent = new EventEmitter();
-// Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
+// Binds a host element property (here, the CSS class valid) to a directive/component property
+// (isValid).
@HostBinding('class.valid') isValid;
-// Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
+// Subscribes to a host element event (click) with a directive/component method (onClick),
+// optionally passing an argument ($event).
@HostListener('click', ['$event']) onClick(e) {...}
-// Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
+// Binds the first result of the component content query (myPredicate) to a property
+// (myChildComponent) of the class.
@ContentChild(myPredicate) myChildComponent;
-// Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
+// Binds the results of the component content query (myPredicate) to a property
+// (myChildComponents) of the class.
@ContentChildren(myPredicate) myChildComponents;
-// Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
+// Binds the first result of the component view query (myPredicate) to a property
+// (myChildComponent) of the class. Not available for directives.
@ViewChild(myPredicate) myChildComponent;
-// Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
+// Binds the results of the component view query (myPredicate) to a property (myChildComponents)
+// of the class. Not available for directives.
@ViewChildren(myPredicate) myChildComponents;
@@ -254,7 +277,8 @@ import { Input, ... } from '@angular/core';
// (implemented as class methods)
-// Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+// Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious
+// work here.
constructor(myService: MyService, ...) { ... }
// Called after every change to input properties and before processing content or child views.
@@ -263,7 +287,8 @@ ngOnChanges(changeRecord) { ... }
// Called after the constructor, initializing input properties, and the first call to ngOnChanges.
ngOnInit() { ... }
-// Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
+// Called every time that the input properties of a component or a directive are checked. Use it
+// to extend change detection by performing a custom check.
ngDoCheck() { ... }
// Called after ngOnInit when the component's or directive's content has been initialized.
@@ -272,10 +297,12 @@ ngAfterContentInit() { ... }
// Called after every check of the component's or directive's content.
ngAfterContentChecked() { ... }
-// Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.
+// Called after ngAfterContentInit when the component's views and child views / the view that a
+// directive is in has been initialized.
ngAfterViewInit() { ... }
-// Called after every check of the component's views and child views / the view that a directive is in.
+// Called after every check of the component's views and child views / the view that a directive
+// is in.
ngAfterViewChecked() { ... }
// Called once, before the instance is destroyed.
@@ -315,21 +342,26 @@ const routes: Routes = [
{ path: ..., component: ..., data: { message: 'Custom' } }
]);
-// Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
+// Configures routes for the application. Supports static, parameterized, redirect, and wildcard
+// routes. Also supports custom route data and resolve.
const routing = RouterModule.forRoot(routes);
// Marks the location to load the component of the active route.
//
//
-// Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
+// Creates a link to a different view based on a route instruction consisting of a route path,
+// required and optional parameters, query parameters, and a fragment. To navigate to a root
+// route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the
+// ../ prefix.
//
//
//
//
//
-// The provided classes are added to the element when the routerLink becomes the current active route.
+// The provided classes are added to the element when the routerLink becomes the current active
+// route.
//
class CanActivateGuard implements CanActivate {
@@ -339,7 +371,9 @@ class CanActivateGuard implements CanActivate {
): Observable|Promise|boolean { ... }
}
-// An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should
+// activate this component. Should return a boolean or an Observable/Promise that resolves to a
+// boolean.
{
path: ...,
canActivate: [CanActivateGuard]
@@ -353,7 +387,9 @@ class CanDeactivateGuard implements CanDeactivate {
): Observable|Promise|boolean { ... }
}
-// An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should
+// deactivate this component after a navigation. Should return a boolean or an Observable/Promise
+// that resolves to a boolean.
{
path: ...,
canDeactivate: [CanDeactivateGuard]
@@ -366,7 +402,9 @@ class CanActivateChildGuard implements CanActivateChild {
): Observable|Promise|boolean { ... }
}
-// An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should
+// activate the child route. Should return a boolean or an Observable/Promise that resolves to a
+// boolean.
{
path: ...,
canActivateChild: [CanActivateGuard],
@@ -380,7 +418,9 @@ class ResolveGuard implements Resolve {
): Observable|Promise|any { ... }
}
-// An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
+// An interface for defining a class that the router should call first to resolve route data
+// before rendering the route. Should return a value or an Observable/Promise that resolves to a
+// value.
{
path: ...,
resolve: [ResolveGuard]
@@ -392,7 +432,9 @@ class CanLoadGuard implements CanLoad {
): Observable|Promise|boolean { ... }
}
-// An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to check if the lazy loaded
+// module should be loaded. Should return a boolean or an Observable/Promise that resolves to a
+// boolean.
{
path: ...,
canLoad: [CanLoadGuard],