Design Patterns In Angular

Run npm install to install the needed npm packages
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

UML: example of this repo

Singleton

short description: hold one instance globally
visual resource: https://refactoring.guru/design-patterns/singleton

UML

UML: example of this repo

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

UML: example of this repo

Builder

short description: blueprint for different products with different features
visual resource: https://refactoring.guru/design-patterns/builder
expandability: abstract class or interface isn't needed for "product"-objects

UML

UML: example of this repo

Factory Method (Virtual Constructor)

short description: provide an interface for creating objects in superclass
visual resource: https://refactoring.guru/design-patterns/factory-method
expandability: parameterized contructor for universal factory method (like abstract factory)

UML

UML: example of this repo

Structural Patterns

Adapter (Wrapper)

short description: allows objects with incompatible interfaces to collaborate
visual resource: https://refactoring.guru/design-patterns/adapter
expandability: 2-way-adapter for aptee and target (multiple inheritance)

UML

UML: example of this repo

Bridge

short description: separate the abstraction from the implementation
visual resource: https://refactoring.guru/design-patterns/bridge

UML

UML: example of this repo

Composite (Object Tree)

short description: compose objects into tree structures
visual resource: https://refactoring.guru/design-patterns/composite

UML

UML: example of this repo

Decorator (Wrapper)

short description: attach new behaviors to objects by placing these objects inside special wrapper objects that contain the behaviors
visual resource: https://refactoring.guru/design-patterns/decorator

UML

UML: example of this repo

Facade

short description: provides a simplified interface to a library
visual resource: https://refactoring.guru/design-patterns/facade

UML

UML: example of this repo

Flyweight (Cache)

short description: sharing common parts of state between multiple objects instead of keeping all of the data in each object
visual resource: https://refactoring.guru/design-patterns/flyweight

UML

UML: example of this repo

Proxy

short description: controls access to the original object
visual resource: https://refactoring.guru/design-patterns/proxy

UML

UML: example of this repo

Mediator

short description: reduce chaotic dependencies between objects; only collaboration via a mediator
visual resource: https://refactoring.guru/design-patterns/mediator

UML

UML: example of this repo

Iterator

short description: traverse elements of a collection without exposing its underlying representation
visual resource: https://refactoring.guru/design-patterns/iterator

UML

UML: example of this repo

Memento

short description: save and restore the previous state of an object without revealing the details of its implementation
visual resource: https://refactoring.guru/design-patterns/memento

UML

UML: example of this repo

Strategy

short description: define a family of algorithms, put each of them into a separate class, and make their objects interchangeable
visual resource: https://refactoring.guru/design-patterns/strategy

UML

UML: example of this repo

Command

short description: turns a request into a stand-alone object that contains all information about the request
visual resource: https://refactoring.guru/design-patterns/command

UML

UML: example of this repo

Observer

short description: define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing
visual resource: https://refactoring.guru/design-patterns/observer

UML

UML: example of this repo

Visitor

short description: separate algorithms from the objects on which they operate
visual resource: https://refactoring.guru/design-patterns/visitor

UML

UML: example of this repo

State

short description: lets an object alter its behavior when its internal state changes. It appears as if the object changed its class
visual resource: https://refactoring.guru/design-patterns/state

UML

UML: example of this repo

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

UML: example of this repo

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

UML: example of this repo

Resources