#setups teps
- Make sure node, angular cli, and npm are installed.
node -v npm -v ng --version
- Test application
ng serve http://localhost:4200/
- To build project
ng build
- Package.json : Contains dependencies like pom.xml
When you create a new Angular project using:
ng new my-appAngular automatically creates the project structure. One of the important folders is:
src/
├── app/
├── assets/
├── index.html
└── main.ts
When you run the application using:
ng serveand open the application in the browser (for example, http://localhost:4200), Angular starts the application.
The browser first loads index.html, which is the entry point of the application.
Example:
<body>
<app-root></app-root>
</body><app-root> is a custom HTML tag.
Angular looks for the component whose selector is app-root.
Example:
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
}Since the selector is app-root, Angular replaces:
<app-root></app-root>with the HTML from app.html.
A selector is the unique name used to identify a component.
Angular searches for that selector in the HTML and renders the corresponding component.
Example:
selector: 'app-root'means Angular will look for:
<app-root></app-root>Similarly,
selector: 'app-header'can be used as:
<app-header></app-header>to display the Header component.
Angular automatically creates the src/app folder.
This folder contains the root component of the application.
For example:
app/
├── app.ts
├── app.html
├── app.css
└── app.routes.ts
app.ts contains the component definition.
It tells Angular:
- the component's selector
- which HTML template to use
- which CSS file to use
- the TypeScript logic for the component
Example:
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
title = 'Angular Demo';
}app.html is the template of the root component.
Whatever is written inside this file is displayed when the root component is rendered.
Example:
<h1>Welcome to Angular</h1>This is what the user sees in the browser.
Every Angular component typically consists of:
- TypeScript (.ts) – Component logic
- HTML (.html) – User interface (template)
- CSS/SCSS (.css/.scss) – Styling
Example:
header/
├── header.ts
├── header.html
└── header.css
The TypeScript file connects the HTML and CSS together through the @Component decorator.
ng serve
│
▼
Browser opens http://localhost:4200
│
▼
index.html is loaded
│
▼
<app-root></app-root>
│
▼
Angular looks for selector "app-root"
│
▼
App Component (app.ts)
│
▼
Loads app.html + app.css
│
▼
Application is displayed in the browser
This project was generated using Angular CLI version 21.1.2.
To start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
#youtube: https://www.youtube.com/watch?v=-BSKcnK2ZBQ&list=PL8p2I9GklV45--5t7_N4lveUI6Y31vQ6C&index=3
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
To execute unit tests with the Vitest test runner, use the following command:
ng testFor end-to-end (e2e) testing, run:
ng e2eAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.