pizza-palace

KO | EN

gitlite — search

#javascript #ai #typescript #llm #machine-learning #macos #awesome #cli #kubernetes #vue #awesome-list #openai #ios #open-source

(★ 10)

An example Angular application that uses Nx Workspace and Ngrx to show how to build modularized frontends in a monorepo.

pizza-palace Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @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](https://github.com/ngxp/pizza-palace/tree/workshop/step-1)

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

👨‍🏫 [Solution #1](https://github.com/ngxp/pizza-palace/tree/workshop/step-1-solution)

#### Delegate routes to lazy-loaded feature libraries.

👩‍🔬 [Excercise #2](https://github.com/ngxp/pizza-palace/tree/workshop/step-2)

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

👨‍🏫 [Solution #2](https://github.com/ngxp/pizza-palace/tree/workshop/step-2-solution)

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

👩‍🔬 [Excercise #3](https://github.com/ngxp/pizza-palace/tree/workshop/step-3)

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

👨‍🏫 [Solution #3](https://github.com/ngxp/pizza-palace/tree/workshop/step-3-solution)

## Components

Best practices for maintainable, reusable components.

#### Keep components small.

👩‍🔬 [Excercise #4](https://github.com/ngxp/pizza-palace/tree/workshop/step-4)

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

👨‍🏫 [Solution #4](https://github.com/ngxp/pizza-palace/tree/workshop/step-4-solution)

#### Keep components stateless.

👩‍🔬 [Excercise #5](https://github.com/ngxp/pizza-palace/tree/workshop/step-5)

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

👨‍🏫 [Solution #5](https://github.com/ngxp/pizza-palace/tree/workshop/step-5-solution)

#### Keep business logic out of components.

👩‍🔬 [Excercise #6](https://github.com/ngxp/pizza-palace/tree/workshop/step-6)

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

👨‍🏫 [Solution #6](https://github.com/ngxp/pizza-palace/tree/workshop/step-6-solution)

## State Management

Domain-driven state management using NgRx.

#### Use selectors to create projections of your state.

👩‍🔬 [Excercise #7](https://github.com/ngxp/pizza-palace/tree/workshop/step-7)

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

👨‍🏫 [Solution #7](https://github.com/ngxp/pizza-palace/tree/workshop/step-7-solution)

#### Let actions reflect your domain events.

👩‍🔬 [Excercise #8](https://github.com/ngxp/pizza-palace/tree/workshop/step-8)

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

👨‍🏫 [Solution #8](https://github.com/ngxp/pizza-palace/tree/workshop/step-8-solution)

#### Keep your feature state private

👩‍🔬 [Excercise #9](https://github.com/ngxp/pizza-palace/tree/workshop/step-9)

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

👨‍🏫 [Solution #9](https://github.com/ngxp/pizza-palace/tree/workshop/step-9-solution)

#### 💅 Bonus Excercise 🤓

👩‍🔬 [Excercise #10](https://github.com/ngxp/pizza-palace/tree/workshop/step-10)

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

👨‍🏫 [Solution #10](https://github.com/ngxp/pizza-palace/tree/workshop/step-10-solution)

pizza-palace

pizza-palace Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

pizza-palace

pizza-palace Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README