Scribd
Upload
19 views2 pages

Angular Framework Overview and Basics

This document provides an overview of Angular, a TypeScript-based framework for building single-page applications, detailing its architecture, components, data binding types, directives, routing, services, HTTP client, forms, lifecycle hooks, and pipes. Key concepts include the use of decorators like @NgModule and @Component, as well as dependency injection for services. It also covers the configuration of routing and the implementation of both template-driven and reactive forms.

Uploaded by

laledi5974
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views2 pages

Angular Framework Overview and Basics

This document provides an overview of Angular, a TypeScript-based framework for building single-page applications, detailing its architecture, components, data binding types, directives, routing, services, HTTP client, forms, lifecycle hooks, and pipes. Key concepts include the use of decorators like @NgModule and @Component, as well as dependency injection for services. It also covers the configuration of routing and the implementation of both template-driven and reactive forms.

Uploaded by

laledi5974
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

1.

Introduction to hjks
Angular is a TypeScript-based open-source front-end web framework.

Developed and maintained by Google.

Used for building single-page applications (SPAs).

2. Angular Architecture
Modules: @NgModule decorator, organizes app into cohesive blocks.

Components: Basic building blocks with @Component decorator.

Templates: HTML + Angular directives and bindings.

Services: Logic shared across components, created with @Injectable.

Dependency Injection (DI): Inject services into components.

3. Component Basics
ts
Copy
Edit
@Component({
selector: 'app-hello',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class HelloComponent {
name = 'Angular';
}
Selector: Custom HTML tag.

Template: Defines view.

StyleUrls: CSS/SCSS for the component.

4. Data Binding Types


Interpolation: {{ value }}

Property Binding: [property]="value"

Event Binding: (event)="handler()"

Two-way Binding: [(ngModel)]="value" (requires FormsModule)

5. Directives
Structural Directives: *ngIf, *ngFor, *ngSwitch

Attribute Directives: [ngClass], [ngStyle], custom directives

6. Routing
Configure in [Link]

ts
Copy
Edit
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
Use <router-outlet></router-outlet> in templates.

Navigation via <a [routerLink]="['/home']">Home</a>

7. Services & Dependency Injection


ts
Copy
Edit
@Injectable({
providedIn: 'root'
})
export class DataService {
getData() {
return ['A', 'B', 'C'];
}
}
Injected in components via constructor.

8. HTTP Client
Import HttpClientModule

ts
Copy
Edit
constructor(private http: HttpClient) {}

getData() {
return [Link]('[Link]
}
9. Forms
Template-driven: Uses FormsModule, two-way binding.

Reactive Forms: Uses ReactiveFormsModule, more scalable.

ts
Copy
Edit
[Link] = new FormGroup({
name: new FormControl('', [Link])
});
10. Lifecycle Hooks
ngOnInit(): Called after component initialized.

ngOnChanges(): Respond to input changes.

ngOnDestroy(): Cleanup before component removed.

11. Pipes
Format data in templates.

html
Copy
Edit
{{ birthday | date }}
{{ name | uppercase }}
Custom pipe: use @Pipe and implement transform().

You might also like