angular

1. What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It provides powerful tools for building modern, reactive applications, including data binding, directives, and dependency injection.

2. Setting Up Angular

To set up Angular, you need to have Node.js and npm installed. Then, use the Angular CLI to create a new project:

npm install -g @angular/cli
ng new my-angular-app

Navigate to your project directory and start the development server:

cd my-angular-app
ng serve

3. Angular Application Structure

Angular applications follow a modular structure. The key elements include:

• src/app: Contains all components, services, and modules.
• src/assets: Stores static resources such as images and styles.
• angular.json: Configures project settings.

4. Components in Angular

Components are the building blocks of Angular applications. They define the views (UI) and the logic of your application. Here's how you can create a component:

ng generate component my-component

A component includes a TypeScript class, an HTML template, and a CSS file. Example:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent { }

5. Services and Dependency Injection

Services are used for logic and data management. Angular uses dependency injection (DI) to supply services to components and other services:

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'Hello from MyService!';
  }
}

Inject the service into a component:

constructor(private myService: MyService) { }
    
ngOnInit() {
    console.log(this.myService.getData());
}

6. Routing in Angular

Angular uses the RouterModule for navigation between views. Define routes in app-routing.module.ts:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

To navigate between routes in templates:

<a routerLink="/home">Home</a>

7. Directives

Directives are used to modify the behavior of elements in the DOM. Angular provides built-in directives like ngIf and ngFor:

<div *ngIf="showMessage">Message is visible</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

8. Two-way Data Binding

Two-way data binding allows synchronization between the model and the view. Use the [(ngModel)] directive:

<input [(ngModel)]="userInput">

This binds the userInput property in the component class to the input field.

9. Forms in Angular

Angular supports both template-driven and reactive forms. For a template-driven form, use ngModel:

<form #form="ngForm">
  <input name="username" ngModel>
  <button type="submit">Submit</button>
</form>

For reactive forms, you need to import ReactiveFormsModule and use FormGroup and FormControl:

import { FormGroup, FormControl } from '@angular/forms';

this.form = new FormGroup({
  username: new FormControl('')
});

10. Running Angular in Production

To build the application for production, run:

ng build --prod

This command creates an optimized build that you can deploy to a server or hosting service like Firebase or AWS.