lmfinney / toh-ngrx4

Angular - Tour of Heroes - Modularization, Observables, @ngrx4, etc.

Getting Started

This is a modification of John Papa's version of the Tour of Heroes tutorial application. The point of this fork is to show features that are current best practices in Angular application design beyond what is covered by the tutorial.

Compared to the base version, this version makes the following changes in consecutive commits:

1. Moving the components to their own modules.
2. Removing the conversion of Observables to Promises.
3. Moving data management into @ngrx v4 store and effects (combined with implementing the Presentational/Container component pattern).

Further steps that aren't included at this point could include the following:

1. Internationalization support.
2. Introducing Reactive forms for the search box.
3. Enforcing immutability in the @ngrx store.
4. Using ngrx-enums to remove boilerplate in @ngrx actions and reducers.

Thanks to Nick Klepinger for providing inspiration through an earlier update of Tour of Heroes using older versions of @ngrx, etc.

I presented on this project at Angular Lunch in August 2017: Presentation

Get the Code

git clone https://github.com/LMFinney/toh-ngrx4.git
cd toh-ngrx4
npm i

Development server

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.

If you want to use a different port (say 4201), run ng serve --port 4201 and navigate to http://localhost:4201/.

Build

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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

This project was generated with Angular CLI version 1.2.0.