Scribd
Upload
7 views2 pages

sqls - Copy

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

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
7 views2 pages

sqls - Copy

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

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
You are on page 1/ 2

1.

Introduction to sda
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: './hello.component.html',
styleUrls: ['./hello.component.css']
})
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 app-routing.module.ts

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 this.http.get('https://api.example.com/data');
}
9. Forms
Template-driven: Uses FormsModule, two-way binding.

Reactive Forms: Uses ReactiveFormsModule, more scalable.

ts
Copy
Edit
this.form = new FormGroup({
name: new FormControl('', Validators.required)
});
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