Scribd
Upload
2 views

sqlfa

Angular is a TypeScript-based open-source framework for building single-page applications, developed by Google. It features a modular architecture with components, services, and directives, and supports data binding, routing, and HTTP client functionalities. Additionally, Angular provides lifecycle hooks and pipes for managing component behavior and data formatting.

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
2 views

sqlfa

Angular is a TypeScript-based open-source framework for building single-page applications, developed by Google. It features a modular architecture with components, services, and directives, and supports data binding, routing, and HTTP client functionalities. Additionally, Angular provides lifecycle hooks and pipes for managing component behavior and data formatting.

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 fds sssdwq


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