Beginner’s Guide to Angular Folder Structure – Understanding the Core Module

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 the basic building block of the User-Interface
(UI)
A TypeScript Class – Content the logic and data for the component
HTML Template(view) – How the view is rendered.
CSS/Style -Styles the template
Component is define @Component decorator.

 

Project Structure-

angular-app/

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

 

Syntax/Structure –

import { Componenet } from ‘@angular/core’;
@Component({
selctor:’app-example’,
templateUrl:’./exampale.component.html’,
styleUrls:[‘./exampale.component.css’]
})

export class ExampaleComponent {
title = “Hello Angular”;

constructor(){}

ngOnInit() :void{}

}

 

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.

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.