{"id":30423,"date":"2025-02-05T09:27:32","date_gmt":"2025-02-05T08:27:32","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=30423"},"modified":"2025-02-05T09:32:10","modified_gmt":"2025-02-05T08:32:10","slug":"dependency-injection-typescript-angular-part-0","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/","title":{"rendered":"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80"},"content":{"rendered":"\n

This is the 1st of a series of articles<\/em><\/strong> that have the goal to explore and understand a topic that I see too much neglected in the front-end world\u200a\u2014\u200aDependency Injection (DI) & Design patterns<\/em><\/strong>.<\/p>\n\n\n\n

You will start writing and understanding the basics of DI<\/em>\u200a<\/strong>\u2014\u200awhat is it, how does it work and how works in Angular<\/a>.<\/p>\n\n\n\n

Our journey will continue flying between the SOLID<\/em><\/strong> principles, followed by some stops here and there to visit different design patterns and the relative use cases. You also may encounter more stuff along the way (this means that i could change my mind and add more things to the roadmap \ud83d\ude0e)<\/p>\n\n\n\n

Let\u2019s stop thinking about the whole journey\u200a\u2014\u200afocus on what\u2019s now!<\/p>\n\n\n\n

What Dependency Injection (DI) is?<\/strong><\/h2>\n\n\n\n

Before getting into it here is a very brief and concise description of what the DI is.<\/p>\n\n\n\n

\n
\n

DI is process that encourages the separation of concerns, thereby improving the maintainability and scalability of software systems.
At its core, DI is a technique employed to achieve Inversion of Control (IoC). IoC means that the control over the flow of a program\u2019s execution is inverted, with the framework or container managing the dependencies and their life cycles.<\/p>\n<\/blockquote>\n<\/div><\/div>\n\n\n\n

Is not that complex, isn\u2019t it? You and me, use this tool everyday without even noticing it. It\u2019s time to understand the magic behind.<\/p>\n\n\n\n

Let\u2019s proceed and see\u2026<\/p>\n\n\n\n

Who are the actors in DI?<\/strong><\/h2>\n\n\n\n

There are three major actors that are part of this movie called Dependency Injection.<\/p>\n\n\n\n

    \n
  1. Dependency,<\/li>\n\n\n\n
  2. Client,<\/li>\n\n\n\n
  3. Injector (optional).<\/li>\n<\/ol>\n\n\n\n

    Everyone of them has it\u2019s own importance and the whole flow wouldn\u2019t exist without one of them.<\/p>\n\n\n\n

    Dependency<\/strong><\/h4>\n\n\n\n

    A dependency, in this context, refers to an object or service that another object relies upon to perform its function.<\/p>\n\n\n\n

    Client<\/strong><\/h4>\n\n\n\n

    The client is the class or component that requires a dependency to fulfill its responsibilities. It is the class that will receive the injected dependency.<\/p>\n\n\n\n

    Injector<\/strong><\/h4>\n\n\n\n

    The injector is responsible for providing the necessary dependencies to the client. It acts as an intermediary, resolving and injecting the dependencies into the client class\u200a\u2014\u200ahere is where the IoC takes place<\/em><\/strong>.<\/p>\n\n\n\n

    The Injector<\/em><\/strong> is in charge to provide us the correct Service\u2019s instance.<\/p>\n\n\n\n

    That was a brief introduction of who\u2019s in charge of what, but\u2026<\/p>\n\n\n\n

    How does DI works without IoC?<\/strong><\/h2>\n\n\n\n

    You read that the Injector<\/em><\/strong> is an optional actor in this film, and it is.<\/p>\n\n\n\n

    Having someone that can do the work for us does not mean that you can ignore how it works behind the scene.<\/p>\n\n\n\n

    This chapter will be about use the DI without any help, but our brain.<\/p>\n\n\n\n

    So, let\u2019s see\u2026<\/p>\n\n\n\n

    DI in Vanilla TypeScript<\/strong><\/h4>\n\n\n\n

    Below you can find a little Stackblitz where DI is used, by hand.<\/p>\n\n\n\n

    By hand means that you are in charge of passing the correct instance of a service to another one that need it to perform some actions.<\/p>\n\n\n\n

    In the example below we have 2 classes:<\/p>\n\n\n\n

      \n
    1. Counter<\/em><\/strong>,<\/li>\n\n\n\n
    2. ElementHandler<\/em><\/strong><\/li>\n<\/ol>\n\n\n\n

      Counter<\/strong><\/h4>\n\n\n\n

      The Counter<\/em><\/strong> class uses the ElementHandler<\/em><\/strong> class to perform some simple actions on the HTMLElement<\/em><\/strong> that represent the Counter<\/em><\/strong> that you see on the screen.<\/p>\n\n\n\n

      Pay attention to the Counter\u2019s class constructor<\/em><\/strong>\u200a\u2014\u200athe argument is a variable of type ElementHandler<\/em><\/strong>, the other class that you are going to see.<\/p>\n\n\n\n

      import { ElementHandler } from '.\/element';

      export class Counter {
        private _elementHandler: ElementHandler;
        private _counter = 0;

        constructor(element: ElementHandler) {
          this._elementHandler = element;
        }

        setUpCounter() {
          this._elementHandler.attachEventListener('click', () =>
            this.setCounter(this._counter + 1)
          );

          this.setCounter(0);
        }

        private setCounter(count: number) {
          this._counter = count;
          this._elementHandler.setInnerHtml(`count is ${this._counter}`);
        }
      }<\/pre>\n\n\n\n
      ElementHandler<\/strong><\/h4>\n\n\n\n
      The ElementHandler<\/em><\/strong> class is pretty straight forward\u200a\u2014\u200ait acts as a wrapper for some basic element management (get an Element and add an event to it).<\/p>\n\n\n\n
      export class ElementHandler {
        private _element: HTMLElement | null = null;
        private _id: string;

        constructor(id: string) {
          this._id = id;
          this.getElementById(this._id);
        }

        setInnerHtml(value: string) {
          if (this._element) this._element.innerHTML = value;
        }

        attachEventListener(event: keyof HTMLElementEventMap, cb: any) {
          if (this._element) this._element.addEventListener(event, cb);
        }

        private getElementById(id: string) {
          this._element = document.querySelector<HTMLButtonElement>(id)!;
        }
      }<\/pre>\n\n\n\n
      Putting all together in the\u2026<\/p>\n\n\n\n
      main.ts<\/strong><\/h4>\n\n\n\n
      The main file is pretty small, but these are the only lines of code that you need to consider.<\/p>\n\n\n\n
      As you can see we are manually creating the instances of the services<\/em><\/strong>.<\/p>\n\n\n\n
      Notice that the elementHandler<\/em><\/strong> variable is the argument for the Counter class<\/em><\/strong>, as you saw when you read about it.<\/p>\n\n\n\n
      const elementHandler = new ElementHandler('#counter');
      const counter = new Counter(elementHandler);

      counter.setUpCounter();<\/pre>\n\n\n\n
      Here<\/strong><\/a> is a project made with Stackblitz that you can use to play around.<\/p>\n\n\n\n
      How does DI works with IoC?<\/strong><\/h3>\n\n\n\n
      Well, DI in a nutshell could be explained like this:<\/p>\n\n\n\n
      \"\"\/
      Liam \u201cInjector\u201d Neeson from Taken 2<\/figcaption><\/figure>\n\n\n\n
      Or\u2026 if you want to act as the \u201cSerious\u201d Developer you are, like this:<\/p>\n\n\n\n
      \"\"\/
      Injector diagram<\/figcaption><\/figure>\n\n\n\n
      You can image the Injector<\/em><\/strong> like a bus, which is filled with all the instances of all our Services. When a component\u200a\u2014\u200ain this example MyComponent<\/em><\/strong> aka the Client\u200a<\/em><\/strong>\u2014\u200aask for a specific class\u200a\u2014\u200ain this case MyService aka the dependency\u200a<\/em><\/strong>\u2014\u200a<\/em>the Injector will search within this bus and instance that can satisfy the client request. The founded dependency will be provided to the client, eventually.<\/p>\n\n\n\n
      In the same StackBlitz above you can see how IoC can be achieve in TypeScript<\/em><\/strong>, using inversify<\/em><\/strong><\/a>\u200a<\/em><\/strong>\u2014\u200aone of the external library available in the scene.<\/p>\n\n\n\n
      I will not go in deep of how inversify<\/em><\/strong> works in detail, because it\u2019s not our focus. You just need to understand that, under the hood, it does what you read previously.<\/p>\n\n\n\n
      Here is an updated version of the code that makes use of inversify<\/p>\n\n\n\n
      main.ts with inversify<\/strong><\/h4>\n\n\n\n
      import { Counter } from '.\/counter.ts';
      import { ElementHandler } from '.\/element.ts';
      import { Container } from 'inversify';

      const container = new Container();

      container.bind<Counter>(Counter).toSelf();
      container.bind<ElementHandler>(ElementHandler).toConstantValue(new ElementHandler('#counterIoC'));

      const counterIoC = container.get(Counter);

      counterIoC.setUpCounter();<\/pre>\n\n\n\n
      Something is starting to cook here and the things begin more technical. One question could easily arise\u2026<\/p>\n\n\n\n
      Which are the advantages of DI?<\/strong><\/h3>\n\n\n\n
      Well, that\u2019s a really good question my friend.<\/p>\n\n\n\n
      You can identify three major advantages:<\/p>\n\n\n\n
        \n
      1. Modularity,<\/li>\n\n\n\n
      2. Testing,<\/li>\n\n\n\n
      3. Readability and Maintainability.<\/li>\n<\/ol>\n\n\n\n
        Modularity<\/strong><\/h4>\n\n\n\n
        DI promotes modularity by decoupling components, making it easier to replace or update individual parts of the system.<\/p>\n\n\n\n
        This is also the S<\/em><\/strong> of the SOLID<\/em><\/strong> principles, which stands for Single-responsibility principle\u200a<\/em><\/strong>\u2014\u200awhich means that a class should do one job, and one job only. Nothing more, nothing less.<\/p>\n\n\n\n
        You are going to encounter all the letters of the SOLID <\/em><\/strong>principles, because they are the pillars for a clean code and a clean architecture.<\/p>\n\n\n\n
        Testing<\/strong><\/h4>\n\n\n\n
        It facilitates unit testing by allowing dependencies to be mocked or substituted during testing.<\/p>\n\n\n\n
        Remember that you are working with, hopefully, small classes that do one job only\u200a\u2014\u200athey are easier to test as a consequence!<\/p>\n\n\n\n
        Readability and Maintainability<\/strong><\/h4>\n\n\n\n
        Code becomes more readable as dependencies are explicitly defined and separated from the client\u2019s logic.<\/p>\n\n\n\n
        Our smaller class are handy here as well. Less code to read and to understand and, if you want to explore the connected dependencies, they are all listed in an explicit way.<\/p>\n\n\n\n
        Now\u2026 you saw the actors that are acting in this movie. Understood how does it work with our special guest Liam Neeson. Examinated the advantages, but\u2026<\/p>\n\n\n\n
        How does it work within Angular?<\/strong><\/h3>\n\n\n\n
        This will be our next topic, that will be addressed in a dedicated article that you will find here in some days.<\/p>\n\n\n\n
        \n\n\n\n
        Thanks for sticking with me and hope that everything is clear so far.<\/p>\n\n\n\n
        The journey will continue and i will be glad if you want to enjoy the ride with me till the last article of the serie and maybe explore more of mine.<\/p>\n\n\n\n
        See you in the next one,
        G.<\/p>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        This is the 1st of a series of articles that have the goal to explore and understand a topic that I see too much neglected in the front-end world\u200a\u2014\u200aDependency Injection (DI) & Design patterns. You will start writing and understanding the basics of DI\u200a\u2014\u200awhat is it, how does it work and how works in Angular.… Read more<\/a><\/p>\n","protected":false},"author":302,"featured_media":31919,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[4141,9907],"collections":[],"class_list":{"0":"post-30423","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-angular","9":"tag-frameworks","10":"entry"},"yoast_head":"\nDependency Injection (DI) in TypeScript and Angular: Part 0<\/title>\n<meta name=\"description\" content=\"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80\" \/>\n<meta property=\"og:description\" content=\"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-05T08:27:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-05T08:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Giorgio Galassi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Giorgio Galassi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\"},\"author\":{\"name\":\"Giorgio Galassi\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/19fc0726e8a2c812a1a85816899fe69a\"},\"headline\":\"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80\",\"datePublished\":\"2025-02-05T08:27:32+00:00\",\"dateModified\":\"2025-02-05T08:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\"},\"wordCount\":1152,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp\",\"keywords\":[\"Angular\",\"Frameworks\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\",\"name\":\"Dependency Injection (DI) in TypeScript and Angular: Part 0\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp\",\"datePublished\":\"2025-02-05T08:27:32+00:00\",\"dateModified\":\"2025-02-05T08:32:10+00:00\",\"description\":\"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/19fc0726e8a2c812a1a85816899fe69a\",\"name\":\"Giorgio Galassi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/profile-big-4-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/profile-big-4-100x100.jpeg\",\"caption\":\"Giorgio Galassi\"},\"description\":\"Giorgio is a Senior Frontend Developer with nearly 8 years of experience building dynamic, user-focused web applications. Specializing in Angular, he also keeps an eye on other frontend frameworks and technologies, always seeking innovative approaches to problem-solving. Beyond coding, Giorgio is deeply involved in the developer community. As a proud Organizer of GDG Roma Citt\u00e0, he fosters knowledge-sharing and collaboration among peers. He enjoys making complex topics more accessible and helping others sharpen their technical skills.\",\"sameAs\":[\"https:\/\/medium.com\/@giorgio.galassi\",\"https:\/\/www.linkedin.com\/in\/giorgiogalassi\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/ggalassi\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dependency Injection (DI) in TypeScript and Angular: Part 0","description":"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80","og_description":"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-02-05T08:27:32+00:00","article_modified_time":"2025-02-05T08:32:10+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp","type":"image\/webp"}],"author":"Giorgio Galassi","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Giorgio Galassi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/"},"author":{"name":"Giorgio Galassi","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/19fc0726e8a2c812a1a85816899fe69a"},"headline":"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80","datePublished":"2025-02-05T08:27:32+00:00","dateModified":"2025-02-05T08:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/"},"wordCount":1152,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp","keywords":["Angular","Frameworks"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/","name":"Dependency Injection (DI) in TypeScript and Angular: Part 0","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp","datePublished":"2025-02-05T08:27:32+00:00","dateModified":"2025-02-05T08:32:10+00:00","description":"Explore Dependency Injection (DI) in TypeScript and Angular. In Part 0, we introduce DI fundamentals, covering its purpose, actors, and benefits in software design.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/dependency-injection-typescript-angular-part-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Understanding Angular \u2014 Exploring Dependency Injection and Design Patterns \u2014 Part 0 \ud83d\udd25\ud83d\ude80"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/19fc0726e8a2c812a1a85816899fe69a","name":"Giorgio Galassi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/profile-big-4-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/profile-big-4-100x100.jpeg","caption":"Giorgio Galassi"},"description":"Giorgio is a Senior Frontend Developer with nearly 8 years of experience building dynamic, user-focused web applications. Specializing in Angular, he also keeps an eye on other frontend frameworks and technologies, always seeking innovative approaches to problem-solving. Beyond coding, Giorgio is deeply involved in the developer community. As a proud Organizer of GDG Roma Citt\u00e0, he fosters knowledge-sharing and collaboration among peers. He enjoys making complex topics more accessible and helping others sharpen their technical skills.","sameAs":["https:\/\/medium.com\/@giorgio.galassi","https:\/\/www.linkedin.com\/in\/giorgiogalassi\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/ggalassi\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-600x600.webp","author_info":{"display_name":"Giorgio Galassi","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/ggalassi\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/DALL\u00b7E-2025-02-05-09.24.09-A-futuristic-digital-illustration-representing-Angular-framework-concepts.-The-image-features-a-glowing-Angular-logo-in-the-center-surrounded-by-abst-1-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Giorgio Galassi","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/ggalassi\/"},"uagb_comment_info":0,"uagb_excerpt":"This is the 1st of a series of articles that have the goal to explore and understand a topic that I see too much neglected in the front-end world\u200a\u2014\u200aDependency Injection (DI) & Design patterns. You will start writing and understanding the basics of DI\u200a\u2014\u200awhat is it, how does it work and how works in Angular.……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/302"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=30423"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30423\/revisions"}],"predecessor-version":[{"id":31921,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/30423\/revisions\/31921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/31919"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=30423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=30423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=30423"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=30423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}