5 |
--------------------------------------------------------------------------------
/Demo-Final/src/app/customers/customer.ts:
--------------------------------------------------------------------------------
1 | export class Customer {
2 |
3 | constructor(
4 | public firstName = '',
5 | public lastName = '',
6 | public email = '',
7 | public sendCatalog = false,
8 | public addressType = 'home',
9 | public street1?: string,
10 | public street2?: string,
11 | public city?: string,
12 | public state = '',
13 | public zip?: string) { }
14 | }
15 |
--------------------------------------------------------------------------------
/Demo-Start/src/app/customers/customer.ts:
--------------------------------------------------------------------------------
1 | export class Customer {
2 |
3 | constructor(
4 | public firstName = '',
5 | public lastName = '',
6 | public email = '',
7 | public sendCatalog = false,
8 | public addressType = 'home',
9 | public street1?: string,
10 | public street2?: string,
11 | public city?: string,
12 | public state = '',
13 | public zip?: string) { }
14 | }
15 |
--------------------------------------------------------------------------------
/APM/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/APM/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.base.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/Demo-Final/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/Demo-Final/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.base.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/Demo-Start/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/Demo-Start/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.base.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/APM/src/app/shared/number.validator.ts:
--------------------------------------------------------------------------------
1 | import { AbstractControl, ValidatorFn } from '@angular/forms';
2 |
3 | export class NumberValidators {
4 |
5 | static range(min: number, max: number): ValidatorFn {
6 | return (c: AbstractControl): { [key: string]: boolean } | null => {
7 | if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
8 | return { range: true };
9 | }
10 | return null;
11 | };
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-edit.guard.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async, inject } from '@angular/core/testing';
2 |
3 | import { ProductEditGuard } from './product-edit.guard';
4 |
5 | describe('ProductEditGuard', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [ProductEditGuard]
9 | });
10 | });
11 |
12 | it('should ...', inject([ProductEditGuard], (guard: ProductEditGuard) => {
13 | expect(guard).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/APM/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { StarComponent } from './star.component';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule
10 | ],
11 | declarations: [
12 | StarComponent
13 | ],
14 | exports: [
15 | StarComponent,
16 | CommonModule,
17 | FormsModule
18 | ]
19 | })
20 | export class SharedModule { }
21 |
--------------------------------------------------------------------------------
/APM/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "downlevelIteration": true,
10 | "experimentalDecorators": true,
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "module": "es2020",
15 | "lib": [
16 | "es2018",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/Demo-Start/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { AppComponent } from './app.component';
6 | import { CustomerComponent } from './customers/customer.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent,
11 | CustomerComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | FormsModule
16 | ],
17 | bootstrap: [AppComponent]
18 | })
19 | export class AppModule { }
20 |
--------------------------------------------------------------------------------
/Demo-Final/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "downlevelIteration": true,
10 | "experimentalDecorators": true,
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "module": "es2020",
15 | "lib": [
16 | "es2018",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/Demo-Start/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "downlevelIteration": true,
10 | "experimentalDecorators": true,
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "module": "es2020",
15 | "lib": [
16 | "es2018",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/Demo-Start/tsconfig.json:
--------------------------------------------------------------------------------
1 | /*
2 | This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
3 | It is not intended to be used to perform a compilation.
4 |
5 | To learn more about this file see: https://angular.io/config/solution-tsconfig.
6 | */
7 | {
8 | "files": [],
9 | "references": [
10 | {
11 | "path": "./tsconfig.app.json"
12 | },
13 | {
14 | "path": "./tsconfig.spec.json"
15 | },
16 | {
17 | "path": "./e2e/tsconfig.json"
18 | }
19 | ]
20 | }
--------------------------------------------------------------------------------
/Demo-Final/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 |
5 | import { AppComponent } from './app.component';
6 | import { CustomerComponent } from './customers/customer.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent,
11 | CustomerComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | ReactiveFormsModule
16 | ],
17 | bootstrap: [AppComponent]
18 | })
19 | export class AppModule { }
20 |
--------------------------------------------------------------------------------
/APM/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'pm-star',
5 | templateUrl: './star.component.html',
6 | styleUrls: ['./star.component.css']
7 | })
8 | export class StarComponent implements OnChanges {
9 | @Input() rating = 0;
10 | starWidth = 0;
11 | @Output() ratingClicked: EventEmitter
6 |
7 |
8 |
9 |
10 |
11 |
12 |
2 |
--------------------------------------------------------------------------------
/Demo-Final/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'Demo'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.debugElement.componentInstance;
22 | expect(app.title).toEqual('Demo');
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/Demo-Start/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'Demo'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.debugElement.componentInstance;
22 | expect(app.title).toEqual('Demo');
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/APM/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/Demo-Final/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/Demo-Start/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/APM/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'Acme Product Management'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.debugElement.componentInstance;
22 | expect(app.pageTitle).toEqual('Acme Product Management');
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/APM/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 |
3 | {{pageTitle}}
4 |
5 |
6 |
24 |
7 |
23 |
8 | 
11 |
12 |
13 |
11 | Developed by:
14 |
15 |
17 |
18 | Deborah Kurata
16 |@deborahkurata
19 |
20 | www.bit.ly/DeborahKsBlog
21 |
22 |
21 |
23 | `,
24 | styleUrls: ['./app.component.css']
25 | })
26 | export class AppComponent {
27 | pageTitle = 'Acme Product Management';
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Deborah Kurata
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/APM/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, './coverage/APM'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/Demo-Final/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, './coverage/Demo'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/Demo-Start/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, './coverage/Demo'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/Demo-Final/readme.md:
--------------------------------------------------------------------------------
1 | # Demo-Final: These are the final files for the Angular Reactive Forms demo form.
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/APM/readme.md:
--------------------------------------------------------------------------------
1 | # APM: These are the files showing an Angular Reactive Form in the context of an application.
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/Demo-Start/readme.md:
--------------------------------------------------------------------------------
1 | # Demo-Start: These are the starter files for the Angular Reactive Forms demo form.
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 |
4 | import { Product } from './product';
5 | import { ProductService } from './product.service';
6 |
7 | @Component({
8 | templateUrl: './product-detail.component.html',
9 | styleUrls: ['./product-detail.component.css']
10 | })
11 | export class ProductDetailComponent implements OnInit {
12 | pageTitle = 'Product Detail';
13 | errorMessage = '';
14 | product: Product | undefined;
15 |
16 | constructor(private route: ActivatedRoute,
17 | private router: Router,
18 | private productService: ProductService) {
19 | }
20 |
21 | ngOnInit(): void {
22 | const param = this.route.snapshot.paramMap.get('id');
23 | if (param) {
24 | const id = +param;
25 | this.getProduct(id);
26 | }
27 | }
28 |
29 | getProduct(id: number): void {
30 | this.productService.getProduct(id).subscribe({
31 | next: product => this.product = product,
32 | error: err => this.errorMessage = err
33 | });
34 | }
35 |
36 | onBack(): void {
37 | this.router.navigate(['/products']);
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/APM/src/app/products/product.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 |
5 | import { SharedModule } from '../shared/shared.module';
6 |
7 | // Imports for loading & configuring the in-memory web api
8 | import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
9 | import { ProductData } from './product-data';
10 |
11 | import { ProductListComponent } from './product-list.component';
12 | import { ProductDetailComponent } from './product-detail.component';
13 | import { ProductEditComponent } from './product-edit.component';
14 | import { ProductEditGuard } from './product-edit.guard';
15 |
16 | @NgModule({
17 | imports: [
18 | SharedModule,
19 | ReactiveFormsModule,
20 | InMemoryWebApiModule.forRoot(ProductData),
21 | RouterModule.forChild([
22 | { path: 'products', component: ProductListComponent },
23 | { path: 'products/:id', component: ProductDetailComponent },
24 | {
25 | path: 'products/:id/edit',
26 | canDeactivate: [ProductEditGuard],
27 | component: ProductEditComponent
28 | }
29 | ])
30 | ],
31 | declarations: [
32 | ProductListComponent,
33 | ProductDetailComponent,
34 | ProductEditComponent
35 | ]
36 | })
37 | export class ProductModule { }
38 |
--------------------------------------------------------------------------------
/Demo-Final/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve -o",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~10.0.3",
15 | "@angular/common": "~10.0.3",
16 | "@angular/compiler": "~10.0.3",
17 | "@angular/core": "~10.0.3",
18 | "@angular/forms": "~10.0.3",
19 | "@angular/platform-browser": "~10.0.3",
20 | "@angular/platform-browser-dynamic": "~10.0.3",
21 | "@angular/router": "~10.0.3",
22 | "bootstrap": "^4.5.0",
23 | "font-awesome": "^4.7.0",
24 | "rxjs": "~6.6.0",
25 | "tslib": "^2.0.0",
26 | "zone.js": "~0.10.3"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.1000.1",
30 | "@angular/cli": "~10.0.1",
31 | "@angular/compiler-cli": "~10.0.3",
32 | "@types/node": "^12.11.1",
33 | "@types/jasmine": "~3.5.0",
34 | "@types/jasminewd2": "~2.0.3",
35 | "codelyzer": "^5.1.2",
36 | "jasmine-core": "~3.5.0",
37 | "jasmine-spec-reporter": "~5.0.0",
38 | "karma": "~5.0.0",
39 | "karma-chrome-launcher": "~3.1.0",
40 | "karma-coverage-istanbul-reporter": "~3.0.2",
41 | "karma-jasmine": "~3.3.0",
42 | "karma-jasmine-html-reporter": "^1.5.0",
43 | "protractor": "~7.0.0",
44 | "ts-node": "~8.3.0",
45 | "tslint": "~6.1.0",
46 | "typescript": "~3.9.6"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/Demo-Start/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve -o",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~10.0.3",
15 | "@angular/common": "~10.0.3",
16 | "@angular/compiler": "~10.0.3",
17 | "@angular/core": "~10.0.3",
18 | "@angular/forms": "~10.0.3",
19 | "@angular/platform-browser": "~10.0.3",
20 | "@angular/platform-browser-dynamic": "~10.0.3",
21 | "@angular/router": "~10.0.3",
22 | "bootstrap": "^4.5.0",
23 | "font-awesome": "^4.7.0",
24 | "rxjs": "~6.6.0",
25 | "tslib": "^2.0.0",
26 | "zone.js": "~0.10.3"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.1000.1",
30 | "@angular/cli": "~10.0.1",
31 | "@angular/compiler-cli": "~10.0.3",
32 | "@types/node": "^12.11.1",
33 | "@types/jasmine": "~3.5.0",
34 | "@types/jasminewd2": "~2.0.3",
35 | "codelyzer": "^5.1.2",
36 | "jasmine-core": "~3.5.0",
37 | "jasmine-spec-reporter": "~5.0.0",
38 | "karma": "~5.0.0",
39 | "karma-chrome-launcher": "~3.1.0",
40 | "karma-coverage-istanbul-reporter": "~3.0.2",
41 | "karma-jasmine": "~3.3.0",
42 | "karma-jasmine-html-reporter": "^1.5.0",
43 | "protractor": "~7.0.0",
44 | "ts-node": "~8.3.0",
45 | "tslint": "~6.1.0",
46 | "typescript": "~3.9.6"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/APM/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "apm",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve -o",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~10.0.3",
15 | "@angular/common": "~10.0.3",
16 | "@angular/compiler": "~10.0.3",
17 | "@angular/core": "~10.0.3",
18 | "@angular/forms": "~10.0.3",
19 | "@angular/platform-browser": "~10.0.3",
20 | "@angular/platform-browser-dynamic": "~10.0.3",
21 | "@angular/router": "~10.0.3",
22 | "bootstrap": "^4.5.0",
23 | "font-awesome": "^4.7.0",
24 | "rxjs": "~6.6.0",
25 | "tslib": "^2.0.0",
26 | "zone.js": "~0.10.3"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.1000.1",
30 | "@angular/cli": "~10.0.1",
31 | "@angular/compiler-cli": "~10.0.3",
32 | "@types/node": "^12.11.1",
33 | "@types/jasmine": "~3.5.0",
34 | "@types/jasminewd2": "~2.0.3",
35 | "angular-in-memory-web-api": "^0.11.0",
36 | "codelyzer": "^5.1.2",
37 | "jasmine-core": "~3.5.0",
38 | "jasmine-spec-reporter": "~5.0.0",
39 | "karma": "~5.0.0",
40 | "karma-chrome-launcher": "~3.1.0",
41 | "karma-coverage-istanbul-reporter": "~3.0.2",
42 | "karma-jasmine": "~3.3.0",
43 | "karma-jasmine-html-reporter": "^1.5.0",
44 | "protractor": "~7.0.0",
45 | "ts-node": "~8.3.0",
46 | "tslint": "~6.1.0",
47 | "typescript": "~3.9.6"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { Product } from './product';
4 | import { ProductService } from './product.service';
5 |
6 | @Component({
7 | templateUrl: './product-list.component.html',
8 | styleUrls: ['./product-list.component.css']
9 | })
10 | export class ProductListComponent implements OnInit {
11 | pageTitle = 'Product List';
12 | imageWidth = 50;
13 | imageMargin = 2;
14 | showImage = false;
15 | errorMessage = '';
16 |
17 | _listFilter = '';
18 | get listFilter(): string {
19 | return this._listFilter;
20 | }
21 | set listFilter(value: string) {
22 | this._listFilter = value;
23 | this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
24 | }
25 |
26 | filteredProducts: Product[] = [];
27 | products: Product[] = [];
28 |
29 | constructor(private productService: ProductService) { }
30 |
31 | performFilter(filterBy: string): Product[] {
32 | filterBy = filterBy.toLocaleLowerCase();
33 | return this.products.filter((product: Product) =>
34 | product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
35 | }
36 |
37 | // Checks both the product name and tags
38 | performFilter2(filterBy: string): Product[] {
39 | filterBy = filterBy.toLocaleLowerCase();
40 | return this.products.filter((product: Product) =>
41 | product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1 ||
42 | (product.tags && product.tags.some(tag => tag.toLocaleLowerCase().indexOf(filterBy) !== -1)));
43 | }
44 |
45 | toggleImage(): void {
46 | this.showImage = !this.showImage;
47 | }
48 |
49 | ngOnInit(): void {
50 | this.productService.getProducts().subscribe({
51 | next: products => {
52 | this.products = products;
53 | this.filteredProducts = this.products;
54 | },
55 | error: err => this.errorMessage = err
56 | });
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-data.ts:
--------------------------------------------------------------------------------
1 | import { InMemoryDbService } from 'angular-in-memory-web-api';
2 |
3 | import { Product } from './product';
4 |
5 | export class ProductData implements InMemoryDbService {
6 |
7 | createDb(): { products: Product[]} {
8 | const products: Product[] = [
9 | {
10 | id: 1,
11 | productName: 'Leaf Rake',
12 | productCode: 'GDN-0011',
13 | releaseDate: 'March 19, 2018',
14 | description: 'Leaf rake with 48-inch wooden handle',
15 | price: 19.95,
16 | starRating: 3.2,
17 | imageUrl: 'assets/images/leaf_rake.png',
18 | tags: ['rake', 'leaf', 'yard', 'home']
19 | },
20 | {
21 | id: 2,
22 | productName: 'Garden Cart',
23 | productCode: 'GDN-0023',
24 | releaseDate: 'March 18, 2018',
25 | description: '15 gallon capacity rolling garden cart',
26 | price: 32.99,
27 | starRating: 4.2,
28 | imageUrl: 'assets/images/garden_cart.png'
29 | },
30 | {
31 | id: 5,
32 | productName: 'Hammer',
33 | productCode: 'TBX-0048',
34 | releaseDate: 'May 21, 2018',
35 | description: 'Curved claw steel hammer',
36 | price: 8.9,
37 | starRating: 4.8,
38 | imageUrl: 'assets/images/hammer.png',
39 | tags: ['tools', 'hammer', 'construction']
40 | },
41 | {
42 | id: 8,
43 | productName: 'Saw',
44 | productCode: 'TBX-0022',
45 | releaseDate: 'May 15, 2018',
46 | description: '15-inch steel blade hand saw',
47 | price: 11.55,
48 | starRating: 3.7,
49 | imageUrl: 'assets/images/saw.png'
50 | },
51 | {
52 | id: 10,
53 | productName: 'Video Game Controller',
54 | productCode: 'GMG-0042',
55 | releaseDate: 'October 15, 2018',
56 | description: 'Standard two-button video game controller',
57 | price: 35.95,
58 | starRating: 4.6,
59 | imageUrl: 'assets/images/xbox-controller.png'
60 | }
61 | ];
62 | return { products };
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
74 |
75 |
3 | {{pageTitle}}
4 |
5 |
6 |
7 |
73 |
8 |
14 | Filter by:
9 |
10 |
12 |
13 |
16 |
20 |
21 |
17 |
19 | Filtered by: {{listFilter}}
18 |
22 |
24 |
25 |
70 |
71 |
72 | | 27 | 31 | | 32 |Product | 33 |Code | 34 |Available | 35 |Price | 36 |5 Star Rating | 37 |38 | |
|---|---|---|---|---|---|---|
|
43 | |
49 | 50 | 51 | {{ product.productName }} 52 | 53 | | 54 |{{ product.productCode }} | 55 |{{ product.releaseDate }} | 56 |{{ product.price | currency:"USD":"symbol":"1.2-2" }} | 57 |
58 | |
61 | 62 | 66 | | 67 |
77 | Error: {{ errorMessage }}
78 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-detail.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/APM/src/app/shared/generic-validator.ts:
--------------------------------------------------------------------------------
1 | import { FormGroup } from '@angular/forms';
2 |
3 | // Generic validator for Reactive forms
4 | // Implemented as a class, not a service, so it can retain state for multiple forms.
5 | // NOTE: This validator does NOT support validation of controls or groups within a FormArray.
6 | export class GenericValidator {
7 |
8 | // Provide the set of valid validation messages
9 | // Stucture:
10 | // controlName1: {
11 | // validationRuleName1: 'Validation Message.',
12 | // validationRuleName2: 'Validation Message.'
13 | // },
14 | // controlName2: {
15 | // validationRuleName1: 'Validation Message.',
16 | // validationRuleName2: 'Validation Message.'
17 | // }
18 | constructor(private validationMessages: { [key: string]: { [key: string]: string } }) {
19 |
20 | }
21 |
22 | // Processes each control within a FormGroup
23 | // And returns a set of validation messages to display
24 | // Structure
25 | // controlName1: 'Validation Message.',
26 | // controlName2: 'Validation Message.'
27 | processMessages(container: FormGroup): { [key: string]: string } {
28 | const messages = {};
29 | for (const controlKey in container.controls) {
30 | if (container.controls.hasOwnProperty(controlKey)) {
31 | const c = container.controls[controlKey];
32 | // If it is a FormGroup, process its child controls.
33 | if (c instanceof FormGroup) {
34 | const childMessages = this.processMessages(c);
35 | Object.assign(messages, childMessages);
36 | } else {
37 | // Only validate if there are validation messages for the control
38 | if (this.validationMessages[controlKey]) {
39 | messages[controlKey] = '';
40 | if ((c.dirty || c.touched) && c.errors) {
41 | Object.keys(c.errors).map(messageKey => {
42 | if (this.validationMessages[controlKey][messageKey]) {
43 | messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
44 | }
45 | });
46 | }
47 | }
48 | }
49 | }
50 | }
51 | return messages;
52 | }
53 |
54 | getErrorCount(container: FormGroup): number {
55 | let errorCount = 0;
56 | for (const controlKey in container.controls) {
57 | if (container.controls.hasOwnProperty(controlKey)) {
58 | if (container.controls[controlKey].errors) {
59 | errorCount += Object.keys(container.controls[controlKey].errors).length;
60 | console.log(errorCount);
61 | }
62 | }
63 | }
64 | return errorCount;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | #Changes made to the course since its release:
2 | - July 9, 2020 - Reviewed the code in the course for any changes required for v10. No code changes required.
3 |
4 | - February 2, 2020 - Reviewed the code in the course for any changes required for v9. No code changes required.
5 |
6 | - September 5, 2019 - Updated the course files from Angular v7 to Angular v8. For details on the list of course changes, see: https://docs.google.com/document/d/1HzZdEhbOC-1OVNym2ZIwLahuBi-YUo4ZqV_f2w-eig0/edit?usp=sharing The primary changes were in the `Create, Read, Update, and Delete (CRUD) Using HTTP` module and involve changes to the subscribe method.
7 |
8 | - November 6, 2018 - Updated the course from Angular v2 to Angular v7 including an update to the Angular CLI, Bootstrap 4, and FontAwesome. For details on the list of course changes, see: https://blogs.msmvps.com/deborahk/angular-reactive-forms-course-update-for-v7/
9 |
10 | #Changes made to the project files since its release:
11 | - July 9, 2020 - Updated the code to Angular v10, which modified the packages. Minor changes such as adding function return types.
12 |
13 | - February 2, 2020 - Updated the code to Angular v9, which only modified the packages not any of the course code.
14 |
15 | - September 5, 2019 - Updated the course files from Angular v7 to Angular v8. Also moved the images to a local folder so the course no longer depends on a third-party web site for the images.
16 |
17 | - November 6, 2018 - Updated the course files from Angular v2 to Angular v7 including an update to the Angular CLI, Bootstrap 4, and FontAwesome.
18 | - November 6, 2018 - Removed the xxx-Updated files as the code is currently up to date.
19 |
20 | - July 27, 2018 - APM-Updated were modified to Angular v6, RxJS v6, Bootrap v4, and FontAwesome. The changes include moving the code from systemjs to the Angular CLI and all of the new style classes for Bootrap 4.
21 | - July 27, 2018 - Demo-Start-Updated and Demo-Final-Updated were modified to Angular v6 and Bootrap v4. The changes include moving the code from systemjs to the Angular CLI and all of the new style classes for Bootrap 4.
22 |
23 | - March 24, 2017 - APM-Updated was added. This is an update to the sample application for Angular version 4. The changes include modifications to the boilerplate files and the addition of an src folder to make these files compatible with the current version of the Angular Quick Start files.
24 | - March 24, 2017 - Demo-Start-Updated and Demo-Final-Updated were added. These are an update to the demo application for Angular version 4. The changes include modifications to the boilerplate files and the addition of an src folder to make these files compatible with the current version of the Angular Quick Start files.
25 |
--------------------------------------------------------------------------------
/APM/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/Demo-Final/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/Demo-Start/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/APM/src/app/products/product.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
3 |
4 | import { Observable, of, throwError } from 'rxjs';
5 | import { catchError, tap, map } from 'rxjs/operators';
6 |
7 | import { Product } from './product';
8 |
9 | @Injectable({
10 | providedIn: 'root'
11 | })
12 | export class ProductService {
13 | private productsUrl = 'api/products';
14 |
15 | constructor(private http: HttpClient) { }
16 |
17 | getProducts(): Observable
4 | {{pageTitle + ": " + product.productName}}
5 |
6 |
7 |
9 |
10 |
72 |
73 |
11 |
12 |
55 |
56 |
13 |
45 |
46 |
14 |
17 | Name:
15 | {{product.productName}}
16 |
18 |
21 | Code:
19 | {{product.productCode}}
20 |
22 |
25 | Description:
23 | {{product.description}}
24 |
26 |
29 | Availability:
27 | {{product.releaseDate}}
28 |
30 |
33 | Price:
31 | {{product.price|currency:"USD":"symbol"}}
32 |
34 |
40 | 5 Star Rating:
35 |
36 |
37 |
38 |
39 |
41 |
44 | Tags:
42 | {{product.tags}}
43 |
48 | ![]()
53 |
54 |
57 |
70 |
71 |
58 |
63 |
68 |
69 | {{errorMessage}}
75 |
76 |
2 |
--------------------------------------------------------------------------------
/APM/src/app/products/product-edit.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, AfterViewInit, OnDestroy, ViewChildren, ElementRef } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, FormArray, Validators, FormControlName } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Observable, Subscription, fromEvent, merge } from 'rxjs';
6 | import { debounceTime } from 'rxjs/operators';
7 |
8 | import { Product } from './product';
9 | import { ProductService } from './product.service';
10 |
11 | import { NumberValidators } from '../shared/number.validator';
12 | import { GenericValidator } from '../shared/generic-validator';
13 |
14 | @Component({
15 | templateUrl: './product-edit.component.html'
16 | })
17 | export class ProductEditComponent implements OnInit, AfterViewInit, OnDestroy {
18 | @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];
19 |
20 | pageTitle = 'Product Edit';
21 | errorMessage: string;
22 | productForm: FormGroup;
23 |
24 | product: Product;
25 | private sub: Subscription;
26 |
27 | // Use with the generic validation message class
28 | displayMessage: { [key: string]: string } = {};
29 | private validationMessages: { [key: string]: { [key: string]: string } };
30 | private genericValidator: GenericValidator;
31 |
32 | get tags(): FormArray {
33 | return this.productForm.get('tags') as FormArray;
34 | }
35 |
36 | constructor(private fb: FormBuilder,
37 | private route: ActivatedRoute,
38 | private router: Router,
39 | private productService: ProductService) {
40 |
41 | // Defines all of the validation messages for the form.
42 | // These could instead be retrieved from a file or database.
43 | this.validationMessages = {
44 | productName: {
45 | required: 'Product name is required.',
46 | minlength: 'Product name must be at least three characters.',
47 | maxlength: 'Product name cannot exceed 50 characters.'
48 | },
49 | productCode: {
50 | required: 'Product code is required.'
51 | },
52 | starRating: {
53 | range: 'Rate the product between 1 (lowest) and 5 (highest).'
54 | }
55 | };
56 |
57 | // Define an instance of the validator for use with this form,
58 | // passing in this form's set of validation messages.
59 | this.genericValidator = new GenericValidator(this.validationMessages);
60 | }
61 |
62 | ngOnInit(): void {
63 | this.productForm = this.fb.group({
64 | productName: ['', [Validators.required,
65 | Validators.minLength(3),
66 | Validators.maxLength(50)]],
67 | productCode: ['', Validators.required],
68 | starRating: ['', NumberValidators.range(1, 5)],
69 | tags: this.fb.array([]),
70 | description: ''
71 | });
72 |
73 | // Read the product Id from the route parameter
74 | this.sub = this.route.paramMap.subscribe(
75 | params => {
76 | const id = +params.get('id');
77 | this.getProduct(id);
78 | }
79 | );
80 | }
81 |
82 | ngOnDestroy(): void {
83 | this.sub.unsubscribe();
84 | }
85 |
86 | ngAfterViewInit(): void {
87 | // Watch for the blur event from any input element on the form.
88 | // This is required because the valueChanges does not provide notification on blur
89 | const controlBlurs: Observable
3 | {{pageTitle}}
4 |
5 |
6 |
7 |
134 |
135 |
136 | {{errorMessage}}
138 |
139 |
2 |
218 |
3 | Sign Up!
4 |
5 |
6 |
7 |
216 |
217 | Dirty: {{ signupForm.dirty }} 219 |
Touched: {{ signupForm.touched }} 220 |
Valid: {{ signupForm.valid }} 221 |
Value: {{ signupForm.value | json }} -------------------------------------------------------------------------------- /Demo-Final/src/app/customers/customer.component.html: -------------------------------------------------------------------------------- 1 |
2 |
313 |
3 | Sign Up!
4 |
5 |
6 |
7 |
311 |
312 | Dirty: {{ customerForm.dirty }} 314 |
Touched: {{ customerForm.touched }} 315 |
Valid: {{ customerForm.valid }} 316 |
Value: {{ customerForm.value | json }} 317 |
Street: {{ addresses.get('0.street1')?.value }} 318 |
--------------------------------------------------------------------------------