├── .gitignore
├── APM-Final v14
    ├── .browserslistrc
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   ├── extensions.json
    │   ├── launch.json
    │   ├── settings.json
    │   └── tasks.json
    ├── README.md
    ├── angular.json
    ├── karma.conf.js
    ├── package.json
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-parameter.service.spec.ts
    │   │   │   ├── product-parameter.service.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── criteria
    │   │   │   │   ├── criteria.component.css
    │   │   │   │   ├── criteria.component.html
    │   │   │   │   ├── criteria.component.spec.ts
    │   │   │   │   └── criteria.component.ts
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   ├── garden_cart.png
    │   │   │   ├── hammer.png
    │   │   │   ├── leaf_rake.png
    │   │   │   ├── logo.jpg
    │   │   │   ├── saw.png
    │   │   │   └── xbox-controller.png
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   └── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    └── tsconfig.spec.json
├── APM-Final v8
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   └── settings.json
    ├── README.md
    ├── angular.json
    ├── browserslist
    ├── e2e
    │   ├── protractor.conf.js
    │   ├── src
    │   │   ├── app.e2e-spec.ts
    │   │   └── app.po.ts
    │   └── tsconfig.json
    ├── karma.conf.js
    ├── package.json
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-parameter.service.spec.ts
    │   │   │   ├── product-parameter.service.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── criteria
    │   │   │   │   ├── criteria.component.css
    │   │   │   │   ├── criteria.component.html
    │   │   │   │   ├── criteria.component.spec.ts
    │   │   │   │   └── criteria.component.ts
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   ├── garden_cart.png
    │   │   │   ├── hammer.png
    │   │   │   ├── leaf_rake.png
    │   │   │   ├── logo.jpg
    │   │   │   ├── saw.png
    │   │   │   └── xbox-controller.png
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   └── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.spec.json
    └── tslint.json
├── APM-Final
    ├── .angular-cli.json
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   └── settings.json
    ├── README.md
    ├── e2e
    │   ├── app.e2e-spec.ts
    │   ├── app.po.ts
    │   └── tsconfig.e2e.json
    ├── karma.conf.js
    ├── package.json
    ├── protractor.conf.js
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-parameter.service.spec.ts
    │   │   │   ├── product-parameter.service.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── criteria
    │   │   │   │   ├── criteria.component.css
    │   │   │   │   ├── criteria.component.html
    │   │   │   │   ├── criteria.component.spec.ts
    │   │   │   │   └── criteria.component.ts
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   └── logo.jpg
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   ├── test.ts
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   └── typings.d.ts
    ├── tsconfig.json
    └── tslint.json
├── APM-FinalWithGetters
    ├── .angular-cli.json
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   └── settings.json
    ├── README.md
    ├── e2e
    │   ├── app.e2e-spec.ts
    │   ├── app.po.ts
    │   └── tsconfig.e2e.json
    ├── karma.conf.js
    ├── package.json
    ├── protractor.conf.js
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-parameter.service.spec.ts
    │   │   │   ├── product-parameter.service.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── criteria
    │   │   │   │   ├── criteria.component.css
    │   │   │   │   ├── criteria.component.html
    │   │   │   │   ├── criteria.component.spec.ts
    │   │   │   │   └── criteria.component.ts
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   └── logo.jpg
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   ├── test.ts
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   └── typings.d.ts
    ├── tsconfig.json
    └── tslint.json
├── APM-Start v14
    ├── .browserslistrc
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   ├── extensions.json
    │   ├── launch.json
    │   ├── settings.json
    │   └── tasks.json
    ├── README.md
    ├── angular.json
    ├── karma.conf.js
    ├── package.json
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   ├── garden_cart.png
    │   │   │   ├── hammer.png
    │   │   │   ├── leaf_rake.png
    │   │   │   ├── logo.jpg
    │   │   │   ├── saw.png
    │   │   │   └── xbox-controller.png
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   └── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    └── tsconfig.spec.json
├── APM-Start
    ├── .angular-cli.json
    ├── .editorconfig
    ├── .gitignore
    ├── .vscode
    │   └── settings.json
    ├── README.md
    ├── e2e
    │   ├── app.e2e-spec.ts
    │   ├── app.po.ts
    │   └── tsconfig.e2e.json
    ├── karma.conf.js
    ├── package.json
    ├── protractor.conf.js
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.css
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── home
    │   │   │   ├── menu.component.html
    │   │   │   ├── menu.component.ts
    │   │   │   ├── page-not-found.component.ts
    │   │   │   ├── shell.component.css
    │   │   │   ├── shell.component.html
    │   │   │   ├── shell.component.ts
    │   │   │   ├── welcome.component.html
    │   │   │   └── welcome.component.ts
    │   │   ├── products
    │   │   │   ├── edit
    │   │   │   │   ├── product-edit-guard.service.ts
    │   │   │   │   ├── product-edit.component.css
    │   │   │   │   ├── product-edit.component.html
    │   │   │   │   └── product-edit.component.ts
    │   │   │   ├── product-data.ts
    │   │   │   ├── product-detail.component.css
    │   │   │   ├── product-detail.component.html
    │   │   │   ├── product-detail.component.ts
    │   │   │   ├── product-list.component.css
    │   │   │   ├── product-list.component.html
    │   │   │   ├── product-list.component.ts
    │   │   │   ├── product-shell
    │   │   │   │   ├── product-shell-detail.component.html
    │   │   │   │   ├── product-shell-detail.component.ts
    │   │   │   │   ├── product-shell-list.component.html
    │   │   │   │   ├── product-shell-list.component.ts
    │   │   │   │   ├── product-shell.component.html
    │   │   │   │   └── product-shell.component.ts
    │   │   │   ├── product.module.ts
    │   │   │   ├── product.service.ts
    │   │   │   └── product.ts
    │   │   ├── shared
    │   │   │   ├── shared.module.ts
    │   │   │   ├── star.component.css
    │   │   │   ├── star.component.html
    │   │   │   └── star.component.ts
    │   │   └── user
    │   │   │   ├── auth-guard.service.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── login.component.css
    │   │   │   ├── login.component.html
    │   │   │   ├── login.component.ts
    │   │   │   ├── user.module.ts
    │   │   │   └── user.ts
    │   ├── assets
    │   │   ├── .gitkeep
    │   │   └── images
    │   │   │   └── logo.jpg
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   ├── test.ts
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   └── typings.d.ts
    ├── tsconfig.json
    └── tslint.json
├── CHANGELOG.md
├── COURSENOTES-v14.md
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | typings
 2 | **/app/**/*.js
 3 | **/app/**/*.map
 4 | **/*.log
 5 | **/*.log/*
 6 | node_modules
 7 | jspm_packages
 8 | bower_components
 9 | 
10 | .vs
11 | **/*.sou
12 | **/*.user
13 | bin
14 | obj
15 | packages
16 | 


--------------------------------------------------------------------------------
/APM-Final v14/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | 


--------------------------------------------------------------------------------
/APM-Final v14/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/APM-Final v14/.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 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/APM-Final v14/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/APM-Final v14/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "pwa-chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-Final v14/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |   "files.autoSave": "afterDelay",
4 |   "html.format.wrapAttributes": "force-aligned"
5 | }


--------------------------------------------------------------------------------
/APM-Final v14/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/APM-Final v14/README.md:
--------------------------------------------------------------------------------
 1 | # Apm
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.4.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application 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.
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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     RouterModule.forRoot([
13 |       {
14 |         path: '',
15 |         component: ShellComponent,
16 |         children: [
17 |           { path: 'welcome', component: WelcomeComponent },
18 |           {
19 |             path: 'products',
20 |             // canActivate: [AuthGuard],
21 |             loadChildren: () =>
22 |               import('./products/product.module').then(m => m.ProductModule)
23 |           },
24 |           { path: '', redirectTo: 'welcome', pathMatch: 'full' },
25 |         ]
26 |       },
27 |       { path: '**', component: PageNotFoundComponent }
28 |     ]) // , { enableTracing: true })
29 |   ],
30 |   exports: [RouterModule]
31 | })
32 | export class AppRoutingModule { }
33 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-Final v14/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'pm-root',
5 |   templateUrl: './app.component.html',
6 |   styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | 
 5 | // Imports for loading & configuring the in-memory web api
 6 | import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 7 | import { ProductData } from './products/product-data';
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { ShellComponent } from './home/shell.component';
13 | import { MenuComponent } from './home/menu.component';
14 | import { WelcomeComponent } from './home/welcome.component';
15 | import { PageNotFoundComponent } from './home/page-not-found.component';
16 | 
17 | /* Feature Modules */
18 | import { UserModule } from './user/user.module';
19 | 
20 | @NgModule({
21 |   imports: [
22 |     BrowserModule,
23 |     HttpClientModule,
24 |     HttpClientInMemoryWebApiModule.forRoot(ProductData),
25 |     UserModule,
26 |     AppRoutingModule
27 |   ],
28 |   declarations: [
29 |     AppComponent,
30 |     ShellComponent,
31 |     MenuComponent,
32 |     WelcomeComponent,
33 |     PageNotFoundComponent
34 |   ],
35 |   bootstrap: [AppComponent]
36 | })
37 | export class AppModule { }
38 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="card">
 2 |   <div class="card-header">
 3 |     {{pageTitle}}
 4 |   </div>
 5 |   <div class="card-body">
 6 |     <div class="container-fluid">
 7 |       <div class="text-center">
 8 |         <img src="./assets/images/logo.jpg"
 9 |              class="img-responsive center-block"
10 |              style="max-height:300px;padding-bottom:50px" />
11 |       </div>
12 | 
13 |       <div class="text-center">Developed by:</div>
14 |       <div class="text-center">
15 |         <h3>Deborah Kurata</h3>
16 |       </div>
17 | 
18 |       <div class="text-center">@deborahkurata</div>
19 |     </div>
20 |   </div>
21 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable({
 7 |     providedIn: 'root'
 8 | })
 9 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
10 | 
11 |     canDeactivate(component: ProductEditComponent): boolean {
12 |         if (component.isDirty) {
13 |             const productName = component.product?.productName || 'New Product';
14 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
15 |         }
16 |         return true;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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 |   product?: IProduct;
14 |   errorMessage = '';
15 | 
16 |   constructor(private productService: ProductService,
17 |     private router: Router,
18 |     private route: ActivatedRoute) {
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) {
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 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-parameter.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { ProductParameterService } from './product-parameter.service';
 4 | 
 5 | describe('ProductParameterService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [ProductParameterService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([ProductParameterService], (service: ProductParameterService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-parameter.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class ProductParameterService {
 7 |   showImage = false;
 8 |   filterBy = '';
 9 | 
10 |   constructor() { }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | import { Subscription } from 'rxjs';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-product-shell-detail',
 8 |   templateUrl: './product-shell-detail.component.html'
 9 | })
10 | export class ProductShellDetailComponent implements OnInit, OnDestroy {
11 |   pageTitle = 'Product Detail';
12 |   // Need to handle null to allow for no selected product.
13 |   product: IProduct | null = null;  
14 |   errorMessage = '';
15 | 
16 |   sub?: Subscription;
17 | 
18 |   constructor(private productService: ProductService) { }
19 | 
20 |   ngOnInit() {
21 |     this.sub = this.productService.selectedProductChanges$.subscribe(
22 |       selectedProduct => this.product = selectedProduct
23 |     );
24 |   }
25 | 
26 |   ngOnDestroy(): void {
27 |     if (this.sub) {
28 |       this.sub.unsubscribe();
29 |     }
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='card'>
 2 |   <div class='card-header'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='card-body'
 7 |        *ngIf='products'>
 8 |     <div class='list-group'>
 9 |       <button type='button'
10 |               class='list-group-item'
11 |               *ngFor='let product of products'
12 |               [ngClass]="{'active': product?.id === selectedProduct?.id}"
13 |               (click)='onSelected(product)'>
14 |         {{ product.productName }} ({{ product.productCode }})
15 |       </button>
16 |     </div>
17 |   </div>
18 | </div>
19 | 
20 | <div class='alert alert-danger'
21 |      *ngIf='errorMessage'>
22 |   Error: {{ errorMessage }}
23 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'
 2 |      *ngIf='monthCount'>
 3 |   <div class='col-md-4 mt-1'>
 4 |     Number of months on the market: {{ monthCount }}
 5 |   </div>
 6 | </div>
 7 | <div class='row'>
 8 |   <div class='col-md-4'>
 9 |     <pm-product-shell-list></pm-product-shell-list>
10 |   </div>
11 |   <div class='col-md-8'>
12 |     <pm-product-shell-detail></pm-product-shell-detail>
13 |   </div>
14 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { Subscription } from 'rxjs';
 4 | 
 5 | @Component({
 6 |   templateUrl: './product-shell.component.html'
 7 | })
 8 | export class ProductShellComponent implements OnInit, OnDestroy {
 9 |   pageTitle = 'Products';
10 |   monthCount = 0;
11 |   sub?: Subscription;
12 | 
13 |   constructor(private productService: ProductService) { }
14 | 
15 |   ngOnInit() {
16 |     this.sub = this.productService.selectedProductChanges$.subscribe(
17 |       selectedProduct => {
18 |         if (selectedProduct) {
19 |           const start = new Date(selectedProduct.releaseDate);
20 |           const now = new Date();
21 |           this.monthCount = now.getMonth() - start.getMonth()
22 |             + (12 * (now.getFullYear() - start.getFullYear()));
23 |         } else {
24 |           this.monthCount = 0;
25 |         }
26 |       });
27 |   }
28 | 
29 |   ngOnDestroy(): void {
30 |     if (this.sub) {
31 |       this.sub.unsubscribe();
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |   id: number | null;
 4 |   productName: string;
 5 |   productCode: string;
 6 |   category: string;
 7 |   tags?: string[];
 8 |   releaseDate: string;
 9 |   price: number;
10 |   description: string;
11 |   starRating: number;
12 |   imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/criteria/criteria.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/app/shared/criteria/criteria.component.css


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/criteria/criteria.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'>
 2 |   <div class='col-md-2'>Filter by:</div>
 3 |   <div class='col-md-4'>
 4 |     <input type='text'
 5 |            #filterElement
 6 |            [(ngModel)]='listFilter' />
 7 |   </div>
 8 | </div>
 9 | <div class='row'
10 |      *ngIf='displayDetail'>
11 |   <div class='col-md-10'>
12 |     <h3>Filtered by: {{listFilter}}
13 |       {{hitMessage}}
14 |     </h3>
15 |   </div>
16 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/criteria/criteria.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CriteriaComponent } from './criteria.component';
 4 | 
 5 | describe('CriteriaComponent', () => {
 6 |   let component: CriteriaComponent;
 7 |   let fixture: ComponentFixture<CriteriaComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [CriteriaComponent]
12 |     })
13 |       .compileComponents();
14 | 
15 |       fixture = TestBed.createComponent(CriteriaComponent);
16 |       component = fixture.componentInstance;
17 |       fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/APM-Final v14/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 | import { CriteriaComponent } from './criteria/criteria.component';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     CommonModule,
11 |     FormsModule
12 |   ],
13 |   declarations: [
14 |     StarComponent,
15 |     CriteriaComponent
16 |   ],
17 |   exports: [
18 |     StarComponent,
19 |     CriteriaComponent,
20 |     CommonModule,
21 |     FormsModule
22 |   ]
23 | })
24 | export class SharedModule { }
25 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
 1 | <div class="crop"
 2 |      [style.width.px]="cropWidth"
 3 |      [title]="rating">
 4 |   <div style="width: 75px">
 5 |     <span class="fa fa-star"></span>
 6 |     <span class="fa fa-star"></span>
 7 |     <span class="fa fa-star"></span>
 8 |     <span class="fa fa-star"></span>
 9 |     <span class="fa fa-star"></span>
10 |   </div>
11 | </div>


--------------------------------------------------------------------------------
/APM-Final v14/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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 |   cropWidth = 75;
11 | 
12 |   ngOnChanges(): void {
13 |     this.cropWidth = this.rating * 75 / 5;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanActivate } from '@angular/router';
 3 | 
 4 | import { AuthService } from './auth.service';
 5 | 
 6 | @Injectable({
 7 |     providedIn: 'root'
 8 | })
 9 | export class AuthGuard implements CanActivate {
10 | 
11 |   constructor(private authService: AuthService,
12 |               private router: Router) { }
13 | 
14 |   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
15 |     return this.checkLoggedIn(state.url);
16 |   }
17 | 
18 |   checkLoggedIn(url: string): boolean {
19 |     if (this.authService.isLoggedIn()) {
20 |       return true;
21 |     }
22 | 
23 |     // Retain the attempted URL for redirection
24 |     this.authService.redirectUrl = url;
25 |     this.router.navigate(['/login']);
26 |     return false;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class AuthService {
 9 |   currentUser: IUser | null = null;
10 |   redirectUrl = '';
11 | 
12 |   constructor() { }
13 | 
14 |   isLoggedIn(): boolean {
15 |     return !!this.currentUser;
16 |   }
17 | 
18 |   login(userName: string, password: string): void {
19 |     // Code here would log into a back end service
20 |     // and return user information
21 |     // This is just hard-coded here.
22 |     this.currentUser = {
23 |       id: 2,
24 |       userName: userName,
25 |       isAdmin: false
26 |     };
27 |   }
28 | 
29 |   logout(): void {
30 |     this.currentUser = null;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.card {
2 |     width: 700px;
3 | }


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NgForm } from '@angular/forms';
 3 | import { Router } from '@angular/router';
 4 | 
 5 | import { AuthService } from './auth.service';
 6 | 
 7 | @Component({
 8 |     templateUrl: './login.component.html',
 9 |     styleUrls: ['./login.component.css']
10 | })
11 | export class LoginComponent {
12 |     errorMessage = '';
13 |     pageTitle = 'Log In';
14 | 
15 |     constructor(private authService: AuthService,
16 |                 private router: Router) {
17 |     }
18 | 
19 |     cancel(): void {
20 |         this.router.navigate(['welcome']);
21 |     }
22 | 
23 |     login(loginForm: NgForm): void {
24 |         if (loginForm && loginForm.valid) {
25 |             const userName = loginForm.form.value.userName;
26 |             const password = loginForm.form.value.password;
27 |             this.authService.login(userName, password);
28 | 
29 |             if (this.authService.redirectUrl) {
30 |                 this.router.navigateByUrl(this.authService.redirectUrl);
31 |             } else {
32 |                 this.router.navigate(['/products']);
33 |             }
34 |         } else {
35 |             this.errorMessage = 'Please enter a user name and password.';
36 |         }
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | 
 6 | import { SharedModule } from '../shared/shared.module';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     SharedModule,
11 |     RouterModule.forChild([
12 |       { path: 'login', component: LoginComponent }
13 |     ])
14 |   ],
15 |   declarations: [
16 |     LoginComponent
17 |   ]
18 | })
19 | export class UserModule { }
20 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/garden_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/garden_cart.png


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/hammer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/hammer.png


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/leaf_rake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/leaf_rake.png


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/saw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/saw.png


--------------------------------------------------------------------------------
/APM-Final v14/src/assets/images/xbox-controller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/assets/images/xbox-controller.png


--------------------------------------------------------------------------------
/APM-Final v14/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/APM-Final v14/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v14/src/favicon.ico


--------------------------------------------------------------------------------
/APM-Final v14/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>APM</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <pm-root></pm-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/APM-Final v14/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-Final v14/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | @import "~bootstrap/dist/css/bootstrap.min.css";
 3 | @import "~font-awesome/css/font-awesome.min.css";
 4 | 
 5 | div.card {
 6 |   margin-top: 10px
 7 | }
 8 | 
 9 | div.card-header {
10 |   font-size: large;
11 |   background-color: #337AB7;
12 |   color: white;
13 | }
14 | 
15 | .table {
16 |   margin-top: 10px
17 | }
18 | 
19 | a {
20 |   text-decoration: none;
21 | }


--------------------------------------------------------------------------------
/APM-Final v14/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/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 |     <T>(id: string): T;
13 |     keys(): string[];
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting(),
21 | );
22 | 
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().forEach(context);
27 | 


--------------------------------------------------------------------------------
/APM-Final v14/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Final v14/tsconfig.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 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitOverride": true,
10 |     "noPropertyAccessFromIndexSignature": true,
11 |     "noImplicitReturns": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "sourceMap": true,
14 |     "declaration": false,
15 |     "downlevelIteration": true,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "es2020",
20 |     "module": "es2020",
21 |     "lib": [
22 |       "es2020",
23 |       "dom"
24 |     ]
25 |   },
26 |   "angularCompilerOptions": {
27 |     "enableI18nLegacyMessageIdFormat": false,
28 |     "strictInjectionParameters": true,
29 |     "strictInputAccessModifiers": true,
30 |     "strictTemplates": true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Final v14/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.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-Final v8/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/APM-Final v8/.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-Final v8/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |     "files.autoSave": "afterDelay",
4 |     "html.format.wrapAttributes": "force-aligned"
5 | }


--------------------------------------------------------------------------------
/APM-Final v8/README.md:
--------------------------------------------------------------------------------
 1 | # APM
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.5.
 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-Final v8/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/APM-Final v8/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     'browserName': 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/APM-Final v8/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('APM app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/APM-Final v8/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('pm-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/APM-Final v8/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/APM-Final v8/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 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |     imports: [
12 |         RouterModule.forRoot([
13 |             {
14 |                 path: '',
15 |                 component: ShellComponent,
16 |                 children: [
17 |                     { path: 'welcome', component: WelcomeComponent },
18 |                     {
19 |                         path: 'products',
20 |                         // canActivate: [AuthGuard],
21 |                         loadChildren: () => import('./products/product.module').then(m => m.ProductModule)
22 |                     },
23 |                     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
24 |                 ]
25 |             },
26 |             { path: '**', component: PageNotFoundComponent }
27 |         ]) // , { enableTracing: true })
28 |     ],
29 |     exports: [RouterModule]
30 | })
31 | export class AppRoutingModule { }
32 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-Final v8/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     selector: 'pm-root',
5 |     templateUrl: './app.component.html',
6 |     styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container main-content'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="card">
 2 |   <div class="card-header">
 3 |     {{pageTitle}}
 4 |   </div>
 5 |   <div class="card-body">
 6 |     <div class="container-fluid">
 7 |       <div class="text-center">
 8 |         <img src="./assets/images/logo.jpg"
 9 |              class="img-responsive center-block"
10 |              style="max-height:300px;padding-bottom:50px" />
11 |       </div>
12 | 
13 |       <div class="text-center">Developed by:</div>
14 |       <div class="text-center">
15 |         <h3>Deborah Kurata</h3>
16 |       </div>
17 | 
18 |       <div class="text-center">@deborahkurata</div>
19 |       <div class="text-center">
20 |         <a href="http://www.bit.ly/DeborahKsBlog">www.bit.ly/DeborahKsBlog</a>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </div>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable({
 7 |     providedIn: 'root'
 8 | })
 9 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
10 | 
11 |     canDeactivate(component: ProductEditComponent): boolean {
12 |         if (component.isDirty) {
13 |             const productName = component.product.productName || 'New Product';
14 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
15 |         }
16 |         return true;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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 |     product: IProduct;
14 |     errorMessage: string;
15 | 
16 |     constructor(private productService: ProductService,
17 |                 private router: Router,
18 |                 private route: ActivatedRoute) {
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) {
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 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-parameter.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { ProductParameterService } from './product-parameter.service';
 4 | 
 5 | describe('ProductParameterService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [ProductParameterService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([ProductParameterService], (service: ProductParameterService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-parameter.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class ProductParameterService {
 7 |   showImage: boolean;
 8 |   filterBy: string;
 9 | 
10 |   constructor() { }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | import { Subscription } from 'rxjs';
 5 | 
 6 | @Component({
 7 |     selector: 'pm-product-shell-detail',
 8 |     templateUrl: './product-shell-detail.component.html'
 9 | })
10 | export class ProductShellDetailComponent implements OnInit, OnDestroy {
11 |     pageTitle = 'Product Detail';
12 | 
13 |     product: IProduct | null;
14 |     sub: Subscription;
15 | 
16 |     constructor(private productService: ProductService) { }
17 | 
18 |     ngOnInit() {
19 |         this.sub = this.productService.selectedProductChanges$.subscribe(
20 |             selectedProduct => this.product = selectedProduct
21 |         );
22 |     }
23 | 
24 |     ngOnDestroy(): void {
25 |         this.sub.unsubscribe();
26 |     }
27 | 
28 | }
29 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='card'>
 2 |   <div class='card-header'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='card-body'
 7 |        *ngIf='products?.length'>
 8 |     <div class='list-group'>
 9 |       <button type='button'
10 |               class='list-group-item'
11 |               *ngFor='let product of products'
12 |               [ngClass]="{'active': product?.id === selectedProduct?.id}"
13 |               (click)='onSelected(product)'>
14 |         {{ product.productName }} ({{ product.productCode }})
15 |       </button>
16 |     </div>
17 |   </div>
18 | </div>
19 | 
20 | <div *ngIf='errorMessage'
21 |      class='alert alert-danger'>
22 |   Error: {{ errorMessage }}
23 | </div>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'
 2 |      *ngIf='monthCount'>
 3 |     <div class='col-md-4 mt-1'>
 4 |         Number of months on the market: {{ monthCount }}
 5 |     </div>
 6 | </div>
 7 | <div class='row'>
 8 |     <div class='col-md-4'>
 9 |         <pm-product-shell-list></pm-product-shell-list>
10 |     </div>
11 |     <div class='col-md-8'>
12 |         <pm-product-shell-detail></pm-product-shell-detail>
13 |     </div>
14 | </div>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { Subscription } from 'rxjs';
 4 | 
 5 | @Component({
 6 |     templateUrl: './product-shell.component.html'
 7 | })
 8 | export class ProductShellComponent implements OnInit, OnDestroy {
 9 |     pageTitle = 'Products';
10 |     monthCount: number;
11 |     sub: Subscription;
12 | 
13 |     constructor(private productService: ProductService) { }
14 | 
15 |     ngOnInit() {
16 |         this.sub = this.productService.selectedProductChanges$.subscribe(
17 |             selectedProduct => {
18 |                 if (selectedProduct) {
19 |                     const start = new Date(selectedProduct.releaseDate);
20 |                     const now = new Date();
21 |                     this.monthCount = now.getMonth() - start.getMonth()
22 |                         + (12 * (now.getFullYear() - start.getFullYear()));
23 |                 } else {
24 |                     this.monthCount = 0;
25 |                 }
26 |             });
27 |     }
28 | 
29 |     ngOnDestroy(): void {
30 |         this.sub.unsubscribe();
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |     id: number | null;
 4 |     productName: string;
 5 |     productCode: string;
 6 |     category: string;
 7 |     tags?: string[];
 8 |     releaseDate: string;
 9 |     price: number;
10 |     description: string;
11 |     starRating: number;
12 |     imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/criteria/criteria.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/app/shared/criteria/criteria.component.css


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/criteria/criteria.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'>
 2 |   <div class='col-md-2'>Filter by:</div>
 3 |   <div class='col-md-4'>
 4 |       <input type='text' #filterElement
 5 |              [(ngModel)]='listFilter' />
 6 |   </div>
 7 | </div>
 8 | <div class='row' *ngIf='displayDetail'>
 9 |   <div class='col-md-10'>
10 |       <h3>Filtered by: {{listFilter}} 
11 |           {{hitMessage}}
12 |       </h3>
13 |   </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/criteria/criteria.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CriteriaComponent } from './criteria.component';
 4 | 
 5 | describe('CriteriaComponent', () => {
 6 |   let component: CriteriaComponent;
 7 |   let fixture: ComponentFixture<CriteriaComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ CriteriaComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(CriteriaComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/APM-Final v8/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 | import { CriteriaComponent } from './criteria/criteria.component';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     CommonModule,
11 |     FormsModule
12 |   ],
13 |   declarations: [
14 |     StarComponent,
15 |     CriteriaComponent
16 |   ],
17 |   exports: [
18 |     StarComponent,
19 |     CriteriaComponent,
20 |     CommonModule,
21 |     FormsModule
22 |   ]
23 | })
24 | export class SharedModule { }
25 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
 1 | <div class="crop"
 2 |      [style.width]="starPercent"
 3 |      [title]="rating">
 4 |   <div style="width: 75px">
 5 |     <span class="fa fa-star"></span>
 6 |     <span class="fa fa-star"></span>
 7 |     <span class="fa fa-star"></span>
 8 |     <span class="fa fa-star"></span>
 9 |     <span class="fa fa-star"></span>
10 |   </div>
11 | </div>


--------------------------------------------------------------------------------
/APM-Final v8/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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: number;
10 |     starPercent: string;
11 | 
12 |     ngOnChanges(): void {
13 |         // Convert x out of 5 starts
14 |         // to y out of 86px width
15 |         this.starPercent = (this.rating * 75 / 5) + 'px';
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {
 3 |     ActivatedRouteSnapshot, RouterStateSnapshot, Router,
 4 |     CanActivate
 5 | } from '@angular/router';
 6 | 
 7 | import { AuthService } from './auth.service';
 8 | 
 9 | @Injectable({
10 |     providedIn: 'root'
11 | })
12 | export class AuthGuard implements CanActivate {
13 | 
14 |     constructor(private authService: AuthService,
15 |                 private router: Router) { }
16 | 
17 |     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
18 |         return this.checkLoggedIn(state.url);
19 |     }
20 | 
21 |     checkLoggedIn(url: string): boolean {
22 |         if (this.authService.isLoggedIn()) {
23 |             return true;
24 |         }
25 | 
26 |         // Retain the attempted URL for redirection
27 |         this.authService.redirectUrl = url;
28 |         this.router.navigate(['/login']);
29 |         return false;
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable({
 6 |     providedIn: 'root'
 7 | })
 8 | export class AuthService {
 9 |     currentUser: IUser | null;
10 |     redirectUrl: string;
11 | 
12 |     constructor() { }
13 | 
14 |     isLoggedIn(): boolean {
15 |         return !!this.currentUser;
16 |     }
17 | 
18 |     login(userName: string, password: string): void {
19 |         // Code here would log into a back end service
20 |         // and return user information
21 |         // This is just hard-coded here.
22 |         this.currentUser = {
23 |             id: 2,
24 |             userName: userName,
25 |             isAdmin: false
26 |         };
27 |     }
28 | 
29 |     logout(): void {
30 |         this.currentUser = null;
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.card {
2 |     width: 700px;
3 | }


--------------------------------------------------------------------------------
/APM-Final v8/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | 
 6 | import { SharedModule } from '../shared/shared.module';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     SharedModule,
11 |     RouterModule.forChild([
12 |       { path: 'login', component: LoginComponent }
13 |     ])
14 |   ],
15 |   declarations: [
16 |     LoginComponent
17 |   ]
18 | })
19 | export class UserModule { }
20 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/garden_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/garden_cart.png


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/hammer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/hammer.png


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/leaf_rake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/leaf_rake.png


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/saw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/saw.png


--------------------------------------------------------------------------------
/APM-Final v8/src/assets/images/xbox-controller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/assets/images/xbox-controller.png


--------------------------------------------------------------------------------
/APM-Final v8/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/APM-Final v8/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final v8/src/favicon.ico


--------------------------------------------------------------------------------
/APM-Final v8/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Acme Product Management</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <pm-root></pm-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/APM-Final v8/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-Final v8/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | @import "~bootstrap/dist/css/bootstrap.min.css";
 3 | @import "~font-awesome/css/font-awesome.min.css";
 4 | 
 5 | .nav-link {
 6 |   font-size: large;
 7 |   cursor: pointer;
 8 | }
 9 | 
10 | .navbar-light .navbar-nav .nav-link.active {
11 |   background: gainsboro
12 | }
13 | 
14 | div.card-header {
15 |  font-size: large;
16 | }
17 | 
18 | div.card {
19 |   margin-top: 10px
20 | }
21 | 
22 | .table {
23 |   margin-top: 10px
24 | }


--------------------------------------------------------------------------------
/APM-Final v8/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: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/APM-Final v8/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.ts"
13 |   ],
14 |   "exclude": [
15 |     "src/test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/APM-Final v8/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   },
22 |   "angularCompilerOptions": {
23 |     "fullTemplateTypeCheck": true,
24 |     "strictInjectionParameters": true
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/APM-Final v8/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 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-Final/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/APM-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 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/APM-Final/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |     "files.autoSave": "afterDelay"
4 | }


--------------------------------------------------------------------------------
/APM-Final/README.md:
--------------------------------------------------------------------------------
 1 | # APM
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
 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-Final/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('apm App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/APM-Final/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/APM-Final/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/APM-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/cli'],
 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/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/APM-Final/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |     imports: [
12 |         RouterModule.forRoot([
13 |             {
14 |                 path: '',
15 |                 component: ShellComponent,
16 |                 children: [
17 |                     { path: 'welcome', component: WelcomeComponent },
18 |                     {
19 |                         path: 'products',
20 |                         // canActivate: [AuthGuard],
21 |                         loadChildren: './products/product.module#ProductModule'
22 |                     },
23 |                     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
24 |                 ]
25 |             },
26 |             { path: '**', component: PageNotFoundComponent }
27 |         ]) // , { enableTracing: true })
28 |     ],
29 |     exports: [RouterModule]
30 | })
31 | export class AppRoutingModule { }
32 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-Final/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-Final/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     selector: 'pm-root',
5 |     templateUrl: './app.component.html',
6 |     styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | 
 5 | // Imports for loading & configuring the in-memory web api
 6 | import { HttpClientInMemoryWebApiModule  } from 'angular-in-memory-web-api';
 7 | import { ProductData } from './products/product-data';
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { ShellComponent } from './home/shell.component';
13 | import { MenuComponent } from './home/menu.component';
14 | import { WelcomeComponent } from './home/welcome.component';
15 | import { PageNotFoundComponent } from './home/page-not-found.component';
16 | 
17 | /* Feature Modules */
18 | import { UserModule } from './user/user.module';
19 | 
20 | @NgModule({
21 |   imports: [
22 |     BrowserModule,
23 |     HttpClientModule,
24 |     HttpClientInMemoryWebApiModule.forRoot(ProductData),
25 |     UserModule,
26 |     AppRoutingModule
27 |   ],
28 |   declarations: [
29 |     AppComponent,
30 |     ShellComponent,
31 |     MenuComponent,
32 |     WelcomeComponent,
33 |     PageNotFoundComponent
34 |   ],
35 |   bootstrap: [ AppComponent ]
36 | })
37 | export class AppModule { }
38 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |     <div class="container-fluid">
 3 |         <a class="navbar-brand">{{pageTitle}}</a>
 4 |         <ul class="nav navbar-nav">
 5 |             <li routerLinkActive="active">
 6 |                 <a routerLink='/welcome'>Home</a>
 7 |             </li>
 8 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 9 |                 <a routerLink='/products'>Product List</a>
10 |             </li>
11 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
12 |                 <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
13 |             </li>
14 |         </ul>
15 |         <ul class="nav navbar-nav navbar-right">
16 |             <li *ngIf="isLoggedIn">
17 |                 <a routerLink='/login'>Welcome {{ userName }}</a>
18 |             </li>
19 |             <li *ngIf="!isLoggedIn">
20 |                 <a routerLink='/login'>Log In</a>
21 |             </li>
22 |             <li *ngIf="isLoggedIn">
23 |                 <a (click)="logOut()" style="cursor: pointer">Log Out</a>
24 |             </li>
25 |         </ul>
26 |     </div>
27 | </nav>


--------------------------------------------------------------------------------
/APM-Final/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle: string = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-Final/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-Final/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="panel panel-primary">
 2 |     <div class="panel-heading">
 3 |         {{pageTitle}}
 4 |     </div>
 5 |     <div class="panel-body"  >
 6 |         <div class="row" >
 7 |             <img src="./assets/images/logo.jpg" 
 8 |                  class="img-responsive center-block"
 9 |                  style="max-height:300px;padding-bottom:50px"/>
10 |         </div>
11 |         <div class="row"  >
12 |             <div class="text-center">Developed by:</div>
13 |             <h3 class="text-center">Deborah Kurata</h3>
14 | 
15 |             <div class="text-center">@deborahkurata</div>
16 |             <div class="text-center">
17 |                 <a href="http://www.bit.ly/DeborahKsBlog">www.bit.ly/DeborahKsBlog</a>
18 |             </div>
19 |         </div>
20 |     </div>
21 | </div>


--------------------------------------------------------------------------------
/APM-Final/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle: string = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable()
 7 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
 8 | 
 9 |     canDeactivate(component: ProductEditComponent): boolean {
10 |         if (component.isDirty) {
11 |             const productName = component.product.productName || 'New Product';
12 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
13 |         }
14 |         return true;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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: string = 'Product Detail';
13 |     product: IProduct;
14 |     errorMessage: string;
15 | 
16 |     constructor(private productService: ProductService,
17 |                 private router: Router,
18 |                 private route: ActivatedRoute) {
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) {
30 |         this.productService.getProduct(id).subscribe(
31 |           product => this.product = product,
32 |           error => this.errorMessage = <any>error
33 |         );
34 |     }
35 | 
36 |     onBack(): void {
37 |         this.router.navigate(['/products']);
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-parameter.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { ProductParameterService } from './product-parameter.service';
 4 | 
 5 | describe('ProductParameterService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [ProductParameterService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([ProductParameterService], (service: ProductParameterService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-parameter.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable()
 4 | export class ProductParameterService {
 5 |   showImage: boolean;
 6 |   filterBy: string;
 7 | 
 8 |   constructor() { }
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | import { Subscription } from 'rxjs/Subscription';
 5 | 
 6 | @Component({
 7 |     selector: 'pm-product-shell-detail',
 8 |     templateUrl: './product-shell-detail.component.html'
 9 | })
10 | export class ProductShellDetailComponent implements OnInit, OnDestroy {
11 |     pageTitle: string = 'Product Detail';
12 | 
13 |     product: IProduct | null;
14 |     sub: Subscription;
15 | 
16 |     constructor(private productService: ProductService) { }
17 | 
18 |     ngOnInit() {
19 |         this.sub = this.productService.selectedProductChanges$.subscribe(
20 |             selectedProduct => this.product = selectedProduct
21 |         );
22 |     }
23 | 
24 |     ngOnDestroy(): void {
25 |         this.sub.unsubscribe();
26 |     }
27 | 
28 | }
29 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='panel panel-primary' *ngIf='products?.length'>
 2 |   <div class='panel-heading'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='panel-body'>
 7 |     <div class='list-group'>
 8 |       <button type='button'
 9 |               class='list-group-item'
10 |               *ngFor='let product of products'
11 |               [ngClass]="{'active': product?.id === selectedProduct?.id}"
12 |               (click)='onSelected(product)'>
13 |         {{ product.productName }} ({{ product.productCode }})
14 |       </button>
15 |     </div>
16 |   </div>
17 | </div>
18 | <div *ngIf='errorMessage' class='alert alert-danger'>
19 |   Error: {{ errorMessage }}
20 | </div>


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row' *ngIf='monthCount'>
 2 |     <div class='col-md-4'>
 3 |         <h4>
 4 |             Number of months on the market: {{ monthCount }}
 5 |         </h4>
 6 |     </div>
 7 | </div>
 8 | <div class='row'>
 9 |     <div class='col-md-4'>
10 |         <pm-product-shell-list></pm-product-shell-list>
11 |     </div>
12 |     <div class='col-md-8'>
13 |         <pm-product-shell-detail></pm-product-shell-detail>
14 |     </div>
15 | </div>


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { Subscription } from 'rxjs/Subscription';
 4 | 
 5 | @Component({
 6 |     templateUrl: './product-shell.component.html'
 7 | })
 8 | export class ProductShellComponent implements OnInit, OnDestroy {
 9 |     pageTitle: string = 'Products';
10 |     monthCount: number;
11 |     sub: Subscription;
12 | 
13 |     constructor(private productService: ProductService) { }
14 | 
15 |     ngOnInit() {
16 |         this.sub = this.productService.selectedProductChanges$.subscribe(selectedProduct => {
17 |             if (selectedProduct) {
18 |                 const start = new Date(selectedProduct.releaseDate);
19 |                 const now = new Date();
20 |                 this.monthCount = now.getMonth() - start.getMonth()
21 |                     + (12 * (now.getFullYear() - start.getFullYear()));
22 |             } else {
23 |                 this.monthCount = 0;
24 |             }
25 |         });
26 |     }
27 | 
28 |     ngOnDestroy(): void {
29 |         this.sub.unsubscribe();
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |     id: number | null;
 4 |     productName: string;
 5 |     productCode: string;
 6 |     category: string;
 7 |     tags?: string[];
 8 |     releaseDate: string;
 9 |     price: number;
10 |     description: string;
11 |     starRating: number;
12 |     imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/criteria/criteria.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/app/shared/criteria/criteria.component.css


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/criteria/criteria.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'>
 2 |   <div class='col-md-2'>Filter by:</div>
 3 |   <div class='col-md-4'>
 4 |       <input type='text' #filterElement
 5 |              [(ngModel)]='listFilter' />
 6 |   </div>
 7 | </div>
 8 | <div class='row' *ngIf='displayDetail'>
 9 |   <div class='col-md-10'>
10 |       <h3>Filtered by: {{listFilter}} 
11 |           {{hitMessage}}
12 |       </h3>
13 |   </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/criteria/criteria.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CriteriaComponent } from './criteria.component';
 4 | 
 5 | describe('CriteriaComponent', () => {
 6 |   let component: CriteriaComponent;
 7 |   let fixture: ComponentFixture<CriteriaComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ CriteriaComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(CriteriaComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/APM-Final/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 | import { CriteriaComponent } from './criteria/criteria.component';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     CommonModule,
11 |     FormsModule
12 |   ],
13 |   declarations: [
14 |     StarComponent,
15 |     CriteriaComponent
16 |   ],
17 |   exports: [
18 |     StarComponent,
19 |     CriteriaComponent,
20 |     CommonModule,
21 |     FormsModule
22 |   ]
23 | })
24 | export class SharedModule { }
25 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
1 | <div class="crop" [style.width]="starPercent" [title]="rating">
2 |     <div style="width: 86px">
3 |         <span class="glyphicon glyphicon-star"></span>
4 |         <span class="glyphicon glyphicon-star"></span>
5 |         <span class="glyphicon glyphicon-star"></span>
6 |         <span class="glyphicon glyphicon-star"></span>
7 |         <span class="glyphicon glyphicon-star"></span>
8 |     </div>
9 | </div>


--------------------------------------------------------------------------------
/APM-Final/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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: number;
10 |     starPercent: string;
11 | 
12 |     ngOnChanges(): void {
13 |         // Convert x out of 5 starts
14 |         // to y out of 86px width
15 |         this.starPercent = (this.rating * 86 / 5) + 'px';
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, Router,
 3 |          CanActivate } from '@angular/router';
 4 | 
 5 | import { AuthService } from './auth.service';
 6 | 
 7 | @Injectable()
 8 | export  class AuthGuard implements CanActivate {
 9 | 
10 |     constructor(private authService: AuthService,
11 |                 private router: Router) { }
12 | 
13 |     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
14 |         return this.checkLoggedIn(state.url);
15 |     }
16 | 
17 |     checkLoggedIn(url: string): boolean {
18 |         if (this.authService.isLoggedIn()) {
19 |             return true;
20 |         }
21 | 
22 |         // Retain the attempted URL for redirection
23 |         this.authService.redirectUrl = url;
24 |         this.router.navigate(['/login']);
25 |         return false;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable()
 6 | export class AuthService {
 7 |     currentUser: IUser | null;
 8 |     redirectUrl: string;
 9 | 
10 |     constructor() {  }
11 | 
12 |     isLoggedIn(): boolean {
13 |         return !!this.currentUser;
14 |     }
15 | 
16 |     login(userName: string, password: string): void {
17 |         // Code here would log into a back end service
18 |         // and return user information
19 |         // This is just hard-coded here.
20 |         this.currentUser = {
21 |             id: 2,
22 |             userName: userName,
23 |             isAdmin: false
24 |         };
25 |     }
26 | 
27 |     logout(): void {
28 |         this.currentUser = null;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.panel {
2 |     margin: 40px 0;
3 |     width: 700px;
4 | }


--------------------------------------------------------------------------------
/APM-Final/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | import { AuthService } from './auth.service';
 6 | import { AuthGuard } from './auth-guard.service';
 7 | 
 8 | import { SharedModule } from '../shared/shared.module';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     SharedModule,
13 |     RouterModule.forChild([
14 |       { path: 'login', component: LoginComponent }
15 |     ])
16 |   ],
17 |   declarations: [
18 |     LoginComponent
19 |   ],
20 |   providers: [
21 |     AuthService,
22 |     AuthGuard
23 |   ]
24 | })
25 | export class UserModule { }
26 | 


--------------------------------------------------------------------------------
/APM-Final/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-Final/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-Final/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-Final/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-Final/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/APM-Final/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Final/src/favicon.ico


--------------------------------------------------------------------------------
/APM-Final/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Acme Product Management</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <pm-root></pm-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/APM-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.log(err));
13 | 


--------------------------------------------------------------------------------
/APM-Final/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | li {
3 |     font-size: large;
4 | }
5 | 
6 | div.panel-heading {
7 |    font-size: x-large;
8 | }


--------------------------------------------------------------------------------
/APM-Final/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/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/APM-Final/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/APM-Final/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-Final/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/APM-Final/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/.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 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |     "files.autoSave": "afterDelay"
4 | }


--------------------------------------------------------------------------------
/APM-FinalWithGetters/README.md:
--------------------------------------------------------------------------------
 1 | # APM
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
 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-FinalWithGetters/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('apm App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/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/cli'],
 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/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |     imports: [
12 |         RouterModule.forRoot([
13 |             {
14 |                 path: '',
15 |                 component: ShellComponent,
16 |                 children: [
17 |                     { path: 'welcome', component: WelcomeComponent },
18 |                     {
19 |                         path: 'products',
20 |                         // canActivate: [AuthGuard],
21 |                         loadChildren: './products/product.module#ProductModule'
22 |                     },
23 |                     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
24 |                 ]
25 |             },
26 |             { path: '**', component: PageNotFoundComponent }
27 |         ]) // , { enableTracing: true })
28 |     ],
29 |     exports: [RouterModule]
30 | })
31 | export class AppRoutingModule { }
32 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     selector: 'pm-root',
5 |     templateUrl: './app.component.html',
6 |     styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |     <div class="container-fluid">
 3 |         <a class="navbar-brand">{{pageTitle}}</a>
 4 |         <ul class="nav navbar-nav">
 5 |             <li routerLinkActive="active">
 6 |                 <a routerLink='/welcome'>Home</a>
 7 |             </li>
 8 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 9 |                 <a routerLink='/products'>Product List</a>
10 |             </li>
11 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
12 |                 <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
13 |             </li>
14 |         </ul>
15 |         <ul class="nav navbar-nav navbar-right">
16 |             <li *ngIf="isLoggedIn">
17 |                 <a routerLink='/login'>Welcome {{ userName }}</a>
18 |             </li>
19 |             <li *ngIf="!isLoggedIn">
20 |                 <a routerLink='/login'>Log In</a>
21 |             </li>
22 |             <li *ngIf="isLoggedIn">
23 |                 <a (click)="logOut()" style="cursor: pointer">Log Out</a>
24 |             </li>
25 |         </ul>
26 |     </div>
27 | </nav>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle: string = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="panel panel-primary">
 2 |     <div class="panel-heading">
 3 |         {{pageTitle}}
 4 |     </div>
 5 |     <div class="panel-body"  >
 6 |         <div class="row" >
 7 |             <img src="./assets/images/logo.jpg" 
 8 |                  class="img-responsive center-block"
 9 |                  style="max-height:300px;padding-bottom:50px"/>
10 |         </div>
11 |         <div class="row"  >
12 |             <div class="text-center">Developed by:</div>
13 |             <h3 class="text-center">Deborah Kurata</h3>
14 | 
15 |             <div class="text-center">@deborahkurata</div>
16 |             <div class="text-center">
17 |                 <a href="http://www.bit.ly/DeborahKsBlog">www.bit.ly/DeborahKsBlog</a>
18 |             </div>
19 |         </div>
20 |     </div>
21 | </div>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle: string = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable()
 7 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
 8 | 
 9 |     canDeactivate(component: ProductEditComponent): boolean {
10 |         if (component.isDirty) {
11 |             const productName = component.product.productName || 'New Product';
12 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
13 |         }
14 |         return true;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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: string = 'Product Detail';
13 |     product: IProduct;
14 |     errorMessage: string;
15 | 
16 |     constructor(private productService: ProductService,
17 |                 private router: Router,
18 |                 private route: ActivatedRoute) {
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) {
30 |         this.productService.getProduct(id).subscribe(
31 |           product => this.product = product,
32 |           error => this.errorMessage = <any>error
33 |         );
34 |     }
35 | 
36 |     onBack(): void {
37 |         this.router.navigate(['/products']);
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-parameter.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { ProductParameterService } from './product-parameter.service';
 4 | 
 5 | describe('ProductParameterService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [ProductParameterService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([ProductParameterService], (service: ProductParameterService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-parameter.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable()
 4 | export class ProductParameterService {
 5 |   showImage: boolean;
 6 |   filterBy: string;
 7 | 
 8 |   constructor() { }
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | 
 5 | @Component({
 6 |     selector: 'pm-product-shell-detail',
 7 |     templateUrl: './product-shell-detail.component.html'
 8 | })
 9 | export class ProductShellDetailComponent implements OnInit {
10 |     pageTitle: string = 'Product Detail';
11 | 
12 |     get product(): IProduct | null {
13 |         return this.productService.currentProduct;
14 |     }
15 | 
16 |     constructor(private productService: ProductService) { }
17 | 
18 |     ngOnInit() {
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='panel panel-primary' *ngIf='products?.length'>
 2 |   <div class='panel-heading'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='panel-body'>
 7 |     <div class='list-group'>
 8 |       <button type='button'
 9 |               class='list-group-item'
10 |               *ngFor='let product of products'
11 |               [ngClass]="{'active': product?.id === selectedProduct?.id}"
12 |               (click)='onSelected(product)'>
13 |         {{ product.productName }} ({{ product.productCode }})
14 |       </button>
15 |     </div>
16 |   </div>
17 | </div>
18 | <div *ngIf='errorMessage' class='alert alert-danger'>
19 |   Error: {{ errorMessage }}
20 | </div>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-shell/product-shell-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | import { IProduct } from '../product';
 4 | import { ProductService } from '../product.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-product-shell-list',
 8 |   templateUrl: './product-shell-list.component.html'
 9 | })
10 | export class ProductShellListComponent implements OnInit {
11 |   pageTitle: string = 'Products';
12 |   errorMessage: string;
13 |   products: IProduct[];
14 | 
15 |   get selectedProduct(): IProduct | null {
16 |     return this.productService.currentProduct;
17 | }
18 |   constructor(private productService: ProductService) { }
19 | 
20 |   ngOnInit(): void {
21 |     this.productService.getProducts().subscribe(
22 |       (products: IProduct[]) => {
23 |         this.products = products;
24 |       },
25 |       (error: any) => this.errorMessage = <any>error
26 |     );
27 |   }
28 | 
29 |   onSelected(product: IProduct): void {
30 |     this.productService.currentProduct = product;
31 |   }
32 | 
33 | }
34 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row' *ngIf='monthCount'>
 2 |     <div class='col-md-4'>
 3 |         <h4>
 4 |             Number of months on the market: {{ monthCount }}
 5 |         </h4>
 6 |     </div>
 7 | </div>
 8 | <div class='row'>
 9 |     <div class='col-md-4'>
10 |         <pm-product-shell-list></pm-product-shell-list>
11 |     </div>
12 |     <div class='col-md-8'>
13 |         <pm-product-shell-detail></pm-product-shell-detail>
14 |     </div>
15 | </div>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | 
 4 | @Component({
 5 |     templateUrl: './product-shell.component.html'
 6 | })
 7 | export class ProductShellComponent implements OnInit {
 8 |     pageTitle: string = 'Products';
 9 | 
10 |     get monthCount(): number {
11 |         const currentProduct = this.productService.currentProduct;
12 |         let _monthCount = 0;
13 | 
14 |         if (currentProduct) {
15 |             const start = new Date(currentProduct.releaseDate);
16 |             const now = new Date();
17 |             _monthCount = now.getMonth() - start.getMonth()
18 |                 + (12 * (now.getFullYear() - start.getFullYear()));
19 |         }
20 |         return _monthCount;
21 |     }
22 | 
23 |     constructor(private productService: ProductService) { }
24 | 
25 |     ngOnInit() {
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |     id: number | null;
 4 |     productName: string;
 5 |     productCode: string;
 6 |     category: string;
 7 |     tags?: string[];
 8 |     releaseDate: string;
 9 |     price: number;
10 |     description: string;
11 |     starRating: number;
12 |     imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/criteria/criteria.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/app/shared/criteria/criteria.component.css


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/criteria/criteria.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'>
 2 |   <div class='col-md-2'>Filter by:</div>
 3 |   <div class='col-md-4'>
 4 |       <input type='text' #filterElement
 5 |              [(ngModel)]='listFilter' />
 6 |   </div>
 7 | </div>
 8 | <div class='row' *ngIf='displayDetail'>
 9 |   <div class='col-md-10'>
10 |       <h3>Filtered by: {{listFilter}} 
11 |           {{hitMessage}}
12 |       </h3>
13 |   </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/criteria/criteria.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CriteriaComponent } from './criteria.component';
 4 | 
 5 | describe('CriteriaComponent', () => {
 6 |   let component: CriteriaComponent;
 7 |   let fixture: ComponentFixture<CriteriaComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ CriteriaComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(CriteriaComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/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 | import { CriteriaComponent } from './criteria/criteria.component';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     CommonModule,
11 |     FormsModule
12 |   ],
13 |   declarations: [
14 |     StarComponent,
15 |     CriteriaComponent
16 |   ],
17 |   exports: [
18 |     StarComponent,
19 |     CriteriaComponent,
20 |     CommonModule,
21 |     FormsModule
22 |   ]
23 | })
24 | export class SharedModule { }
25 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
1 | <div class="crop" [style.width]="starPercent" [title]="rating">
2 |     <div style="width: 86px">
3 |         <span class="glyphicon glyphicon-star"></span>
4 |         <span class="glyphicon glyphicon-star"></span>
5 |         <span class="glyphicon glyphicon-star"></span>
6 |         <span class="glyphicon glyphicon-star"></span>
7 |         <span class="glyphicon glyphicon-star"></span>
8 |     </div>
9 | </div>


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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: number;
10 |     starPercent: string;
11 | 
12 |     ngOnChanges(): void {
13 |         // Convert x out of 5 starts
14 |         // to y out of 86px width
15 |         this.starPercent = (this.rating * 86 / 5) + 'px';
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, Router,
 3 |          CanActivate } from '@angular/router';
 4 | 
 5 | import { AuthService } from './auth.service';
 6 | 
 7 | @Injectable()
 8 | export  class AuthGuard implements CanActivate {
 9 | 
10 |     constructor(private authService: AuthService,
11 |                 private router: Router) { }
12 | 
13 |     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
14 |         return this.checkLoggedIn(state.url);
15 |     }
16 | 
17 |     checkLoggedIn(url: string): boolean {
18 |         if (this.authService.isLoggedIn()) {
19 |             return true;
20 |         }
21 | 
22 |         // Retain the attempted URL for redirection
23 |         this.authService.redirectUrl = url;
24 |         this.router.navigate(['/login']);
25 |         return false;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable()
 6 | export class AuthService {
 7 |     currentUser: IUser | null;
 8 |     redirectUrl: string;
 9 | 
10 |     constructor() {  }
11 | 
12 |     isLoggedIn(): boolean {
13 |         return !!this.currentUser;
14 |     }
15 | 
16 |     login(userName: string, password: string): void {
17 |         // Code here would log into a back end service
18 |         // and return user information
19 |         // This is just hard-coded here.
20 |         this.currentUser = {
21 |             id: 2,
22 |             userName: userName,
23 |             isAdmin: false
24 |         };
25 |     }
26 | 
27 |     logout(): void {
28 |         this.currentUser = null;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.panel {
2 |     margin: 40px 0;
3 |     width: 700px;
4 | }


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | import { AuthService } from './auth.service';
 6 | import { AuthGuard } from './auth-guard.service';
 7 | 
 8 | import { SharedModule } from '../shared/shared.module';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     SharedModule,
13 |     RouterModule.forChild([
14 |       { path: 'login', component: LoginComponent }
15 |     ])
16 |   ],
17 |   declarations: [
18 |     LoginComponent
19 |   ],
20 |   providers: [
21 |     AuthService,
22 |     AuthGuard
23 |   ]
24 | })
25 | export class UserModule { }
26 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-FinalWithGetters/src/favicon.ico


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Acme Product Management</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <pm-root></pm-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/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.log(err));
13 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | li {
3 |     font-size: large;
4 | }
5 | 
6 | div.panel-heading {
7 |    font-size: x-large;
8 | }


--------------------------------------------------------------------------------
/APM-FinalWithGetters/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/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/APM-FinalWithGetters/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/APM-Start v14/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | 


--------------------------------------------------------------------------------
/APM-Start v14/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/APM-Start v14/.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 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/APM-Start v14/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/APM-Start v14/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "pwa-chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-Start v14/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |   "files.autoSave": "afterDelay",
4 |   "html.format.wrapAttributes": "force-aligned"
5 | }


--------------------------------------------------------------------------------
/APM-Start v14/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/APM-Start v14/README.md:
--------------------------------------------------------------------------------
 1 | # Apm
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.4.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application 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.
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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     RouterModule.forRoot([
13 |       {
14 |         path: '',
15 |         component: ShellComponent,
16 |         children: [
17 |           { path: 'welcome', component: WelcomeComponent },
18 |           {
19 |             path: 'products',
20 |             // canActivate: [AuthGuard],
21 |             loadChildren: () =>
22 |               import('./products/product.module').then(m => m.ProductModule)
23 |           },
24 |           { path: '', redirectTo: 'welcome', pathMatch: 'full' },
25 |         ]
26 |       },
27 |       { path: '**', component: PageNotFoundComponent }
28 |     ]) // , { enableTracing: true })
29 |   ],
30 |   exports: [RouterModule]
31 | })
32 | export class AppRoutingModule { }
33 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-Start v14/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-Start v14/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'pm-root',
5 |   templateUrl: './app.component.html',
6 |   styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | 
 5 | // Imports for loading & configuring the in-memory web api
 6 | import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 7 | import { ProductData } from './products/product-data';
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { ShellComponent } from './home/shell.component';
13 | import { MenuComponent } from './home/menu.component';
14 | import { WelcomeComponent } from './home/welcome.component';
15 | import { PageNotFoundComponent } from './home/page-not-found.component';
16 | 
17 | /* Feature Modules */
18 | import { UserModule } from './user/user.module';
19 | 
20 | @NgModule({
21 |   imports: [
22 |     BrowserModule,
23 |     HttpClientModule,
24 |     HttpClientInMemoryWebApiModule.forRoot(ProductData),
25 |     UserModule,
26 |     AppRoutingModule
27 |   ],
28 |   declarations: [
29 |     AppComponent,
30 |     ShellComponent,
31 |     MenuComponent,
32 |     WelcomeComponent,
33 |     PageNotFoundComponent
34 |   ],
35 |   bootstrap: [AppComponent]
36 | })
37 | export class AppModule { }
38 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="card">
 2 |   <div class="card-header">
 3 |     {{pageTitle}}
 4 |   </div>
 5 |   <div class="card-body">
 6 |     <div class="container-fluid">
 7 |       <div class="text-center">
 8 |         <img src="./assets/images/logo.jpg"
 9 |              class="img-responsive center-block"
10 |              style="max-height:300px;padding-bottom:50px" />
11 |       </div>
12 | 
13 |       <div class="text-center">Developed by:</div>
14 |       <div class="text-center">
15 |         <h3>Deborah Kurata</h3>
16 |       </div>
17 | 
18 |       <div class="text-center">@deborahkurata</div>
19 |     </div>
20 |   </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable({
 7 |     providedIn: 'root'
 8 | })
 9 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
10 | 
11 |     canDeactivate(component: ProductEditComponent): boolean {
12 |         if (component.isDirty) {
13 |             const productName = component.product?.productName || 'New Product';
14 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
15 |         }
16 |         return true;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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 |   product?: IProduct;
14 |   errorMessage = '';
15 | 
16 |   constructor(private productService: ProductService,
17 |     private router: Router,
18 |     private route: ActivatedRoute) {
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) {
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 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | 
 5 | @Component({
 6 |     selector: 'pm-product-shell-detail',
 7 |     templateUrl: './product-shell-detail.component.html'
 8 | })
 9 | export class ProductShellDetailComponent implements OnInit {
10 |   pageTitle = 'Product Detail';
11 |   // Need to handle null to allow for no selected product.
12 |   product: IProduct | null = null;  
13 |   errorMessage = '';
14 | 
15 |     constructor(private productService: ProductService) { }
16 | 
17 |     ngOnInit() {
18 |     }
19 | 
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='card'>
 2 |   <div class='card-header'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='card-body'
 7 |        *ngIf='products'>
 8 |     <div class='list-group'>
 9 |       <button type='button'
10 |               class='list-group-item'
11 |               *ngFor='let product of products'>
12 |         {{ product.productName }} ({{ product.productCode }})
13 |       </button>
14 |     </div>
15 |   </div>
16 | </div>
17 | 
18 | <div class='alert alert-danger'
19 |      *ngIf='errorMessage'>
20 |   Error: {{ errorMessage }}
21 | </div>


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-shell/product-shell-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | import { IProduct } from '../product';
 4 | import { ProductService } from '../product.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-product-shell-list',
 8 |   templateUrl: './product-shell-list.component.html'
 9 | })
10 | export class ProductShellListComponent implements OnInit {
11 |   pageTitle = 'Products';
12 |   products: IProduct[] = [];
13 |   errorMessage = '';
14 | 
15 |   constructor(private productService: ProductService) { }
16 | 
17 |   ngOnInit(): void {
18 |     this.productService.getProducts().subscribe({
19 |       next: products => this.products = products,
20 |       error: err => this.errorMessage = err
21 |     });
22 | 
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row'
 2 |      *ngIf='monthCount'>
 3 |   <div class='col-md-4 mt-1'>
 4 |     Number of months on the market: {{ monthCount }}
 5 |   </div>
 6 | </div>
 7 | <div class='row'>
 8 |   <div class='col-md-4'>
 9 |     <pm-product-shell-list></pm-product-shell-list>
10 |   </div>
11 |   <div class='col-md-8'>
12 |     <pm-product-shell-detail></pm-product-shell-detail>
13 |   </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     templateUrl: './product-shell.component.html'
 5 | })
 6 | export class ProductShellComponent implements OnInit {
 7 |   pageTitle = 'Products';
 8 |   monthCount = 0;
 9 | 
10 |     constructor() { }
11 | 
12 |     ngOnInit() {
13 |     }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { SharedModule } from '../shared/shared.module';
 5 | 
 6 | import { ProductListComponent } from './product-list.component';
 7 | import { ProductDetailComponent } from './product-detail.component';
 8 | import { ProductEditComponent } from './edit/product-edit.component';
 9 | 
10 | import { ProductEditGuard } from './edit/product-edit-guard.service';
11 | 
12 | @NgModule({
13 |   imports: [
14 |     SharedModule,
15 |     RouterModule.forChild([
16 |       { path: '', component: ProductListComponent },
17 |       { path: ':id', component: ProductDetailComponent },
18 |       {
19 |         path: ':id/edit',
20 |         canDeactivate: [ProductEditGuard],
21 |         component: ProductEditComponent
22 |       }
23 |     ])
24 |   ],
25 |   declarations: [
26 |     ProductListComponent,
27 |     ProductDetailComponent,
28 |     ProductEditComponent
29 |   ]
30 | })
31 | export class ProductModule { }
32 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |   id: number | null;
 4 |   productName: string;
 5 |   productCode: string;
 6 |   category: string;
 7 |   tags?: string[];
 8 |   releaseDate: string;
 9 |   price: number;
10 |   description: string;
11 |   starRating: number;
12 |   imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-Start v14/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 |     FormsModule
11 |   ],
12 |   declarations: [
13 |     StarComponent
14 |   ],
15 |   exports: [
16 |     StarComponent,
17 |     CommonModule,
18 |     FormsModule
19 |   ]
20 | })
21 | export class SharedModule { }
22 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
 1 | <div class="crop"
 2 |      [style.width.px]="cropWidth"
 3 |      [title]="rating">
 4 |   <div style="width: 75px">
 5 |     <span class="fa fa-star"></span>
 6 |     <span class="fa fa-star"></span>
 7 |     <span class="fa fa-star"></span>
 8 |     <span class="fa fa-star"></span>
 9 |     <span class="fa fa-star"></span>
10 |   </div>
11 | </div>


--------------------------------------------------------------------------------
/APM-Start v14/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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 |   cropWidth = 75;
11 | 
12 |   ngOnChanges(): void {
13 |     this.cropWidth = this.rating * 75 / 5;
14 |   }
15 | }


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanActivate } from '@angular/router';
 3 | 
 4 | import { AuthService } from './auth.service';
 5 | 
 6 | @Injectable({
 7 |     providedIn: 'root'
 8 | })
 9 | export class AuthGuard implements CanActivate {
10 | 
11 |   constructor(private authService: AuthService,
12 |               private router: Router) { }
13 | 
14 |   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
15 |     return this.checkLoggedIn(state.url);
16 |   }
17 | 
18 |   checkLoggedIn(url: string): boolean {
19 |     if (this.authService.isLoggedIn()) {
20 |       return true;
21 |     }
22 | 
23 |     // Retain the attempted URL for redirection
24 |     this.authService.redirectUrl = url;
25 |     this.router.navigate(['/login']);
26 |     return false;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class AuthService {
 9 |   currentUser: IUser | null = null;
10 |   redirectUrl = '';
11 | 
12 |   constructor() { }
13 | 
14 |   isLoggedIn(): boolean {
15 |     return !!this.currentUser;
16 |   }
17 | 
18 |   login(userName: string, password: string): void {
19 |     // Code here would log into a back end service
20 |     // and return user information
21 |     // This is just hard-coded here.
22 |     this.currentUser = {
23 |       id: 2,
24 |       userName: userName,
25 |       isAdmin: false
26 |     };
27 |   }
28 | 
29 |   logout(): void {
30 |     this.currentUser = null;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.card {
2 |     width: 700px;
3 | }


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NgForm } from '@angular/forms';
 3 | import { Router } from '@angular/router';
 4 | 
 5 | import { AuthService } from './auth.service';
 6 | 
 7 | @Component({
 8 |     templateUrl: './login.component.html',
 9 |     styleUrls: ['./login.component.css']
10 | })
11 | export class LoginComponent {
12 |     errorMessage = '';
13 |     pageTitle = 'Log In';
14 | 
15 |     constructor(private authService: AuthService,
16 |                 private router: Router) {
17 |     }
18 | 
19 |     cancel(): void {
20 |         this.router.navigate(['welcome']);
21 |     }
22 | 
23 |     login(loginForm: NgForm): void {
24 |         if (loginForm && loginForm.valid) {
25 |             const userName = loginForm.form.value.userName;
26 |             const password = loginForm.form.value.password;
27 |             this.authService.login(userName, password);
28 | 
29 |             if (this.authService.redirectUrl) {
30 |                 this.router.navigateByUrl(this.authService.redirectUrl);
31 |             } else {
32 |                 this.router.navigate(['/products']);
33 |             }
34 |         } else {
35 |             this.errorMessage = 'Please enter a user name and password.';
36 |         }
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | 
 6 | import { SharedModule } from '../shared/shared.module';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     SharedModule,
11 |     RouterModule.forChild([
12 |       { path: 'login', component: LoginComponent }
13 |     ])
14 |   ],
15 |   declarations: [
16 |     LoginComponent
17 |   ]
18 | })
19 | export class UserModule { }
20 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/garden_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/garden_cart.png


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/hammer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/hammer.png


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/leaf_rake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/leaf_rake.png


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/saw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/saw.png


--------------------------------------------------------------------------------
/APM-Start v14/src/assets/images/xbox-controller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/assets/images/xbox-controller.png


--------------------------------------------------------------------------------
/APM-Start v14/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/APM-Start v14/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start v14/src/favicon.ico


--------------------------------------------------------------------------------
/APM-Start v14/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>APM</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <pm-root></pm-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/APM-Start v14/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-Start v14/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | @import "~bootstrap/dist/css/bootstrap.min.css";
 3 | @import "~font-awesome/css/font-awesome.min.css";
 4 | 
 5 | div.card {
 6 |   margin-top: 10px
 7 | }
 8 | 
 9 | div.card-header {
10 |   font-size: large;
11 |   background-color: #337AB7;
12 |   color: white;
13 | }
14 | 
15 | .table {
16 |   margin-top: 10px
17 | }
18 | 
19 | a {
20 |   text-decoration: none;
21 | }


--------------------------------------------------------------------------------
/APM-Start v14/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/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 |     <T>(id: string): T;
13 |     keys(): string[];
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting(),
21 | );
22 | 
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().forEach(context);
27 | 


--------------------------------------------------------------------------------
/APM-Start v14/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Start v14/tsconfig.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 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitOverride": true,
10 |     "noPropertyAccessFromIndexSignature": true,
11 |     "noImplicitReturns": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "sourceMap": true,
14 |     "declaration": false,
15 |     "downlevelIteration": true,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "es2020",
20 |     "module": "es2020",
21 |     "lib": [
22 |       "es2020",
23 |       "dom"
24 |     ]
25 |   },
26 |   "angularCompilerOptions": {
27 |     "enableI18nLegacyMessageIdFormat": false,
28 |     "strictInjectionParameters": true,
29 |     "strictInputAccessModifiers": true,
30 |     "strictTemplates": true
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/APM-Start v14/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.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-Start/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/APM-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 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/APM-Start/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 |     "files.autoSave": "afterDelay"
4 | }


--------------------------------------------------------------------------------
/APM-Start/README.md:
--------------------------------------------------------------------------------
 1 | # APM
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
 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-Start/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('apm App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/APM-Start/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/APM-Start/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/APM-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/cli'],
 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/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/APM-Start/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { AuthGuard } from './user/auth-guard.service';
 5 | 
 6 | import { ShellComponent } from './home/shell.component';
 7 | import { WelcomeComponent } from './home/welcome.component';
 8 | import { PageNotFoundComponent } from './home/page-not-found.component';
 9 | 
10 | @NgModule({
11 |     imports: [
12 |         RouterModule.forRoot([
13 |             {
14 |                 path: '',
15 |                 component: ShellComponent,
16 |                 children: [
17 |                     { path: 'welcome', component: WelcomeComponent },
18 |                     {
19 |                         path: 'products',
20 |                         // canActivate: [AuthGuard],
21 |                         loadChildren: './products/product.module#ProductModule'
22 |                     },
23 |                     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
24 |                 ]
25 |             },
26 |             { path: '**', component: PageNotFoundComponent }
27 |         ]) // , { enableTracing: true })
28 |     ],
29 |     exports: [RouterModule]
30 | })
31 | export class AppRoutingModule { }
32 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/app/app.component.css


--------------------------------------------------------------------------------
/APM-Start/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/APM-Start/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     selector: 'pm-root',
5 |     templateUrl: './app.component.html',
6 |     styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | 
 5 | // Imports for loading & configuring the in-memory web api
 6 | import { HttpClientInMemoryWebApiModule  } from 'angular-in-memory-web-api';
 7 | import { ProductData } from './products/product-data';
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | 
11 | import { AppComponent } from './app.component';
12 | import { ShellComponent } from './home/shell.component';
13 | import { MenuComponent } from './home/menu.component';
14 | import { WelcomeComponent } from './home/welcome.component';
15 | import { PageNotFoundComponent } from './home/page-not-found.component';
16 | 
17 | /* Feature Modules */
18 | import { UserModule } from './user/user.module';
19 | 
20 | @NgModule({
21 |   imports: [
22 |     BrowserModule,
23 |     HttpClientModule,
24 |     HttpClientInMemoryWebApiModule.forRoot(ProductData),
25 |     UserModule,
26 |     AppRoutingModule
27 |   ],
28 |   declarations: [
29 |     AppComponent,
30 |     ShellComponent,
31 |     MenuComponent,
32 |     WelcomeComponent,
33 |     PageNotFoundComponent
34 |   ],
35 |   bootstrap: [ AppComponent ]
36 | })
37 | export class AppModule { }
38 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |     <div class="container-fluid">
 3 |         <a class="navbar-brand">{{pageTitle}}</a>
 4 |         <ul class="nav navbar-nav">
 5 |             <li routerLinkActive="active">
 6 |                 <a routerLink='/welcome'>Home</a>
 7 |             </li>
 8 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
 9 |                 <a routerLink='/products'>Product List</a>
10 |             </li>
11 |             <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
12 |                 <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
13 |             </li>
14 |         </ul>
15 |         <ul class="nav navbar-nav navbar-right">
16 |             <li *ngIf="isLoggedIn">
17 |                 <a routerLink='/login'>Welcome {{ userName }}</a>
18 |             </li>
19 |             <li *ngIf="!isLoggedIn">
20 |                 <a routerLink='/login'>Log In</a>
21 |             </li>
22 |             <li *ngIf="isLoggedIn">
23 |                 <a (click)="logOut()" style="cursor: pointer">Log Out</a>
24 |             </li>
25 |         </ul>
26 |     </div>
27 | </nav>


--------------------------------------------------------------------------------
/APM-Start/src/app/home/menu.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { AuthService } from '../user/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-menu',
 8 |   templateUrl: './menu.component.html'
 9 | })
10 | export class MenuComponent implements OnInit {
11 |   pageTitle: string = 'Acme Product Management';
12 | 
13 |   get isLoggedIn(): boolean {
14 |     return this.authService.isLoggedIn();
15 |   }
16 | 
17 |   get userName(): string {
18 |     if (this.authService.currentUser) {
19 |       return this.authService.currentUser.userName;
20 |     }
21 |     return '';
22 |   }
23 | 
24 |   constructor(private router: Router,
25 |               private authService: AuthService) { }
26 | 
27 |   ngOnInit() {
28 |   }
29 | 
30 |   logOut(): void {
31 |     this.authService.logout();
32 |     this.router.navigate(['/welcome']);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/home/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     template: `
5 |     <h1>This is not the page you were looking for!</h1>
6 |     `
7 | })
8 | export class PageNotFoundComponent { }
9 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/home/shell.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/app/home/shell.component.css


--------------------------------------------------------------------------------
/APM-Start/src/app/home/shell.component.html:
--------------------------------------------------------------------------------
1 | <pm-menu></pm-menu>
2 | 
3 | <div class='container'>
4 |     <router-outlet></router-outlet>
5 | </div>


--------------------------------------------------------------------------------
/APM-Start/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'pm-shell',
 5 |   templateUrl: './shell.component.html',
 6 |   styleUrls: ['./shell.component.css']
 7 | })
 8 | export class ShellComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
 1 | <div class="panel panel-primary">
 2 |     <div class="panel-heading">
 3 |         {{pageTitle}}
 4 |     </div>
 5 |     <div class="panel-body"  >
 6 |         <div class="row" >
 7 |             <img src="./assets/images/logo.jpg" 
 8 |                  class="img-responsive center-block"
 9 |                  style="max-height:300px;padding-bottom:50px"/>
10 |         </div>
11 |         <div class="row"  >
12 |             <div class="text-center">Developed by:</div>
13 |             <h3 class="text-center">Deborah Kurata</h3>
14 | 
15 |             <div class="text-center">@deborahkurata</div>
16 |             <div class="text-center">
17 |                 <a href="http://www.bit.ly/DeborahKsBlog">www.bit.ly/DeborahKsBlog</a>
18 |             </div>
19 |         </div>
20 |     </div>
21 | </div>


--------------------------------------------------------------------------------
/APM-Start/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 |     public pageTitle: string = 'Welcome';
8 | }
9 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/edit/product-edit-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { CanDeactivate } from '@angular/router';
 3 | 
 4 | import { ProductEditComponent } from './product-edit.component';
 5 | 
 6 | @Injectable()
 7 | export class ProductEditGuard implements CanDeactivate<ProductEditComponent> {
 8 | 
 9 |     canDeactivate(component: ProductEditComponent): boolean {
10 |         if (component.isDirty) {
11 |             const productName = component.product.productName || 'New Product';
12 |             return confirm(`Navigate away and lose all changes to ${productName}?`);
13 |         }
14 |         return true;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/edit/product-edit.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/app/products/edit/product-edit.component.css


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/app/products/product-detail.component.css


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute } from '@angular/router';
 3 | 
 4 | import { IProduct } 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: string = 'Product Detail';
13 |     product: IProduct;
14 |     errorMessage: string;
15 | 
16 |     constructor(private productService: ProductService,
17 |                 private router: Router,
18 |                 private route: ActivatedRoute) {
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) {
30 |         this.productService.getProduct(id).subscribe(
31 |           product => this.product = product,
32 |           error => this.errorMessage = <any>error
33 |         );
34 |     }
35 | 
36 |     onBack(): void {
37 |         this.router.navigate(['/products']);
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-list.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |     color: #337AB7;
3 |     font-weight: bold;
4 | }


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-shell/product-shell-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { ProductService } from '../product.service';
 3 | import { IProduct } from '../product';
 4 | 
 5 | @Component({
 6 |     selector: 'pm-product-shell-detail',
 7 |     templateUrl: './product-shell-detail.component.html'
 8 | })
 9 | export class ProductShellDetailComponent implements OnInit {
10 |     pageTitle: string = 'Product Detail';
11 | 
12 |     constructor(private productService: ProductService) { }
13 | 
14 |     ngOnInit() {
15 |     }
16 | 
17 | }
18 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-shell/product-shell-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class='panel panel-primary' *ngIf='products?.length'>
 2 |   <div class='panel-heading'>
 3 |     {{pageTitle}}
 4 |   </div>
 5 | 
 6 |   <div class='panel-body'>
 7 |     <div class='list-group'>
 8 |       <button type='button'
 9 |               class='list-group-item'
10 |               *ngFor='let product of products'>
11 |         {{ product.productName }} ({{ product.productCode }})
12 |       </button>
13 |     </div>
14 |   </div>
15 | </div>
16 | <div *ngIf='errorMessage' class='alert alert-danger'>
17 |   Error: {{ errorMessage }}
18 | </div>


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-shell/product-shell-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | import { IProduct } from '../product';
 4 | import { ProductService } from '../product.service';
 5 | 
 6 | @Component({
 7 |   selector: 'pm-product-shell-list',
 8 |   templateUrl: './product-shell-list.component.html'
 9 | })
10 | export class ProductShellListComponent implements OnInit {
11 |   pageTitle: string = 'Products';
12 |   errorMessage: string;
13 |   products: IProduct[];
14 | 
15 |   constructor(private productService: ProductService) { }
16 | 
17 |   ngOnInit(): void {
18 |     this.productService.getProducts().subscribe(
19 |       (products: IProduct[]) => {
20 |         this.products = products;
21 |       },
22 |       (error: any) => this.errorMessage = <any>error
23 |     );
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-shell/product-shell.component.html:
--------------------------------------------------------------------------------
 1 | <div class='row' *ngIf='monthCount'>
 2 |     <div class='col-md-4'>
 3 |         <h4>
 4 |             Number of months on the market: {{ monthCount }}
 5 |         </h4>
 6 |     </div>
 7 | </div>
 8 | <div class='row'>
 9 |     <div class='col-md-4'>
10 |         <pm-product-shell-list></pm-product-shell-list>
11 |     </div>
12 |     <div class='col-md-8'>
13 |         <pm-product-shell-detail></pm-product-shell-detail>
14 |     </div>
15 | </div>


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product-shell/product-shell.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     templateUrl: './product-shell.component.html'
 5 | })
 6 | export class ProductShellComponent implements OnInit {
 7 |     pageTitle: string = 'Products';
 8 |     monthCount: number;
 9 | 
10 |     constructor() { }
11 | 
12 |     ngOnInit() {
13 |     }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { SharedModule } from '../shared/shared.module';
 5 | 
 6 | import { ProductListComponent } from './product-list.component';
 7 | import { ProductDetailComponent } from './product-detail.component';
 8 | import { ProductEditComponent } from './edit/product-edit.component';
 9 | 
10 | import { ProductService } from './product.service';
11 | import { ProductEditGuard } from './edit/product-edit-guard.service';
12 | 
13 | @NgModule({
14 |   imports: [
15 |     SharedModule,
16 |     RouterModule.forChild([
17 |       { path: '', component: ProductListComponent },
18 |       { path: ':id', component: ProductDetailComponent },
19 |       {
20 |         path: ':id/edit',
21 |         canDeactivate: [ ProductEditGuard ],
22 |         component: ProductEditComponent
23 |       }
24 |     ])
25 |   ],
26 |   declarations: [
27 |     ProductListComponent,
28 |     ProductDetailComponent,
29 |     ProductEditComponent
30 |   ],
31 |   providers: [
32 |     ProductService,
33 |     ProductEditGuard
34 |   ]
35 | })
36 | export class ProductModule { }
37 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/products/product.ts:
--------------------------------------------------------------------------------
 1 | /* Defines the product entity */
 2 | export interface IProduct {
 3 |     id: number | null;
 4 |     productName: string;
 5 |     productCode: string;
 6 |     category: string;
 7 |     tags?: string[];
 8 |     releaseDate: string;
 9 |     price: number;
10 |     description: string;
11 |     starRating: number;
12 |     imageUrl: string;
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/APM-Start/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 |     FormsModule
11 |   ],
12 |   declarations: [
13 |     StarComponent
14 |   ],
15 |   exports: [
16 |     StarComponent,
17 |     CommonModule,
18 |     FormsModule
19 |   ]
20 | })
21 | export class SharedModule { }
22 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/shared/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |     overflow: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/shared/star.component.html:
--------------------------------------------------------------------------------
1 | <div class="crop" [style.width]="starPercent" [title]="rating">
2 |     <div style="width: 86px">
3 |         <span class="glyphicon glyphicon-star"></span>
4 |         <span class="glyphicon glyphicon-star"></span>
5 |         <span class="glyphicon glyphicon-star"></span>
6 |         <span class="glyphicon glyphicon-star"></span>
7 |         <span class="glyphicon glyphicon-star"></span>
8 |     </div>
9 | </div>


--------------------------------------------------------------------------------
/APM-Start/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges } 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: number;
10 |     starPercent: string;
11 | 
12 |     ngOnChanges(): void {
13 |         // Convert x out of 5 starts
14 |         // to y out of 86px width
15 |         this.starPercent = (this.rating * 86 / 5) + 'px';
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/user/auth-guard.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, Router,
 3 |          CanActivate } from '@angular/router';
 4 | 
 5 | import { AuthService } from './auth.service';
 6 | 
 7 | @Injectable()
 8 | export  class AuthGuard implements CanActivate {
 9 | 
10 |     constructor(private authService: AuthService,
11 |                 private router: Router) { }
12 | 
13 |     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
14 |         return this.checkLoggedIn(state.url);
15 |     }
16 | 
17 |     checkLoggedIn(url: string): boolean {
18 |         if (this.authService.isLoggedIn()) {
19 |             return true;
20 |         }
21 | 
22 |         // Retain the attempted URL for redirection
23 |         this.authService.redirectUrl = url;
24 |         this.router.navigate(['/login']);
25 |         return false;
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/user/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { IUser } from './user';
 4 | 
 5 | @Injectable()
 6 | export class AuthService {
 7 |     currentUser: IUser | null;
 8 |     redirectUrl: string;
 9 | 
10 |     constructor() {  }
11 | 
12 |     isLoggedIn(): boolean {
13 |         return !!this.currentUser;
14 |     }
15 | 
16 |     login(userName: string, password: string): void {
17 |         // Code here would log into a back end service
18 |         // and return user information
19 |         // This is just hard-coded here.
20 |         this.currentUser = {
21 |             id: 2,
22 |             userName: userName,
23 |             isAdmin: false
24 |         };
25 |     }
26 | 
27 |     logout(): void {
28 |         this.currentUser = null;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/user/login.component.css:
--------------------------------------------------------------------------------
1 | div.panel {
2 |     margin: 40px 0;
3 |     width: 700px;
4 | }


--------------------------------------------------------------------------------
/APM-Start/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule } from '@angular/router';
 3 | 
 4 | import { LoginComponent } from './login.component';
 5 | import { AuthService } from './auth.service';
 6 | import { AuthGuard } from './auth-guard.service';
 7 | 
 8 | import { SharedModule } from '../shared/shared.module';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     SharedModule,
13 |     RouterModule.forChild([
14 |       { path: 'login', component: LoginComponent }
15 |     ])
16 |   ],
17 |   declarations: [
18 |     LoginComponent
19 |   ],
20 |   providers: [
21 |     AuthService,
22 |     AuthGuard
23 |   ]
24 | })
25 | export class UserModule { }
26 | 


--------------------------------------------------------------------------------
/APM-Start/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 |     id: number;
4 |     userName: string;
5 |     isAdmin: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/APM-Start/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/assets/.gitkeep


--------------------------------------------------------------------------------
/APM-Start/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/assets/images/logo.jpg


--------------------------------------------------------------------------------
/APM-Start/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/APM-Start/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/APM-Start/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Communication/26cb70879bc406a6674c17826fb7534c13159409/APM-Start/src/favicon.ico


--------------------------------------------------------------------------------
/APM-Start/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Acme Product Management</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <pm-root></pm-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/APM-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.log(err));
13 | 


--------------------------------------------------------------------------------
/APM-Start/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | li {
3 |     font-size: large;
4 | }
5 | 
6 | div.panel-heading {
7 |    font-size: x-large;
8 | }


--------------------------------------------------------------------------------
/APM-Start/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/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/APM-Start/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/APM-Start/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/APM-Start/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/APM-Start/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 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 | 


--------------------------------------------------------------------------------