2 |
--------------------------------------------------------------------------------
/APM-Demo2/src/app/user/state/user.reducer.ts:
--------------------------------------------------------------------------------
1 | // Homework
2 | import { User } from '../user';
3 |
4 | /* NgRx */
5 | import { createReducer, on, createFeatureSelector, createSelector } from '@ngrx/store';
6 | import * as UserActions from './user.actions';
7 |
8 | // State for this feature (User)
9 | export interface UserState {
10 | maskUserName: boolean;
11 | currentUser: User;
12 | }
13 |
14 | const initialState: UserState = {
15 | maskUserName: true,
16 | currentUser: null
17 | };
18 |
19 | // Selector functions
20 | const getUserFeatureState = createFeatureSelector
3 |
11 |
12 |
19 |
2 |
--------------------------------------------------------------------------------
/APM-Demo1/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 | 
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
--------------------------------------------------------------------------------
/APM-Demo2/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 |
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
--------------------------------------------------------------------------------
/APM-Demo3/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 |
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
--------------------------------------------------------------------------------
/APM-Demo4/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 |
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
--------------------------------------------------------------------------------
/APM-Demo5/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 |
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
--------------------------------------------------------------------------------
/APM-Demo5/README.md:
--------------------------------------------------------------------------------
1 | # APM-Demo5
2 |
3 | Demo of container/presentational pattern and OnPush change detection strategy.
4 |
5 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
6 |
7 | ## Development server
8 |
9 | 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.
10 |
11 | ## Code scaffolding
12 |
13 | 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`.
14 |
15 | ## Build
16 |
17 | 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.
18 |
19 | ## Running unit tests
20 |
21 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
22 |
23 | ## Running end-to-end tests
24 |
25 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
26 |
27 | ## Further help
28 |
29 | 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).
30 |
--------------------------------------------------------------------------------
/APM-Demo0/src/app/user/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } 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 implements OnInit {
12 | pageTitle = 'Log In';
13 |
14 | maskUserName: boolean;
15 |
16 | constructor(private authService: AuthService, private router: Router) { }
17 |
18 | ngOnInit(): void {
19 |
20 | }
21 |
22 | cancel(): void {
23 | this.router.navigate(['welcome']);
24 | }
25 |
26 | checkChanged(): void {
27 | this.maskUserName = !this.maskUserName;
28 | }
29 |
30 | login(loginForm: NgForm): void {
31 | if (loginForm && loginForm.valid) {
32 | const userName = loginForm.form.value.userName;
33 | const password = loginForm.form.value.password;
34 | this.authService.login(userName, password);
35 |
36 | if (this.authService.redirectUrl) {
37 | this.router.navigateByUrl(this.authService.redirectUrl);
38 | } else {
39 | this.router.navigate(['/products']);
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular-ngrx-GettingStarted
2 | Materials for NgRx course.
3 |
4 | `APM-Demo0`: The starter files for this course. **Use this to code along with the course**.
5 |
6 | `APM-Demo1`: Completed files after the *First Look at NgRx* module. It demonstrates a very simple NgRx example.
7 |
8 | `APM-Demo2`: Completed files after the *Strongly Typing Actions with Action Creators* module. It refactors the simple example to include developer tooling support and strong typing.
9 |
10 | `APM-Demo3`: Completed files after the *Working with Effects* module. It adds an effect to retrieve data via http. NOTE: Once we move the data retrieval to actions and the store, the create, update, and delete operations no longer work. These features are implemented with the store in the next demo.
11 |
12 | `APM-Demo4`: Completed files after the *Performing Update Operations* module. It adds the code needed for create, update, and delete operations via http.
13 |
14 | `APM-Demo5`: Completed files after the *Architectural Considerations* module. It implements the container/presentational component pattern and the OnPush change detection strategy.
15 |
16 | NOTE:
17 | - June 30, 2020: This code was modified to Angular version 9 and NgRx version 9. See the CHANGELOG.md file for details.
18 |
--------------------------------------------------------------------------------
/APM-Demo2/README.md:
--------------------------------------------------------------------------------
1 | # APM-Demo2
2 |
3 | Demo of a basic implementation of NgRx for a simple boolean flag, but using strong typing. Includes implementation of the dev tools.
4 |
5 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
6 |
7 | ## Development server
8 |
9 | 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.
10 |
11 | ## Code scaffolding
12 |
13 | 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`.
14 |
15 | ## Build
16 |
17 | 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.
18 |
19 | ## Running unit tests
20 |
21 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
22 |
23 | ## Running end-to-end tests
24 |
25 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
26 |
27 | ## Further help
28 |
29 | 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).
30 |
--------------------------------------------------------------------------------
/APM-Demo0/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-Demo5/src/app/products/state/actions/product-api.actions.ts:
--------------------------------------------------------------------------------
1 | import { Product } from '../../product';
2 |
3 | /* NgRx */
4 | import { createAction, props } from '@ngrx/store';
5 |
6 | export const loadProductsSuccess = createAction(
7 | '[Product API] Load Success',
8 | props<{ products: Product[] }>()
9 | );
10 |
11 | export const loadProductsFailure = createAction(
12 | '[Product API] Load Fail',
13 | props<{ error: string }>()
14 | );
15 |
16 | export const updateProductSuccess = createAction(
17 | '[Product API] Update Product Success',
18 | props<{ product: Product }>()
19 | );
20 |
21 | export const updateProductFailure = createAction(
22 | '[Product API] Update Product Fail',
23 | props<{ error: string }>()
24 | );
25 |
26 | export const createProductSuccess = createAction(
27 | '[Product API] Create Product Success',
28 | props<{ product: Product }>()
29 | );
30 |
31 | export const createProductFailure = createAction(
32 | '[Product API] Create Product Fail',
33 | props<{ error: string }>()
34 | );
35 |
36 | export const deleteProductSuccess = createAction(
37 | '[Product API] Delete Product Success',
38 | props<{ productId: number }>()
39 | );
40 |
41 | export const deleteProductFailure = createAction(
42 | '[Product API] Delete Product Fail',
43 | props<{ error: string }>()
44 | );
45 |
--------------------------------------------------------------------------------
/APM-Demo1/README.md:
--------------------------------------------------------------------------------
1 | # APM-Demo1
2 |
3 | Demo of the most basic implementation of NgRx for a simple boolean flag.
4 |
5 | The goal of this demo is to introduce the parts of NgRx for a simple, easy to reason about, use case.
6 |
7 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
8 |
9 | ## Development server
10 |
11 | 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.
12 |
13 | ## Code scaffolding
14 |
15 | 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`.
16 |
17 | ## Build
18 |
19 | 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.
20 |
21 | ## Running unit tests
22 |
23 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
24 |
25 | ## Running end-to-end tests
26 |
27 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
28 |
29 | ## Further help
30 |
31 | 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).
32 |
--------------------------------------------------------------------------------
/APM-Demo0/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo1/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo2/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo3/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo4/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo5/src/app/home/menu.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/APM-Demo1/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 | /* NgRx */
21 | import { StoreModule } from '@ngrx/store';
22 |
23 | @NgModule({
24 | imports: [
25 | BrowserModule,
26 | HttpClientModule,
27 | HttpClientInMemoryWebApiModule.forRoot(ProductData),
28 | UserModule,
29 | AppRoutingModule,
30 | StoreModule.forRoot({})
31 | ],
32 | declarations: [
33 | AppComponent,
34 | ShellComponent,
35 | MenuComponent,
36 | WelcomeComponent,
37 | PageNotFoundComponent
38 | ],
39 | bootstrap: [AppComponent]
40 | })
41 | export class AppModule { }
42 |
--------------------------------------------------------------------------------
/APM-Demo3/README.md:
--------------------------------------------------------------------------------
1 | # APM-Demo3
2 |
3 | Demo of using effects for retrieving and displaying data.
4 | NOTE: The create, update, and delete operations no longer work in this version of the demo since we moved only the retrieve to NgRx.
5 | The create, update, and delete are implemented with NgRx in Demo4.
6 |
7 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
8 |
9 | ## Development server
10 |
11 | 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.
12 |
13 | ## Code scaffolding
14 |
15 | 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`.
16 |
17 | ## Build
18 |
19 | 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.
20 |
21 | ## Running unit tests
22 |
23 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
24 |
25 | ## Running end-to-end tests
26 |
27 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
28 |
29 | ## Further help
30 |
31 | 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).
32 |
--------------------------------------------------------------------------------
/APM-Demo5/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
35 |
7 |
13 |
8 |
11 |
12 |
11 |
14 |
34 | Developed by:
15 |
24 |
33 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo0/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo1/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo2/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo3/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo4/src/app/products/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
4 | {{pageTitle}}
5 |
6 |
7 |
9 |
20 |
21 |
40 |
10 |
18 |
19 |
43 | Error: {{ errorMessage }}
44 |
--------------------------------------------------------------------------------
/APM-Demo1/src/app/user/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NgForm } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 |
5 | import { AuthService } from './auth.service';
6 |
7 | /* NgRx */
8 | import { Store } from '@ngrx/store';
9 |
10 | @Component({
11 | templateUrl: './login.component.html',
12 | styleUrls: ['./login.component.css']
13 | })
14 | export class LoginComponent implements OnInit {
15 | pageTitle = 'Log In';
16 |
17 | maskUserName: boolean;
18 |
19 | constructor(private store: Store