2018-06-06 11:35:22 +00:00
|
|
|
|
/* *******************************************************************************************
|
2018-06-26 08:51:58 +00:00
|
|
|
|
* ANGULAR (2+) CHEATSHEET
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* DOCUMENTATION: https://angular.io/docs
|
|
|
|
|
* STYLE GUIDE: https://angular.io/guide/styleguide
|
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
```
|
2018-06-25 20:08:17 +00:00
|
|
|
|
npm install --save @angular/cli // install command line interface (CLI) for Angular apps
|
2018-06-06 11:35:22 +00:00
|
|
|
|
ng serve // serve the app
|
|
|
|
|
ng build // build the release
|
|
|
|
|
```
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* BOOSTRAPPING
|
|
|
|
|
* https://angular.io/guide/bootstrapping
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
|
|
|
|
|
|
|
|
// Bootstraps the app, using the root component from the specified NgModule.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* NG MODULES
|
|
|
|
|
* https://angular.io/guide/ngmodules
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { NgModule } from '@angular/core';
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@NgModule({
|
|
|
|
|
declarations: ...,
|
|
|
|
|
imports: ...,
|
|
|
|
|
exports: ...,
|
|
|
|
|
providers: ...,
|
|
|
|
|
bootstrap: ...
|
|
|
|
|
})
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// Defines a module that contains components, directives, pipes, and providers.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
class MyModule {}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// List of components, directives, and pipes that belong to this module.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// List of modules to import into this module. Everything from the imported modules is available
|
|
|
|
|
// to declarations of this module.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
imports: [BrowserModule, SomeOtherModule]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// List of components, directives, and pipes visible to modules that import this module.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
exports: [MyRedComponent, MyDatePipe]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// List of dependency injection providers visible both to the contents of this module and to
|
|
|
|
|
// importers of this module.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
providers: [MyService, { provide: ... }]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// List of components to bootstrap when this module is bootstrapped.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
bootstrap: [MyAppComponent]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* TEMPLATE SYNTAX
|
|
|
|
|
* https://angular.io/guide/template-syntax
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// Binds property value to the result of expression firstName.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <input [value]="firstName">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Binds attribute role to the result of expression myAriaRole.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <div [attr.role]="myAriaRole">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the
|
|
|
|
|
// expression isDelightful.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <div [class.extra-sparkle]="isDelightful">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Binds style property width to the result of expression mySize in pixels. Units are optional.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <div [style.width.px]="mySize">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Calls method readRainbow when a click event is triggered on this button element (or its
|
|
|
|
|
// children) and passes in the event object.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <button (click)="readRainbow($event)">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds a property to an interpolated string, for example, "Hello Seabiscuit".
|
|
|
|
|
// Equivalent to: <div [title]="'Hello ' + ponyName">
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <div title="Hello {{ponyName}}">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Binds text content to an interpolated string, for example, "Hello Seabiscuit".
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <p>Hello {{ponyName}}</p>
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <my-cmp [(title)]="name">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Creates a local variable movieplayer that provides access to the video element instance in
|
|
|
|
|
// data-binding and event-binding expressions in the current template.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <video #movieplayer ...>
|
|
|
|
|
// <button (click)="movieplayer.play()">
|
|
|
|
|
// </video>
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// The * symbol turns the current element into an embedded template.
|
|
|
|
|
// Equivalent to: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <p *myUnless="myExpression">...</p>
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// The safe navigation operator (?) means that the employer field is optional and if undefined,
|
|
|
|
|
// the rest of the expression should be ignored.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <p>Employer: {{employer?.companyName}}</p>
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG
|
|
|
|
|
// element from an HTML component.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <svg:rect x="0" y="0" width="100" height="100"/>
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// An <svg> root element is detected as an SVG element automatically, without the prefix.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <svg>
|
|
|
|
|
// <rect x="0" y="0" width="100" height="100"/>
|
|
|
|
|
// </svg>
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* BUILT-IN DIRECTIVES
|
|
|
|
|
* https://angular.io/guide/attribute-directives
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Removes or recreates a portion of the DOM tree based on the showSection expression.
|
|
|
|
|
// <section *ngIf="showSection">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Turns the li element and its contents into a template, and uses that to instantiate a view for
|
|
|
|
|
// each item in list.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <li *ngFor="let item of list">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Conditionally swaps the contents of the div by selecting one of the embedded templates based on
|
|
|
|
|
// the current value of conditionExpression.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <div [ngSwitch]="conditionExpression">
|
|
|
|
|
// <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
|
|
|
|
|
// <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
|
|
|
|
|
// <ng-template ngSwitchDefault>...</ng-template>
|
|
|
|
|
// </div>
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <div [ngStyle]="{'property': 'value'}">
|
|
|
|
|
// <div [ngStyle]="dynamicStyles()">
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* FORMS
|
|
|
|
|
* https://angular.io/guide/forms
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
|
|
|
|
|
|
|
// Provides two-way data-binding, parsing, and validation for form controls.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <input [(ngModel)]="userName">
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* CLASS DECORATORS
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { Directive, ... } from '@angular/core';
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Declares that a class is a component and provides metadata about the component.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Component({...})
|
|
|
|
|
class MyComponent() {}
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Declares that a class is a directive and provides metadata about the directive.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Directive({...})
|
|
|
|
|
class MyDirective() {}
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Declares that a class is a pipe and provides metadata about the pipe.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Pipe({...})
|
|
|
|
|
class MyPipe() {}
|
|
|
|
|
|
2018-06-26 08:50:13 +00:00
|
|
|
|
// Declares that a class can be injected into the constructor of another class
|
|
|
|
|
// by the dependency injector.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Injectable()
|
|
|
|
|
class MyService() {}
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* DIRECTIVE CONFIGURATION
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Directive({ property1: value1, ... })
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Specifies a CSS selector that identifies this directive within a template. Supported selectors
|
|
|
|
|
// include element, [attribute], .class, and :not().
|
2018-06-25 18:24:34 +00:00
|
|
|
|
selector: '.cool-button:not(a)'
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Does not support parent-child relationship selectors.
|
|
|
|
|
|
|
|
|
|
// List of dependency injection providers for this directive and its children.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
providers: [MyService, { provide: ... }]
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* COMPONENT CONFIGURATION
|
|
|
|
|
* https://angular.io/api/core/Component
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
@Component extends @Directive, so the @Directive configuration applies to components as well
|
|
|
|
|
|
|
|
|
|
// If set, the templateUrl and styleUrl are resolved relative to the component.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
moduleId: module.id
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// List of dependency injection providers scoped to this component's view.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
viewProviders: [MyService, { provide: ... }]
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Inline template or external template URL of the component's view.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
template: 'Hello {{name}}'
|
|
|
|
|
templateUrl: 'my-component.html'
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// List of inline CSS styles or external stylesheet URLs for styling the component’s view.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
styles: ['.primary {color: red}']
|
|
|
|
|
styleUrls: ['my-component.css']
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* CLASS FIELD DECORATORS FOR DIRECTIVES AND COMPONENTS
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { Input, ... } from '@angular/core';
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Declares an input property that you can update via property binding
|
|
|
|
|
// (example: <my-cmp [myProperty]="someExpression">).
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@Input() myProperty;
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Declares an output property that fires events that you can subscribe to with an event binding
|
|
|
|
|
// (example: <my-cmp (myEvent)="doSomething()">).
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@Output() myEvent = new EventEmitter();
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds a host element property (here, the CSS class valid) to a directive/component property
|
|
|
|
|
// (isValid).
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@HostBinding('class.valid') isValid;
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Subscribes to a host element event (click) with a directive/component method (onClick),
|
|
|
|
|
// optionally passing an argument ($event).
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@HostListener('click', ['$event']) onClick(e) {...}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds the first result of the component content query (myPredicate) to a property
|
|
|
|
|
// (myChildComponent) of the class.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@ContentChild(myPredicate) myChildComponent;
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds the results of the component content query (myPredicate) to a property
|
|
|
|
|
// (myChildComponents) of the class.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@ContentChildren(myPredicate) myChildComponents;
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds the first result of the component view query (myPredicate) to a property
|
|
|
|
|
// (myChildComponent) of the class. Not available for directives.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@ViewChild(myPredicate) myChildComponent;
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Binds the results of the component view query (myPredicate) to a property (myChildComponents)
|
|
|
|
|
// of the class. Not available for directives.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
@ViewChildren(myPredicate) myChildComponents;
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* DIRECTIVE AND COMPONENT CHANGE DETECTION AND LIFECYCLE HOOKS
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
|
|
|
|
// (implemented as class methods)
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious
|
|
|
|
|
// work here.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
constructor(myService: MyService, ...) { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Called after every change to input properties and before processing content or child views.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngOnChanges(changeRecord) { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Called after the constructor, initializing input properties, and the first call to ngOnChanges.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngOnInit() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngDoCheck() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Called after ngOnInit when the component's or directive's content has been initialized.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngAfterContentInit() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Called after every check of the component's or directive's content.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngAfterContentChecked() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Called after ngAfterContentInit when the component's views and child views / the view that a
|
|
|
|
|
// directive is in has been initialized.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngAfterViewInit() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Called after every check of the component's views and child views / the view that a directive
|
|
|
|
|
// is in.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngAfterViewChecked() { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Called once, before the instance is destroyed.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
ngOnDestroy() { ... }
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* DEPENDENCY INJECTION CONFIGURATION
|
|
|
|
|
* https://angular.io/guide/dependency-injection
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// Sets or overrides the provider for MyService to the MyMockService class.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{ provide: MyService, useClass: MyMockService }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Sets or overrides the provider for MyService to the myFactory factory function.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{ provide: MyService, useFactory: myFactory }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
// Sets or overrides the provider for MyValue to the value 41.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{ provide: MyValue, useValue: 41 }
|
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
/* *******************************************************************************************
|
2018-06-25 18:24:34 +00:00
|
|
|
|
* ROUTING AND NAVIGATION
|
|
|
|
|
* https://angular.io/guide/router
|
2018-06-06 11:35:22 +00:00
|
|
|
|
* ******************************************************************************************* */
|
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
|
2018-06-06 11:35:22 +00:00
|
|
|
|
import { Routes, RouterModule, ... } from '@angular/router';
|
|
|
|
|
|
|
|
|
|
const routes: Routes = [
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{ path: '', component: HomeComponent },
|
|
|
|
|
{ path: 'path/:routeParam', component: MyComponent },
|
|
|
|
|
{ path: 'staticPath', component: ... },
|
|
|
|
|
{ path: '**', component: ... },
|
|
|
|
|
{ path: 'oldPath', redirectTo: '/staticPath' },
|
|
|
|
|
{ path: ..., component: ..., data: { message: 'Custom' } }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
]);
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// Configures routes for the application. Supports static, parameterized, redirect, and wildcard
|
|
|
|
|
// routes. Also supports custom route data and resolve.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
const routing = RouterModule.forRoot(routes);
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// Marks the location to load the component of the active route.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <router-outlet></router-outlet>
|
|
|
|
|
// <router-outlet name="aux"></router-outlet>
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-06 11:35:22 +00:00
|
|
|
|
// <a routerLink="/path">
|
|
|
|
|
// <a [routerLink]="[ '/path', routeParam ]">
|
|
|
|
|
// <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
|
|
|
|
|
// <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
|
|
|
|
|
// <a [routerLink]="[ '/path' ]" fragment="anchor">
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// The provided classes are added to the element when the routerLink becomes the current active
|
|
|
|
|
// route.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
// <a [routerLink]="[ '/path' ]" routerLinkActive="active">
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
class CanActivateGuard implements CanActivate {
|
2018-06-25 18:24:34 +00:00
|
|
|
|
canActivate(
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{
|
|
|
|
|
path: ...,
|
|
|
|
|
canActivate: [CanActivateGuard]
|
|
|
|
|
}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
class CanDeactivateGuard implements CanDeactivate<T> {
|
2018-06-25 18:24:34 +00:00
|
|
|
|
canDeactivate(
|
|
|
|
|
component: T,
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{
|
|
|
|
|
path: ...,
|
|
|
|
|
canDeactivate: [CanDeactivateGuard]
|
|
|
|
|
}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
class CanActivateChildGuard implements CanActivateChild {
|
2018-06-25 18:24:34 +00:00
|
|
|
|
canActivateChild(
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{
|
|
|
|
|
path: ...,
|
|
|
|
|
canActivateChild: [CanActivateGuard],
|
|
|
|
|
children: ...
|
|
|
|
|
}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
class ResolveGuard implements Resolve<T> {
|
2018-06-25 18:24:34 +00:00
|
|
|
|
resolve(
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
): Observable<any>|Promise<any>|any { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{
|
|
|
|
|
path: ...,
|
|
|
|
|
resolve: [ResolveGuard]
|
|
|
|
|
}
|
2018-06-06 11:35:22 +00:00
|
|
|
|
|
|
|
|
|
class CanLoadGuard implements CanLoad {
|
2018-06-25 18:24:34 +00:00
|
|
|
|
canLoad(
|
|
|
|
|
route: Route
|
|
|
|
|
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
2018-06-06 11:35:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-06-25 20:08:17 +00:00
|
|
|
|
// 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.
|
2018-06-25 18:24:34 +00:00
|
|
|
|
{
|
|
|
|
|
path: ...,
|
|
|
|
|
canLoad: [CanLoadGuard],
|
|
|
|
|
loadChildren: ...
|
|
|
|
|
}
|