@ngxp/pizza-palace

This project was created to teach Best Practices for developing Angular applications.

Setup

git clone https://github.com/ngxp/pizza-palace.git
cd pizza-palace
npm install
npm start

Modularization

Modularization of Angular projects using Nx Workspace.

Modularize your project using libraries and keep your application lean.

👩‍🔬 Excercise #1

git reset --hard
git clean -f -d
git checkout workshop/step-1

👨‍🏫 Solution #1

Delegate routes to lazy-loaded feature libraries.

👩‍🔬 Excercise #2

git reset --hard
git clean -f -d
git checkout workshop/step-2

👨‍🏫 Solution #2

Separate lazy-loaded feature libraries from shared libraries, even if they cover the same domain.

👩‍🔬 Excercise #3

git reset --hard
git clean -f -d
git checkout workshop/step-3

👨‍🏫 Solution #3

Components

Best practices for maintainable, reusable components.

Keep components small.

👩‍🔬 Excercise #4

git reset --hard
git clean -f -d
git checkout workshop/step-4

👨‍🏫 Solution #4

Keep components stateless.

👩‍🔬 Excercise #5

git reset --hard
git clean -f -d
git checkout workshop/step-5

👨‍🏫 Solution #5

Keep business logic out of components.

👩‍🔬 Excercise #6

git reset --hard
git clean -f -d
git checkout workshop/step-6

👨‍🏫 Solution #6

State Management

Domain-driven state management using NgRx.

Use selectors to create projections of your state.

👩‍🔬 Excercise #7

git reset --hard
git clean -f -d
git checkout workshop/step-7

👨‍🏫 Solution #7

Let actions reflect your domain events.

👩‍🔬 Excercise #8

git reset --hard
git clean -f -d
git checkout workshop/step-8

👨‍🏫 Solution #8

Keep your feature state private

👩‍🔬 Excercise #9

git reset --hard
git clean -f -d
git checkout workshop/step-9

👨‍🏫 Solution #9

💅 Bonus Excercise 🤓

👩‍🔬 Excercise #10

git reset --hard
git clean -f -d
git checkout workshop/step-0

👨‍🏫 Solution #10