{"id":81460,"date":"2020-09-01T09:00:05","date_gmt":"2020-09-01T03:30:05","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=81460"},"modified":"2021-08-25T13:47:27","modified_gmt":"2021-08-25T08:17:27","slug":"angular-architecture-components","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/","title":{"rendered":"Angular Architecture Components and Features"},"content":{"rendered":"<p>Angular is one of the most popular frameworks for developing Desktop and mobile applications for clients. Angular application uses HTML and TypeScript. You can use this in cross-platform mobile development via IONIC. Angular Implements both Core and Optional functionalities in the form of TypeScript libraries that you can import in your application. You should have domain knowledge of HTML, CSS, and JavaScript for working with Angular. In this Angular Tutorial by DataFlair, we will learn about Angular Architecture and its components.<\/p>\n<p>There are three basic things in Angular that are Components, Modules, and Routing. An angular app is a combination of different NgModules as modules are the building block of angular. Components, on the other hand, are responsible for defining the views, which are a part of elements of the screen. You can change the Views using data and program logic. Routing is the functionality that links multiple components together.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81468\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg\" alt=\"angular architecture\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h2>Architecture of Angular<\/h2>\n<p>The Building blocks of Angular Architecture as depicted in the image are:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81469\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image.jpg\" alt=\"Architecture of angular\" width=\"790\" height=\"680\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image.jpg 790w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image-300x258.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image-150x129.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image-768x661.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Architecture-of-angular-normal-image-520x448.jpg 520w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/a><\/p>\n<ul>\n<li>Module<\/li>\n<li>Template<\/li>\n<li>Component<\/li>\n<li>Metadata<\/li>\n<li>Data Binding<\/li>\n<li>Services<\/li>\n<li>Directives<\/li>\n<li>Dependency Injection<\/li>\n<\/ul>\n<p>Let us learn each of these Angular Architecture Components in detail now:<\/p>\n<h3>1. Module<\/h3>\n<p>Angular is a modular platform and it may contain one or more Angular Module or NgModules depending on the demand. It is the essential module that is always present is the Root module namely \u201cAppModule\u201d in the application.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81470\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application.jpg\" alt=\"Flow of angular application\" width=\"1299\" height=\"771\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application-300x178.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application-1024x608.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application-150x89.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application-768x456.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Flow-of-angular-application-520x309.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>NgModule<\/strong> is a Decorator function that handles the compilation part of the application. It works in synergy with other modules. It takes a single object in the form of Metadata. NgModule communicates with other modules for bootstrapping them and works in the Parent-Child relationship for the proper execution of the application.<\/p>\n<p>Here are the properties of NgModule:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81471\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated.jpg\" alt=\"Angular NgModule Elaborated\" width=\"1111\" height=\"821\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated.jpg 1111w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated-300x222.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated-1024x757.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated-150x111.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated-768x568.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/NgModule-Elaborated-520x384.jpg 520w\" sizes=\"auto, (max-width: 1111px) 100vw, 1111px\" \/><\/a><\/p>\n<p><strong>a. Imports:<\/strong> When NgModule requires some functionalities, which are present in other modules, it inherits these functionalities using Import feature in the form of list.<\/p>\n<p><strong>b. Exports:<\/strong> When the NgModule requires to augment functionalities of some other module, this is used.<\/p>\n<p><strong>c. Declarations:<\/strong> When a view is displayed on the screen of any application, it is the mixture of Component and Template (Directives + Pipes), which are constituents of declarations.<\/p>\n<p><strong>d. Providers:<\/strong> When you need to access external features in an application like routing data to a server, it is not done using Components rather than this Services comes into action, which is a special concept fabricated to do all these external tasks. Providers contain the list of Services present in the module for external work. They do not have the actual service, but the Blueprint of Services are present.<\/p>\n<p><strong>e. Bootstrapping:<\/strong> It is the initial process that is responsible for the application to start. This process starts in main.ts (TypeScript) file which is then compiled into main.js (JavaScript) file. It is one of the essential processes in the working of an application. Bootstrapping is set only by the root module.<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81472\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4.png\" alt=\"Angular code\" width=\"1360\" height=\"728\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4-300x161.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4-1024x548.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4-150x80.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4-768x411.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-4-520x278.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><strong>Angular Code example<\/strong><\/p>\n<h4>Routing<\/h4>\n<p>The Router NgModule is present in the application if you choose to build the application with routing enabled. The router module allows you to create a definite path to navigate among different application states and also enables you to view the Application&#8217;s Hierarchy.<\/p>\n<p>When Routing is enabled, rather than defining pages, the router maps the path of components in the form of URL paths. By using this, the behavior of the application becomes tantamount to that of a browser. By clicking on a link or performing an action can take you from one link to the other link and can show or hide the view or Hierarchy.<\/p>\n<h4>How does Routing work?<\/h4>\n<p>Instead of pages, the router maps the flow in URL-like paths to views. When you navigate in the browser, the router intercepts the action performed by you and shows or hides the view accordingly.<\/p>\n<p>Router decodes and comprehends the URL according to the rules and data state defined in the navigation rules of your application. Moreover, the router also keeps the log of actions performed, so going back or forward from the current state becomes possible.<\/p>\n<p>If there is requirement of a functionality by the current application state and the module which contains it hasn&#8217;t been loaded, then the router can perform lazy-load, which loads the module on demand providing robustness to your application.<\/p>\n<p><strong>Libraries in Angular:<\/strong> There are many JavaScript Modules that Angular is made up of, they are Library Modules. Each and every Angular library has @angular as its prefix. Moreover, to install more libraries npm package manager can be used. You can also use JavaScript\u2019s import statement to import parts of the same.<\/p>\n<h3>2. Components<\/h3>\n<p>The view of the screen is controlled by the Component. At least one component is always present in every angular project, i.e. the root component. The work of the root component is to connect the Document Object Model (DOM) of the page with the component hierarchy.<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81473\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5.png\" alt=\"Angular Components\" width=\"1360\" height=\"728\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5-300x161.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5-1024x548.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5-150x80.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5-768x411.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-5-520x278.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><br \/>\n<strong>\u00a0Angular<\/strong> <strong>Component and Decorator<\/strong><\/p>\n<p>Each Component has a class that contains data and the logic of the application and it is also linked with the HTML template that defines the view which is to be displayed at the target app. There is @component decorator present that provides the template and metadata<\/p>\n<h3>3. Template<\/h3>\n<p>The template is must to format and augment the application before it is displayed. Template combines Angular Markup and HTML, which can mutate and modify the elements before displaying. It also provides program logic and connects your application data and DOM using binding markup. There are two types of data binding present:<\/p>\n<p><strong>a. Event Binding:<\/strong> It is used when the user inputs data and your app needs to respond to it by updating data of your application.<br \/>\n<strong>b. Property Binding:<\/strong> This data binding property comes in handy when your application computes some values based on the given data and you need to reflect that into the HTML.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81474\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6.png\" alt=\"Angular template\" width=\"1360\" height=\"728\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6-300x161.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6-1024x548.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6-150x80.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6-768x411.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-6-520x278.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p style=\"text-align: center\">\u00a0<strong>Angular Template example<\/strong><\/p>\n<h3>4. Metadata<\/h3>\n<p>Metadata is commonly defined as Data about Data. In particular to angular, here metadata is the Decorator. Metadata is the north star for Angular when it comes to processing a class. We use it so that it can configure the class according to its expected behavior. Metadata is attached to the typescript using the decorator. For example, @component decorator. The component decorator is defined just after the AppComponent which enables Angular to comprehend that it is a component.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-81476 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7.png\" alt=\"Angular metadata\" width=\"1360\" height=\"728\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7-300x161.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7-1024x548.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7-150x80.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7-768x411.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/image-7-520x278.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p style=\"text-align: center\"><strong>\u00a0Angular metadata<\/strong><\/p>\n<p>The class identified by the component is the Component Class. The decorator takes information which is necessary for angular to create and present the components and its view along with the required confirmation object.<br \/>\nSome useful configuration options of @component:<\/p>\n<ul>\n<li><strong>templateUrl:<\/strong> Contains the module relative address of the components HTML template.<\/li>\n<li><strong>Providers:<\/strong> Contains the dependency injection providers array which is required by the services of the component.<\/li>\n<li><strong>Selector:<\/strong> It is a CSS selector which tells the angular to instantiate the component when it finds the &lt;app-root&gt; tag, i.e. the parent component<\/li>\n<\/ul>\n<h3>5. Angular Data Binding<\/h3>\n<p>It is a mechanism for synchronizing and coordinating components and templates. It sets the communication channel between parts of template and parts of component.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Data-Binding.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-81475\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Data-Binding.jpg\" alt=\"Angular Data Binding\" width=\"388\" height=\"315\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Data-Binding.jpg 388w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Data-Binding-300x244.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Data-Binding-150x122.jpg 150w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/a><\/p>\n<p>There are four forms of data binding syntax as shown in the diagram above:<\/p>\n<p><strong>a. From Component to DOM:<\/strong><br \/>\nThis method adds the value of the property from the component to the DOM.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;p&gt;Topic: {{angular.Architecture}} &lt;\/p&gt;\r\n&lt;p&gt;Place: {{Data.Flair}}&lt;\/p&gt;\r\n<\/pre>\n<p><strong>b. Property Binding: [property] = \u201cvalue\u201d<\/strong><br \/>\nBy using this method Value is passed from component to a definite property, often in the form of an HTML attribute.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type=\"text\" [value]=\" angular.Architecture \" \/&gt;\r\n&lt;input \r\ntype=\"text\" [value]=\" Data.Flair \" \/&gt;\r\n<\/pre>\n<p><strong>c. Event Binding: (event)=\u201ddataFlair($event)\u201d<\/strong><br \/>\nUsing this method you can pass a value from a child Component to a Parent Component .<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type=\"text\" (datFlair)=\"onClick($event)\" \/&gt;\r\n<\/pre>\n<p><strong>d. Two-Way Binding: [(ngModel)] = \u201cproperty\u201d<\/strong><br \/>\nOne of the important properties which combines property and event binding into a unified notation by using ngmodel directive.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input [(ngModel)]=\" Data.Flair \"&gt;<\/pre>\n<h3>6. Angular Directives<\/h3>\n<p>A directive is a class which is preset with a @Directive Decorator. When the Templates are rendered in Angular, because they are Dynamic, according to the instructions given by the directive Angular transforms the DOM. An Angular component is made up of template and directive. Other than components there are 2 more directives namely Structural and Attribute.<\/p>\n<p><strong>a. Structural Directive:<\/strong> They are responsible for altering the layout by adding, removing and replacing the elements in DOM.<br \/>\n<strong>b. Attribute Directive:<\/strong> They are responsible for altering the behavior of an existing element.<\/p>\n<h3>7. Angular Services<\/h3>\n<p>Service is a spectrum of all the values, functions, and features that your application needs. It is a class with a definite and narrow purpose. The objective of service is to do something well defined in a proper way. In Angular there is no base class of service and there is no registration of service as well. The main advantage of Service is that it enhances the property of Modularity in Angular.<\/p>\n<h3>8. Angular Dependency Injection (DI)<\/h3>\n<p>It is a property that is useful to provide new components with the services and data required by them. DI is structured into an Angular framework, so it doesn\u2019t require to fetch the data from the server; neither it validates the user input or does the logging to the console.<\/p>\n<p>You can inject service into components as they are built in such a manner. The injector maintains a container of service instances that were previously created. If required then the blueprint of the service can directly be provided from this container. If the instance is not present, then the injector makes one and augments it in the container for future reference.<\/p>\n<h2>Summary<\/h2>\n<p>The architecture of Angular comprises many interdependent components. In this article, we learned how to start an application process using bootstrapping. We also learned how significant is the presence of NgModule as it contains all the major functionalities. One thing to remember is that there should be at least 1 module present in the application, i.e. the root module or app-root for the application to work. We can conclude finally that angular is a modular platform. It stores the functionalities in the form of services that are accessible by sending just a request.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is one of the most popular frameworks for developing Desktop and mobile applications for clients. Angular application uses HTML and TypeScript. You can use this in cross-platform mobile development via IONIC. Angular Implements&#46;&#46;&#46;<\/p>\n","protected":false},"author":10,"featured_media":81468,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19424],"tags":[23107,23108,23109],"class_list":["post-81460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular-architecture","tag-angular-architecture-components","tag-angular-architecture-working"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Architecture Components and Features - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Architecture Components and Features - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-01T03:30:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T08:17:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Architecture Components and Features - DataFlair","description":"Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection","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:\/\/data-flair.training\/blogs\/angular-architecture-components\/","og_locale":"en_US","og_type":"article","og_title":"Angular Architecture Components and Features - DataFlair","og_description":"Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection","og_url":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-09-01T03:30:05+00:00","article_modified_time":"2021-08-25T08:17:27+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"Angular Architecture Components and Features","datePublished":"2020-09-01T03:30:05+00:00","dateModified":"2021-08-25T08:17:27+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/"},"wordCount":1656,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg","keywords":["Angular architecture","Angular architecture components","Angular architecture working"],"articleSection":["Angular Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/","url":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/","name":"Angular Architecture Components and Features - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg","datePublished":"2020-09-01T03:30:05+00:00","dateModified":"2021-08-25T08:17:27+00:00","description":"Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angular-architecture-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/angular-architecture.jpg","width":1200,"height":628,"caption":"angular architecture"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angular-architecture-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"Angular Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angular\/"},{"@type":"ListItem","position":3,"name":"Angular Architecture Components and Features"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=81460"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81460\/revisions"}],"predecessor-version":[{"id":81698,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81460\/revisions\/81698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/81468"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=81460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=81460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=81460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}