Scribd
Upload
2 views

Node7 - Copy

The document provides an overview of Angular, a TypeScript-based front-end framework developed by Google for building single-page applications. It covers key concepts such as Angular architecture, components, data binding, directives, routing, services, HTTP client, forms, lifecycle hooks, and pipes. Each section includes code snippets and explanations of how to implement these features in an Angular application.

Uploaded by

laledi5974
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Node7 - Copy

The document provides an overview of Angular, a TypeScript-based front-end framework developed by Google for building single-page applications. It covers key concepts such as Angular architecture, components, data binding, directives, routing, services, HTTP client, forms, lifecycle hooks, and pipes. Each section includes code snippets and explanations of how to implement these features in an Angular application.

Uploaded by

laledi5974
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Introduction to aaass
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