Scribd
Upload
2 views2 pages

Node7 - 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 for modules and components, various types of data binding, and the implementation of dependency injection. It also covers the setup of routing and the use of HTTP client for data retrieval.

Uploaded by

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

Node7 - 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 for modules and components, various types of data binding, and the implementation of dependency injection. It also covers the setup of routing and the use of HTTP client for data retrieval.

Uploaded by

regaw96937
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 aadasasss
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