/design-patterns-in-angular

Deprecated | new project: https://github.com/Itchimonji/design-patterns-in-typescript

Primary LanguageTypeScript

Design Patterns In Angular

  • Run ng serve for a dev server. Navigate to http://localhost:4201/
  • Run ng generate module singleton --route singleton --module app.module to create a feature module with routing

Creational Patterns

Abstract Factory

  • short description: create a related object family
  • applicability: system is capsulated of the creation & composition of its models
  • visual resource: https://refactoring.guru/design-patterns/abstract-factory
  • expandability: concrete factories as singletons, factory method for creation of concrete objects, for too much objects you can use the Prototype Pattern
UML

Abstract Factory

UML: example of this repo

Abstract Factory Example

Singleton

UML

Singleton

UML: example of this repo

Singleton Example

Prototype (Clone)

  • short description: clone/copy a component
  • applicability: runtime specification of objects (dynamic loading), to many different objects for factories
  • visual resource: https://refactoring.guru/design-patterns/prototype
  • expandability: implementation of prototype manager (hold all prototype instances), deep-cloinig,
UML

Prototype

UML: example of this repo

Prototype Example

Builder

UML

Builder

UML: example of this repo

Example

Factory Method (Virtual Constructor)

UML

Factory Method

UML: example of this repo

Factory Method Example

Structural Patterns

Adapter (Wrapper)

UML

Adapter

UML: example of this repo

Adapter Example

Bridge

UML

Bridge

UML: example of this repo

Bridge Example

Composite (Object Tree)

UML

Composite

UML: example of this repo

Composite Example

Decorator (Wrapper)

UML

Decorator

UML: example of this repo

Decorator Example

Facade

UML

Facade

UML: example of this repo

Facade Example

Flyweight (Cache)

UML

Flyweight

UML: example of this repo

Flyweight Example

Proxy

UML

Proxy

UML: example of this repo

Proxy Example

Mediator

UML

Mediator

UML: example of this repo

Mediator Example

Iterator

UML

Iterator

UML: example of this repo

Iterator Example

Memento

UML

Memento

UML: example of this repo

Memento Example

Strategy

UML

Strategy

UML: example of this repo

Strategy Example

Command

UML

Command

UML: example of this repo

Command Example

Observer

UML

Observer

UML: example of this repo

Observer Example

Visitor

UML

Visitor

UML: example of this repo

Visitor Example

State

UML

State

UML: example of this repo

State Example

Template Method

  • short description: defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure
  • visual resource: https://refactoring.guru/design-patterns/state
UML

Template Method

UML: example of this repo

Template Method Example

Chain Of Responsibility

  • short description: pass requests along a chain of handlers. Upon receiving a request, each handler decides either to process the request or to pass it to the next handler in the chain
  • visual resource: https://refactoring.guru/design-patterns/state
UML

Chain of Responsibility Method

UML: example of this repo

Chain of Responsibility Method Example

Resources