{"id":16,"date":"2025-07-25T14:32:57","date_gmt":"2025-07-25T14:32:57","guid":{"rendered":"https:\/\/webxcellence.co.in\/blog\/?p=16"},"modified":"2025-12-04T19:51:27","modified_gmt":"2025-12-04T14:21:27","slug":"beginners-guide-to-angular-folder-structure-understanding-the-core-module","status":"publish","type":"post","link":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/","title":{"rendered":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module"},"content":{"rendered":"

Angular Is a JavaScript framework, it is TypeScript-based open-source front-end web application, developed and maintained by Google, it is used to dynamic single-page web application(SPA) ,
\nComponent based architecture development more modular, reusable and testable, A collection of well-integrated libraries and features, including routing , forms , client-server communication.
\n<\/span><\/span><\/span><\/p>\n

What is Component:-
\n<\/b><\/span><\/span><\/span><\/strong><\/p>\n

A Component is the basic building block of the User-Interface
\n(UI)
\nA TypeScript Class – Content the logic and data for the component
\nHTML Template(view) – How the view is rendered.
\nCSS\/Style -Styles the template
\nComponent is define @Component decorator.<\/span><\/span><\/span><\/p>\n

\"Beginner\u2019s<\/p>\n

 <\/p>\n

Project Structure-<\/span><\/span><\/span><\/strong>
\n<\/span><\/span><\/span><\/strong><\/p>\n

angular-app\/<\/span><\/span><\/span><\/p>\n

|
\n|– src\/
\n||– app\/
\n|||– app.component.ts \/\/ Content logics
\n|||– app.component.html \/\/ Content HTML template(View)
\n|||– app.component.css \/\/ CSS file for Style
\n||\u2514\u2500 app.module.ts \/\/ Root Module
\n||\u2514\u2500 index.html \/\/ Main Html Entry page
\n|
\n|— angular.json \/\/ Configuration file
\n\u2514\u2500\u2500 package.json \/\/ All Node dependency<\/p>\n

 <\/p>\n

Syntax\/Structure –
\n<\/b><\/span><\/span><\/span><\/strong><\/p>\n

import { Componenet } from ‘@angular\/core’;
\n@Component({
\nselctor:’app-example’,
\ntemplateUrl:’.\/exampale.component.html’,
\nstyleUrls:[‘.\/exampale.component.css’]
\n})<\/span><\/span><\/span><\/p>\n

export class ExampaleComponent {
\ntitle = “Hello Angular”;<\/p>\n

constructor(){}<\/p>\n

ngOnInit() :void{}<\/p>\n

}<\/p>\n

 <\/p>\n

\"Angular<\/p>\n

Angular create Services for calling APIs , to connect your app to external data or services. We can use HttpClient to getting data or send and show it using in Angular component Templates.<\/span><\/span><\/span><\/p><\/blockquote>\n

Angular is complete framework for building (creating) interactive and scalable web application, help to developers write clean , maintainable and efficient code using modern web technologies.<\/span><\/span><\/span><\/p><\/blockquote>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Angular Is a JavaScript framework, it is TypeScript-based open-source front-end web application, developed and maintained by Google, it is used to dynamic single-page web application(SPA) , Component based architecture development more modular, reusable and testable, A collection of well-integrated libraries and features, including routing , forms , client-server communication. What is Component:- A Component is […]<\/p>\n","protected":false},"author":1,"featured_media":17,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"yoast_head":"\nBeginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog\" \/>\n<meta property=\"og:description\" content=\"Angular Is a JavaScript framework, it is TypeScript-based open-source front-end web application, developed and maintained by Google, it is used to dynamic single-page web application(SPA) , Component based architecture development more modular, reusable and testable, A collection of well-integrated libraries and features, including routing , forms , client-server communication. What is Component:- A Component is […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\" \/>\n<meta property=\"og:site_name\" content=\"https:\/\/webxcellence.co.in\/blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-25T14:32:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T14:21:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/ceada95dc6adf974cf945e182f21529b\"},\"headline\":\"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module\",\"datePublished\":\"2025-07-25T14:32:57+00:00\",\"dateModified\":\"2025-12-04T14:21:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\"},\"wordCount\":243,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg\",\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\",\"url\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\",\"name\":\"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog\",\"isPartOf\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg\",\"datePublished\":\"2025-07-25T14:32:57+00:00\",\"dateModified\":\"2025-12-04T14:21:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage\",\"url\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg\",\"contentUrl\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webxcellence.co.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#website\",\"url\":\"https:\/\/webxcellence.co.in\/blog\/\",\"name\":\"https:\/\/webxcellence.co.in\",\"description\":\"webxcellence blogs\",\"publisher\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webxcellence.co.in\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#organization\",\"name\":\"https:\/\/webxcellence.co.in\",\"url\":\"https:\/\/webxcellence.co.in\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/logo-2.png\",\"contentUrl\":\"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/logo-2.png\",\"width\":317,\"height\":50,\"caption\":\"https:\/\/webxcellence.co.in\"},\"image\":{\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/ceada95dc6adf974cf945e182f21529b\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9fffbcee1591a87176a4fc0cd6dedfbca46cf51fb9ddf67efe2c46fd0ac801ef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9fffbcee1591a87176a4fc0cd6dedfbca46cf51fb9ddf67efe2c46fd0ac801ef?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/webxcellence.co.in\/blog\"],\"url\":\"https:\/\/webxcellence.co.in\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog","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:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/","og_locale":"en_GB","og_type":"article","og_title":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog","og_description":"Angular Is a JavaScript framework, it is TypeScript-based open-source front-end web application, developed and maintained by Google, it is used to dynamic single-page web application(SPA) , Component based architecture development more modular, reusable and testable, A collection of well-integrated libraries and features, including routing , forms , client-server communication. What is Component:- A Component is […]","og_url":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/","og_site_name":"https:\/\/webxcellence.co.in\/blog","article_published_time":"2025-07-25T14:32:57+00:00","article_modified_time":"2025-12-04T14:21:27+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#article","isPartOf":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/"},"author":{"name":"admin","@id":"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/ceada95dc6adf974cf945e182f21529b"},"headline":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module","datePublished":"2025-07-25T14:32:57+00:00","dateModified":"2025-12-04T14:21:27+00:00","mainEntityOfPage":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/"},"wordCount":243,"commentCount":1,"publisher":{"@id":"https:\/\/webxcellence.co.in\/blog\/#organization"},"image":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg","articleSection":["Angular"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/","url":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/","name":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module - https:\/\/webxcellence.co.in\/blog","isPartOf":{"@id":"https:\/\/webxcellence.co.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage"},"image":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg","datePublished":"2025-07-25T14:32:57+00:00","dateModified":"2025-12-04T14:21:27+00:00","breadcrumb":{"@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#primaryimage","url":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg","contentUrl":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/angular.jpg","width":1500,"height":1000,"caption":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module"},{"@type":"BreadcrumbList","@id":"https:\/\/webxcellence.co.in\/blog\/beginners-guide-to-angular-folder-structure-understanding-the-core-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webxcellence.co.in\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner\u2019s Guide to Angular Folder Structure \u2013 Understanding the Core Module"}]},{"@type":"WebSite","@id":"https:\/\/webxcellence.co.in\/blog\/#website","url":"https:\/\/webxcellence.co.in\/blog\/","name":"https:\/\/webxcellence.co.in","description":"webxcellence blogs","publisher":{"@id":"https:\/\/webxcellence.co.in\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webxcellence.co.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/webxcellence.co.in\/blog\/#organization","name":"https:\/\/webxcellence.co.in","url":"https:\/\/webxcellence.co.in\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/webxcellence.co.in\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/logo-2.png","contentUrl":"https:\/\/webxcellence.co.in\/blog\/wp-content\/uploads\/2025\/07\/logo-2.png","width":317,"height":50,"caption":"https:\/\/webxcellence.co.in"},"image":{"@id":"https:\/\/webxcellence.co.in\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/ceada95dc6adf974cf945e182f21529b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/webxcellence.co.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9fffbcee1591a87176a4fc0cd6dedfbca46cf51fb9ddf67efe2c46fd0ac801ef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9fffbcee1591a87176a4fc0cd6dedfbca46cf51fb9ddf67efe2c46fd0ac801ef?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/webxcellence.co.in\/blog"],"url":"https:\/\/webxcellence.co.in\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":7,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions\/185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webxcellence.co.in\/blog\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}