diff --git a/404.html b/404.html index 8aa6c08..1400b2f 100644 --- a/404.html +++ b/404.html @@ -1,7 +1,6 @@ 404 Page not found | Yeshas M P -
404
\ No newline at end of file diff --git a/about/index.html b/about/index.html index 322d4f6..6d6e242 100644 --- a/about/index.html +++ b/about/index.html @@ -1,12 +1,11 @@ About | Yeshas M P -

About

Welcome to my personal technology blog, https://yeshasmp.github.io! I’m Yeshas M P, an Application Developer at IBM India Pvt. Ltd. My primary focus is on Angular and various Microsoft technologies such as ASP.Net Core, SQL Server, and Azure Cloud. Through this blog, I share practical insights, tips, and tutorials on these technologies. Stay tuned for updates and dive into the world of software development with me!

Disclaimer

This is my personal blog. The opinions expressed here represent my own and not those of my current employer, previous employers and/or any other companies. For accuracy and official reference refer to respective official sources.

+ \ No newline at end of file diff --git a/archives/index.html b/archives/index.html index 5eaad63..c9ba937 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1,7 +1,6 @@ Archives | Yeshas M P -

Archives

2022  2

April  1

Demystifying Angular Services and Dependency Injection

April 15, 2022 · 8 min · Yeshas M P

January  1

Angular Bootstrapping : How does Angular work under the hood?

January 16, 2022 · 6 min · Yeshas M P
\ No newline at end of file diff --git a/assets/css/stylesheet.dc96e9e0118e5e264a03d68b104df6ae869cfb73c61f5f89dd91aeb16b0d8c03.css b/assets/css/stylesheet.dc96e9e0118e5e264a03d68b104df6ae869cfb73c61f5f89dd91aeb16b0d8c03.css new file mode 100644 index 0000000..3dc62b5 --- /dev/null +++ b/assets/css/stylesheet.dc96e9e0118e5e264a03d68b104df6ae869cfb73c61f5f89dd91aeb16b0d8c03.css @@ -0,0 +1,7 @@ +/* + PaperMod v7 + License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE + Copyright (c) 2020 nanxiaobei and adityatelange + Copyright (c) 2021-2023 adityatelange +*/ +:root{--gap:24px;--content-gap:20px;--nav-width:1024px;--main-width:720px;--header-height:60px;--footer-height:60px;--radius:8px;--theme:rgb(255, 255, 255);--entry:rgb(255, 255, 255);--primary:rgb(30, 30, 30);--secondary:rgb(108, 108, 108);--tertiary:rgb(214, 214, 214);--content:rgb(31, 31, 31);--hljs-bg:rgb(28, 29, 33);--code-bg:rgb(245, 245, 245);--border:rgb(238, 238, 238)}.dark{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--code-bg)}.dark.list{background:var(--theme)}*,::after,::before{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;overflow-y:scroll}a,button,body,h1,h2,h3,h4,h5,h6{color:var(--primary)}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;font-size:18px;line-height:1.6;word-break:break-word;background:var(--theme)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section,table{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:0}ul{padding:0}a{text-decoration:none}body,figure,ul{margin:0}table{width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;word-break:keep-all}button,input,textarea{padding:0;font:inherit;background:0 0;border:0}input,textarea{outline:0}button,input[type=button],input[type=submit]{cursor:pointer}input:-webkit-autofill,textarea:-webkit-autofill{box-shadow:0 0 0 50px var(--theme)inset}img{display:block;max-width:100%}.not-found{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;height:80%;font-size:160px;font-weight:700}.archive-posts{width:100%;font-size:16px}.archive-year{margin-top:40px}.archive-year:not(:last-of-type){border-bottom:2px solid var(--border)}.archive-month{display:flex;align-items:flex-start;padding:10px 0}.archive-month-header{margin:25px 0;width:200px}.archive-month:not(:last-of-type){border-bottom:1px solid var(--border)}.archive-entry{position:relative;padding:5px;margin:10px 0}.archive-entry-title{margin:5px 0;font-weight:400}.archive-count,.archive-meta{color:var(--secondary);font-size:14px}.footer,.top-link{font-size:12px;color:var(--secondary)}.footer{max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:calc((var(--footer-height) - var(--gap))/2)var(--gap);text-align:center;line-height:24px}.footer span{margin-inline-start:1px;margin-inline-end:1px}.footer span:last-child{white-space:nowrap}.footer a{color:inherit;border-bottom:1px solid var(--secondary)}.footer a:hover{border-bottom:1px solid var(--primary)}.top-link{visibility:hidden;position:fixed;bottom:60px;right:30px;z-index:99;background:var(--tertiary);width:42px;height:42px;padding:12px;border-radius:64px;transition:visibility .5s,opacity .8s linear}.top-link,.top-link svg{filter:drop-shadow(0 0 0 var(--theme))}.footer a:hover,.top-link:hover{color:var(--primary)}.top-link:focus,#theme-toggle:focus{outline:0}.nav{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:calc(var(--nav-width) + var(--gap) * 2);margin-inline-start:auto;margin-inline-end:auto;line-height:var(--header-height)}.nav a{display:block}.logo,#menu{display:flex;margin:auto var(--gap)}.logo{flex-wrap:inherit}.logo a{font-size:24px;font-weight:700}.logo a img,.logo a svg{display:inline;vertical-align:middle;pointer-events:none;transform:translate(0,-10%);border-radius:6px;margin-inline-end:8px}button#theme-toggle{font-size:26px;margin:auto 4px}body.dark #moon{vertical-align:middle;display:none}body:not(.dark) #sun{display:none}#menu{list-style:none;word-break:keep-all;overflow-x:auto;white-space:nowrap}#menu li+li{margin-inline-start:var(--gap)}#menu a{font-size:16px}#menu .active{font-weight:500;border-bottom:2px solid}.lang-switch li,.lang-switch ul,.logo-switches{display:inline-flex;margin:auto 4px}.lang-switch{display:flex;flex-wrap:inherit}.lang-switch a{margin:auto 3px;font-size:16px;font-weight:500}.logo-switches{flex-wrap:inherit}.main{position:relative;min-height:calc(100vh - var(--header-height) - var(--footer-height));max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:var(--gap)}.page-header h1{font-size:40px}.pagination{display:flex}.pagination a{color:var(--theme);font-size:13px;line-height:36px;background:var(--primary);border-radius:calc(36px/2);padding:0 16px}.pagination .next{margin-inline-start:auto}.social-icons{padding:12px 0}.social-icons a:not(:last-of-type){margin-inline-end:12px}.social-icons a svg{height:26px;width:26px}code{direction:ltr}div.highlight,pre{position:relative}.copy-code{display:none;position:absolute;top:4px;right:4px;color:rgba(255,255,255,.8);background:rgba(78,78,78,.8);border-radius:var(--radius);padding:0 5px;font-size:14px;user-select:none}div.highlight:hover .copy-code,pre:hover .copy-code{display:block}.first-entry{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:320px;margin:var(--gap)0 calc(var(--gap) * 2)}.first-entry .entry-header{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.first-entry .entry-header h1{font-size:34px;line-height:1.3}.first-entry .entry-content{margin:14px 0;font-size:16px;-webkit-line-clamp:3}.first-entry .entry-footer{font-size:14px}.home-info .entry-content{-webkit-line-clamp:unset}.post-entry{position:relative;margin-bottom:var(--gap);padding:var(--gap);background:var(--entry);border-radius:var(--radius);transition:transform .1s;border:1px solid var(--border)}.post-entry:active{transform:scale(.96)}.tag-entry .entry-cover{display:none}.entry-header h2{font-size:24px;line-height:1.3}.entry-content{margin:8px 0;color:var(--secondary);font-size:14px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.entry-footer{color:var(--secondary);font-size:13px}.entry-link{position:absolute;left:0;right:0;top:0;bottom:0}.entry-cover,.entry-isdraft{font-size:14px;color:var(--secondary)}.entry-cover{margin-bottom:var(--gap);text-align:center}.entry-cover img{border-radius:var(--radius);pointer-events:none;width:100%;height:auto}.entry-cover a{color:var(--secondary);box-shadow:0 1px 0 var(--primary)}.page-header,.post-header{margin:24px auto var(--content-gap)}.post-title{margin-bottom:2px;font-size:40px}.post-description{margin-top:10px;margin-bottom:5px}.post-meta,.breadcrumbs{color:var(--secondary);font-size:14px;display:flex;flex-wrap:wrap}.post-meta .i18n_list li{display:inline-flex;list-style:none;margin:auto 3px;box-shadow:0 1px 0 var(--secondary)}.breadcrumbs a{font-size:16px}.post-content{color:var(--content)}.post-content h3,.post-content h4,.post-content h5,.post-content h6{margin:24px 0 16px}.post-content h1{margin:40px auto 32px;font-size:40px}.post-content h2{margin:32px auto 24px;font-size:32px}.post-content h3{font-size:24px}.post-content h4{font-size:16px}.post-content h5{font-size:14px}.post-content h6{font-size:12px}.post-content a,.toc a:hover{box-shadow:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.post-content a code{margin:auto 0;border-radius:0;box-shadow:0 -1px 0 var(--primary)inset}.post-content del{text-decoration:none;background:linear-gradient(to right,var(--primary) 100%,transparent 0)0/1px 1px repeat-x}.post-content dl,.post-content ol,.post-content p,.post-content figure,.post-content ul{margin-bottom:var(--content-gap)}.post-content ol,.post-content ul{padding-inline-start:20px}.post-content li{margin-top:5px}.post-content li p{margin-bottom:0}.post-content dl{display:flex;flex-wrap:wrap;margin:0}.post-content dt{width:25%;font-weight:700}.post-content dd{width:75%;margin-inline-start:0;padding-inline-start:10px}.post-content dd~dd,.post-content dt~dt{margin-top:10px}.post-content table{margin-bottom:32px}.post-content table th,.post-content table:not(.highlighttable,.highlight table,.gist .highlight) td{min-width:80px;padding:12px 8px;line-height:1.5;border-bottom:1px solid var(--border)}.post-content table th{font-size:14px;text-align:start}.post-content table:not(.highlighttable) td code:only-child{margin:auto 0}.post-content .highlight table{border-radius:var(--radius)}.post-content .highlight:not(table){margin:10px auto;background:var(--hljs-bg)!important;border-radius:var(--radius);direction:ltr}.post-content li>.highlight{margin-inline-end:0}.post-content ul pre{margin-inline-start:calc(var(--gap) * -2)}.post-content .highlight pre{margin:0}.post-content .highlighttable{table-layout:fixed}.post-content .highlighttable td:first-child{width:40px}.post-content .highlighttable td .linenodiv{padding-inline-end:0!important}.post-content .highlighttable td .highlight,.post-content .highlighttable td .linenodiv pre{margin-bottom:0}.post-content code{margin:auto 4px;padding:4px 6px;font-size:.78em;line-height:1.5;background:var(--code-bg);border-radius:2px}.post-content pre code{display:block;margin:auto 0;padding:10px;color:#d5d5d6;background:var(--hljs-bg)!important;border-radius:var(--radius);overflow-x:auto;word-break:break-all}.post-content blockquote{margin:20px 0;padding:0 14px;border-inline-start:3px solid var(--primary)}.post-content hr{margin:30px 0;height:2px;background:var(--tertiary);border:0}.post-content iframe{max-width:100%}.post-content img{border-radius:4px;margin:1rem 0}.post-content img[src*="#center"]{margin:1rem auto}.post-content figure.align-center{text-align:center}.post-content figure>figcaption{color:var(--primary);font-size:16px;font-weight:700;margin:8px 0 16px}.post-content figure>figcaption>p{color:var(--secondary);font-size:14px;font-weight:400}.toc{margin:0 2px 40px;border:1px solid var(--border);background:var(--code-bg);border-radius:var(--radius);padding:.4em}.dark .toc{background:var(--entry)}.toc details summary{cursor:zoom-in;margin-inline-start:20px}.toc details[open] summary{cursor:zoom-out}.toc .details{display:inline;font-weight:500}.toc .inner{margin:0 20px;padding:10px 20px}.toc li ul{margin-inline-start:var(--gap)}.toc summary:focus{outline:0}.post-footer{margin-top:56px}.post-tags li{display:inline-block;margin-inline-end:3px;margin-bottom:5px}.post-tags a,.share-buttons,.paginav{border-radius:var(--radius);background:var(--code-bg);border:1px solid var(--border)}.post-tags a{display:block;padding-inline-start:14px;padding-inline-end:14px;color:var(--secondary);font-size:14px;line-height:34px;background:var(--code-bg)}.post-tags a:hover,.paginav a:hover{background:var(--border)}.share-buttons{margin:14px 0;padding-inline-start:var(--radius);display:flex;justify-content:center;overflow-x:auto}.share-buttons a{margin-top:10px}.share-buttons a:not(:last-of-type){margin-inline-end:12px}h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor{display:inline-flex;color:var(--secondary);margin-inline-start:8px;font-weight:500;user-select:none}.paginav{margin:10px 0;display:flex;line-height:30px;border-radius:var(--radius)}.paginav a{padding-inline-start:14px;padding-inline-end:14px;border-radius:var(--radius)}.paginav .title{letter-spacing:1px;text-transform:uppercase;font-size:small;color:var(--secondary)}.paginav .prev,.paginav .next{width:50%}.paginav span:hover:not(.title){box-shadow:0 1px}.paginav .next{margin-inline-start:auto;text-align:right}[dir=rtl] .paginav .next{text-align:left}h1>a>svg{display:inline}img.in-text{display:inline;margin:auto}.buttons,.main .profile{display:flex;justify-content:center}.main .profile{align-items:center;min-height:calc(100vh - var(--header-height) - var(--footer-height) - (var(--gap) * 2));text-align:center}.profile .profile_inner h1{padding:12px 0}.profile img{display:inline-table;border-radius:50%}.buttons{flex-wrap:wrap;max-width:400px;margin:0 auto}.button{background:var(--tertiary);border-radius:var(--radius);margin:8px;padding:6px;transition:transform .1s}.button-inner{padding:0 8px}.button:active{transform:scale(.96)}#searchbox input{padding:4px 10px;width:100%;color:var(--primary);font-weight:700;border:2px solid var(--tertiary);border-radius:var(--radius)}#searchbox input:focus{border-color:var(--secondary)}#searchResults li{list-style:none;border-radius:var(--radius);padding:10px;margin:10px 0;position:relative;font-weight:500}#searchResults{margin:10px 0;width:100%}#searchResults li:active{transition:transform .1s;transform:scale(.98)}#searchResults a{position:absolute;width:100%;height:100%;top:0;left:0;outline:none}#searchResults .focus{transform:scale(.98);border:2px solid var(--tertiary)}.terms-tags li{display:inline-block;margin:10px;font-weight:500}.terms-tags a{display:block;padding:3px 10px;background:var(--tertiary);border-radius:6px;transition:transform .1s}.terms-tags a:active{background:var(--tertiary);transform:scale(.96)}.chroma{background-color:unset!important}::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-track{background:var(--code-bg)}::-webkit-scrollbar-thumb{background:var(--tertiary);border:5px solid var(--theme);border-radius:var(--radius)}.list:not(.dark)::-webkit-scrollbar-thumb{border:5px solid var(--code-bg)}::-webkit-scrollbar-thumb:hover{background:var(--secondary)}::-webkit-scrollbar:not(.highlighttable,.highlight table,.gist .highlight){background:var(--theme)}.post-content .highlighttable td .highlight pre code::-webkit-scrollbar{display:none}.post-content :not(table) ::-webkit-scrollbar-thumb{border:2px solid var(--hljs-bg);background:#717175}.post-content :not(table) ::-webkit-scrollbar-thumb:hover{background:#a3a3a5}.gist table::-webkit-scrollbar-thumb{border:2px solid #fff;background:#adadad}.gist table::-webkit-scrollbar-thumb:hover{background:#707070}.post-content table::-webkit-scrollbar-thumb{border-width:2px}@media screen and (min-width:768px){::-webkit-scrollbar{width:19px;height:11px}}@media screen and (max-width:768px){:root{--gap:14px}.profile img{transform:scale(.85)}.first-entry{min-height:260px}.archive-month{flex-direction:column}.archive-year{margin-top:20px}.footer{padding:calc((var(--footer-height) - var(--gap) - 10px)/2)var(--gap)}}@media screen and (max-width:900px){.list .top-link{transform:translateY(-5rem)}}@media(prefers-reduced-motion){.terms-tags a:active,.button:active,.post-entry:active,.top-link,#searchResults .focus,#searchResults li:active{transform:none}} \ No newline at end of file diff --git a/categories/index.html b/categories/index.html index 5ce4879..b2311ac 100644 --- a/categories/index.html +++ b/categories/index.html @@ -1,7 +1,6 @@ Categories | Yeshas M P -

Categories

\ No newline at end of file diff --git a/index.html b/index.html index 6964127..09763a3 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,11 @@ -Yeshas M P -
profile image

Yeshas M P

Javascript || Angular || .Net Core || SQL Server || Azure

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. +Yeshas M P +

profile image

Yeshas M P

Javascript || Angular || .Net Core || SQL Server || Azure

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. “a component’s job is to enable the user experience and nothing more.” where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services. -Angular Services Angular services are simple class which is used to perform specific functions....

April 15, 2022 · 8 min · Yeshas M P

Angular Bootstrapping : How does Angular work under the hood?

In this article we are going to explore together how Angular apps work behind the scenes. At first, we will understand various workspace and application configuration files and finally we will piece together all the files how they are involved in bootstraping. -Angular Project Structure Before understanding how Angular works under the hood, it’s necessary to understand the workspace structure and application configuration involved in the process. Every Angular apps works in the context of workspace....

January 16, 2022 · 6 min · Yeshas M P
\ No newline at end of file diff --git a/posts/angular-bootstrapping/index.html b/posts/angular-bootstrapping/index.html index 94452b3..7453124 100644 --- a/posts/angular-bootstrapping/index.html +++ b/posts/angular-bootstrapping/index.html @@ -1,6 +1,5 @@ Angular Bootstrapping : How does Angular work under the hood? | Yeshas M P -
Home » Posts

Angular Bootstrapping : How does Angular work under the hood?

Guide to Angular Bootstrapping
January 16, 2022 · 6 min · Yeshas M P
Table of Contents

In this article we are going to explore together how Angular apps work behind the scenes. At first, we will understand various workspace and application configuration files and finally we will piece together all the files how they are involved in bootstraping.

Angular Project Structure

Before understanding how Angular works under the hood, it’s necessary to understand the workspace structure and application configuration involved in the process. Every Angular apps works in the context of workspace. By default ng new app_name command generates a skeleton application at root of workspace in below fashion -

workspace/(folder name is app_name given at cmd)
+
Home » Posts
Angular Bootstrapping : How does Angular work under the hood?
Guide to Angular Bootstrapping
January 16, 2022 · 6 min · Yeshas M P
Table of Contents
In this article we are going to explore together how Angular apps work behind the scenes. At first, we will understand various workspace and application configuration files and finally we will piece together all the files how they are involved in bootstraping.
Angular Project Structure
Before understanding how Angular works under the hood, it’s necessary to understand the workspace structure and application configuration involved in the process. Every Angular apps works in the context of workspace. By default ng new app_name command generates a skeleton application at root of workspace in below fashion -
workspace/(folder name is app_name given at cmd)
   ...             (workspace-wide config files)
     src/        --(source and support files for application)
 
The above structure is usually referred as ‘multi-repo’ development style where each application has it’s own workspace, ‘workspace’ folder consists of workspace specific configuration files where as ‘src’ folder consists of application specific files and folders.
Workspace configuration files
  1. angular.json - It specifies workspace-wide and project specific defaults for build and development. For instance, You can have ’n’ number of npm packages installed in your workspace, but you can specify which packages you want in your application in angular.json
  2. package.json - It consists metadata of project and is used for managing the project’s dependencies, scripts, npm package versions and many more.
  3. package-lock.json - It provides information of all npm packages installed in npm_modules folder such as package version, hash to verify the package integrity and list of its dependencies.
  4. tsconfig.json - Since Angular apps are written using typescript, this file specifies root files and compiler options required to compile our application.
Application configuration files
  1. index.html - This is our main HTML page which is rendered and is displayed to user in browser.
  2. main.ts - This is responsible for compiling all components and template files with JIT(Just In Time) compiler. We can also use AOT(Ahead Of Time) compiler by adding –aot flag to ng build or ng serve CLI commands(Recommended for production environment).
For more detailed explanation of all config files go through official Angular Docs
Angular Bootstrapping
Some of you all might have wondered when I used the term ‘Bootstraping’ earlier. In Angular eco-system Bootstraping is technique of initializing root module and loading root component into index.html file. When we run ng serve or ng build multiple things happen in the background. Below steps provide a brief overview of bootstrapping process-
Angular Bootstrapping
  1. Compilation of application codes using tsc typescript compiler.
  2. Bundling and minification of javascript files by Webpack.
  3. Deployment and bootstrapping.
  4. Run JIT compiler for all components, directives and pipes.
  5. Render index.html in browser.
The only difference between JIT and AOT compiler is that in AOT compiler, compilation takes place during build time rather than at runtime in browser. Let’s go through above steps in bit more detail -
  1. angular.json consist of multiple configuration properties related build and development. The one’s which are interesting to us are ‘builder’, ‘index’ and ‘main’ properties under ‘build’ as shown below.
"build": {
@@ -69,13 +68,13 @@
 export class AppComponent {
   title = 'SampleApp';
 }
-
There it is! app-root specified in selector matches with app-root in index.html. It then finds HTML template along with styles and renders the same in index.html where app-root is present.
Conclusion
Though above explanation is not complete, I hope it gave you brief idea on what’s happening under the hood when we run Angular app. Stay tuned for more such interesting articles!

There it is! app-root specified in selector matches with app-root in index.html. It then finds HTML template along with styles and renders the same in index.html where app-root is present.

Conclusion

Though above explanation is not complete, I hope it gave you brief idea on what’s happening under the hood when we run Angular app. Stay tuned for more such interesting articles!

- \ No newline at end of file + PaperMod + \ No newline at end of file diff --git a/posts/angular-services/index.html b/posts/angular-services/index.html index e048d51..6e091b7 100644 --- a/posts/angular-services/index.html +++ b/posts/angular-services/index.html @@ -1,6 +1,5 @@ Demystifying Angular Services and Dependency Injection | Yeshas M P -
Home » Posts

Demystifying Angular Services and Dependency Injection

Guide to Angular Services and Dependency Injection
April 15, 2022 · 8 min · Yeshas M P
Table of Contents

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs.

“a component’s job is to enable the user experience and nothing more.”

where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services.

Angular Services

Angular services are simple class which is used to perform specific functions. Angular Services offer several advantages -

  1. It’s easier to write logic once in service and share the service among the components instead of writing the same logic in every component.
  2. It’s easier to test and debug.
  3. It’s easier maintain and perform code updates when required.

Angular Service Example

We can generate Angular Service in Angular CLI using ng g s AppService where ‘g’ and ’s’ is shorthand form for ‘generate service’.

import { Injectable } from '@angular/core';
+
Home » Posts
Demystifying Angular Services and Dependency Injection
Guide to Angular Services and Dependency Injection
April 15, 2022 · 8 min · Yeshas M P
Table of Contents
In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs.
“a component’s job is to enable the user experience and nothing more.”
where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services.
Angular Services
Angular services are simple class which is used to perform specific functions. Angular Services offer several advantages -
  1. It’s easier to write logic once in service and share the service among the components instead of writing the same logic in every component.
  2. It’s easier to test and debug.
  3. It’s easier maintain and perform code updates when required.
Angular Service Example
We can generate Angular Service in Angular CLI using ng g s AppService where ‘g’ and ’s’ is shorthand form for ‘generate service’.
import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
@@ -87,13 +86,13 @@
   }
 
 }
-
We will then display the random number in both app and home component by calling getRandomNumber method and passing the value to view. When we load the application we can see both components get the same random number as they both received same single instance of AppService from Root Module injector. This proves Angular services are singleton when they are registered only in Root Module provider.
Angular singleton service
Now let’s register AppService also in HomeComponent provider and run the app. App and Home component displays two different random numbers because they both received two different instances of AppService. Thus we can say Angular services are not singleton when they are provided at different levels.
Angular non-singleton service
But how did two instance of Angular services got created?
Angular Hierarchical Injection
  1. When AppComponent requested the AppService, Angular looked for it in AppComponent provider at first, when it couldn’t find it it went into Module injector tree and found the AppService in Root Module provider and returned it to AppComponent.
  2. Next when HomeComponent requested AppService it found it in the HomeComponent provider itself and returned new AppService instance to HomeComponent.
  3. Therefore we saw two instance of AppService being created and provided to respective components.
Few points to remember before we conclude -
  1. Element Injector tree always gets preference over Module Injector tree and it is not child of Module Injector tree.
  2. Angular DI resolves dependencies using bottom to top approach, it starts the search for provider first from the requesting component and then traverse upto the parent components to the Root Module provider.
  3. Service which are provided at Root Module or Eagerly Loaded Module are app scoped and accesible to all the components or directives. Services which are provided in Lazy Loaded Module are module scoped and available only to the components or directives under that module.
  4. Proivder holds the list of dependencies with it’s matching token, while Injector holds provider itself.
  5. If two Eagerly Loaded modules providers has service for same injector token then the module which is imported at last in Root Module gets preference.
Above code example have been shared over Github and Stackblitz.
That’s it folks! I hope this article helped you understand better how Angular Dependency works and how Angular Services are singleton by nature.
Stay tuned for more such interesting articles!

We will then display the random number in both app and home component by calling getRandomNumber method and passing the value to view. When we load the application we can see both components get the same random number as they both received same single instance of AppService from Root Module injector. This proves Angular services are singleton when they are registered only in Root Module provider.

Angular singleton service

Now let’s register AppService also in HomeComponent provider and run the app. App and Home component displays two different random numbers because they both received two different instances of AppService. Thus we can say Angular services are not singleton when they are provided at different levels.

Angular non-singleton service

But how did two instance of Angular services got created?

Angular Hierarchical Injection

  1. When AppComponent requested the AppService, Angular looked for it in AppComponent provider at first, when it couldn’t find it it went into Module injector tree and found the AppService in Root Module provider and returned it to AppComponent.

  2. Next when HomeComponent requested AppService it found it in the HomeComponent provider itself and returned new AppService instance to HomeComponent.

  3. Therefore we saw two instance of AppService being created and provided to respective components.

Few points to remember before we conclude -

  1. Element Injector tree always gets preference over Module Injector tree and it is not child of Module Injector tree.

  2. Angular DI resolves dependencies using bottom to top approach, it starts the search for provider first from the requesting component and then traverse upto the parent components to the Root Module provider.

  3. Service which are provided at Root Module or Eagerly Loaded Module are app scoped and accesible to all the components or directives. Services which are provided in Lazy Loaded Module are module scoped and available only to the components or directives under that module.

  4. Proivder holds the list of dependencies with it’s matching token, while Injector holds provider itself.

  5. If two Eagerly Loaded modules providers has service for same injector token then the module which is imported at last in Root Module gets preference.

Above code example have been shared over Github and Stackblitz.

That’s it folks! I hope this article helped you understand better how Angular Dependency works and how Angular Services are singleton by nature.

Stay tuned for more such interesting articles!

- \ No newline at end of file + PaperMod + \ No newline at end of file diff --git a/posts/index.html b/posts/index.html index bb1c087..d1fb46c 100644 --- a/posts/index.html +++ b/posts/index.html @@ -1,11 +1,10 @@ Posts | Yeshas M P -
Home

Posts

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. +

Home

Posts

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. “a component’s job is to enable the user experience and nothing more.” where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services. -Angular Services Angular services are simple class which is used to perform specific functions....

April 15, 2022 · 8 min · Yeshas M P

Angular Bootstrapping : How does Angular work under the hood?

In this article we are going to explore together how Angular apps work behind the scenes. At first, we will understand various workspace and application configuration files and finally we will piece together all the files how they are involved in bootstraping. -Angular Project Structure Before understanding how Angular works under the hood, it’s necessary to understand the workspace structure and application configuration involved in the process. Every Angular apps works in the context of workspace....

January 16, 2022 · 6 min · Yeshas M P
\ No newline at end of file diff --git a/tags/angular-bootstrapping/index.html b/tags/angular-bootstrapping/index.html index b5264e0..a5a3db5 100644 --- a/tags/angular-bootstrapping/index.html +++ b/tags/angular-bootstrapping/index.html @@ -1,8 +1,7 @@ Angular Bootstrapping | Yeshas M P -
Home » Tags

Angular Bootstrapping

Angular Bootstrapping : How does Angular work under the hood?

In this article we are going to explore together how Angular apps work behind the scenes. At first, we will understand various workspace and application configuration files and finally we will piece together all the files how they are involved in bootstraping. -Angular Project Structure Before understanding how Angular works under the hood, it’s necessary to understand the workspace structure and application configuration involved in the process. Every Angular apps works in the context of workspace....

January 16, 2022 · 6 min · Yeshas M P
\ No newline at end of file diff --git a/tags/angular-services/index.html b/tags/angular-services/index.html index 5c40ef8..2b2ed85 100644 --- a/tags/angular-services/index.html +++ b/tags/angular-services/index.html @@ -1,10 +1,9 @@ Angular Services | Yeshas M P -
Home » Tags

Angular Services

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. +

Home » Tags

Angular Services

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. “a component’s job is to enable the user experience and nothing more.” where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services. -Angular Services Angular services are simple class which is used to perform specific functions....

April 15, 2022 · 8 min · Yeshas M P
\ No newline at end of file diff --git a/tags/dependency-injection/index.html b/tags/dependency-injection/index.html index 7f3b0c8..84f17f2 100644 --- a/tags/dependency-injection/index.html +++ b/tags/dependency-injection/index.html @@ -1,10 +1,9 @@ Dependency Injection | Yeshas M P -
Home » Tags

Dependency Injection

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. +

Home » Tags

Dependency Injection

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. “a component’s job is to enable the user experience and nothing more.” where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services. -Angular Services Angular services are simple class which is used to perform specific functions....

April 15, 2022 · 8 min · Yeshas M P
\ No newline at end of file diff --git a/tags/index.html b/tags/index.html index 30be0e0..426eae9 100644 --- a/tags/index.html +++ b/tags/index.html @@ -1,7 +1,6 @@ Tags | Yeshas M P -

Tags

\ No newline at end of file diff --git a/tags/singleton/index.html b/tags/singleton/index.html index 6d61c49..b4766a8 100644 --- a/tags/singleton/index.html +++ b/tags/singleton/index.html @@ -1,10 +1,9 @@ Singleton | Yeshas M P -
Home » Tags

Singleton

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. +

Home » Tags

Singleton

Demystifying Angular Services and Dependency Injection

In any Angular application it is essential to keep component as lean as possible, it’s only concern should be on how to present the model data to view as described by Angular official docs. “a component’s job is to enable the user experience and nothing more.” where other logics such as fetching data from API endpoint or handling client and server side errors should be taken care by services. -Angular Services Angular services are simple class which is used to perform specific functions....

April 15, 2022 · 8 min · Yeshas M P
\ No newline at end of file