Skip to content

Itchimonji/design-patterns-in-angular

Repository files navigation

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 Pattern
UML

Abstract Factory

UML: example of this repo

Abstract Factory Example

Singleton

UML

Singleton

UML: example of this repo

Singleton Example

(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/
  • expandability: implementation of manager (hold all 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

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