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

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

• Design Patterns by GoF
• https://refactoring.guru/
• https://www.geeksforgeeks.org/