angular - dwilson2547/wiki_demo GitHub Wiki

Angular is a platform and framework for building client-side applications using HTML, CSS, and TypeScript. Developed and maintained by Google, Angular is a complete rewrite of its predecessor, AngularJS (released in 2010), and is designed for scalability, performance, and maintainability. It is widely used for single-page applications (SPAs) and enterprise-level applications.

• 1. Key Features of Angular
  • 1.1. Component-Based Architecture
  • 1.2. Two-Way Data Binding
  • 1.3. Dependency Injection (DI)
  • 1.4. Directives
  • 1.5. Services and HTTP Client
  • 1.6. Routing
  • 1.7. RxJS for Reactive Programming
  • 1.8. Angular CLI
• 2. Angular vs. AngularJS
• 3. Angular Architecture
• 4. Example: Simple Angular App
  • 4.1. Create a New App
  • 4.2. Generate a Component
  • 4.3. Edit the Component
  • 4.4. Use the Component
• 5. Angular Ecosystem
• 6. Strengths of Angular
• 7. Weaknesses of Angular
• 8. When to Use Angular
• 9. Example: HTTP Service
• 10. Summary

• Angular applications are built using components, which are self-contained units of HTML templates, CSS styles, and TypeScript logic.
• Example:

  @Component({
    selector: 'app-greeting',
    template: `<h1>Hello, {{name}}!</h1>`,
    styles: [`h1 { color: blue; }`]
  })
  export class GreetingComponent {
    name = 'Angular';
  }

• Synchronizes the model (data) and the view (UI) automatically.
• Example:

  <input [(ngModel)]="name" placeholder="Enter your name">
  <p>Hello, {{name}}!</p>

• Angular’s DI system provides components with the services they need.
• Example:

  @Injectable({ providedIn: 'root' })
  class DataService {
    fetchData() { return ["Data 1", "Data 2"]; }
  }
  
  @Component({ ... })
  class MyComponent {
    constructor(private dataService: DataService) {}
  }

• Structural Directives: Modify the DOM layout (e.g., *ngIf, *ngFor).

  <div *ngIf="isVisible">Content</div>
  <div *ngFor="let item of items">{{item}}</div>

• Attribute Directives: Change the appearance or behavior of elements (e.g., ngClass, ngStyle).

• Services handle business logic, data fetching, and API interactions.
• HTTP Client: Built-in module for making HTTP requests.

  @Injectable({ providedIn: 'root' })
  class ApiService {
    constructor(private http: HttpClient) {}
  
    fetchUsers() {
      return this.http.get('https://api.example.com/users');
    }
  }

• Angular’s Router module enables navigation between views in a single-page application (SPA).
• Example:

  const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}

• Angular uses RxJS (Reactive Extensions for JavaScript) for handling asynchronous operations and event streams.
• Example:

  import { Observable } from 'rxjs';
  
  data$: Observable<string[]> = this.apiService.fetchUsers();

• Command-line interface for scaffolding, building, and deploying Angular applications.
• Common Commands:

  ng new my-app          # Create a new Angular app
  ng generate component my-component  # Generate a component
  ng serve               # Start the development server
  ng build --prod        # Build for production

Angular applications follow a modular structure:

• Modules: Organize the application into cohesive blocks (e.g., AppModule, FeatureModule).
• Components: Define views and logic.
• Templates: HTML with Angular directives.
• Services: Reusable business logic.
• Dependency Injection: Manages service dependencies.

ng new my-angular-app
cd my-angular-app
ng serve

ng generate component greeting

// greeting.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{name}}!</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class GreetingComponent {
  name = 'Angular';
}

<!-- app.component.html -->
<app-greeting></app-greeting>

• Angular Material: UI component library for Material Design.
• Angular Universal: Server-side rendering (SSR) for SEO and performance.
• NgRx: State management library (Redux pattern).
• Ivy Renderer: Faster compilation and smaller bundle sizes (default since Angular 9).

✅ TypeScript: Strong typing and tooling support. ✅ Modularity: Organize code into reusable modules. ✅ Two-Way Data Binding: Simplifies synchronization between model and view. ✅ Dependency Injection: Makes components testable and maintainable. ✅ RxJS Integration: Powerful reactive programming. ✅ Enterprise-Grade: Scalable for large applications. ✅ Google Backing: Long-term support and updates.

❌ Steep Learning Curve: Complex for beginners. ❌ Verbose: Requires more boilerplate than React/Vue. ❌ Performance: Can be slow if not optimized (e.g., change detection). ❌ Frequent Updates: Breaking changes between major versions.

• Enterprise Applications: Large-scale, maintainable apps.
• Single-Page Applications (SPAs): Dynamic, interactive UIs.
• Projects Requiring Structure: Opinionated framework with clear patterns.
• TypeScript Projects: Leverage TypeScript’s benefits.

// api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  fetchUsers(): Observable<any[]> {
    return this.http.get<any[]>('https://api.example.com/users');
  }
}

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let user of users">{{user.name}}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.fetchUsers().subscribe(data => {
      this.users = data;
    });
  }
}

• Angular is a powerful, opinionated framework for building scalable, maintainable SPAs.
• Key Features: Components, two-way data binding, dependency injection, RxJS, and Angular CLI.
• Use Cases: Enterprise apps, SPAs, and projects requiring structure.
• Strengths: TypeScript support, modularity, and Google backing.
• Weaknesses: Steep learning curve and verbosity.

Angular is ideal for large-scale applications where structure, maintainability, and TypeScript are priorities. For smaller projects or simpler needs, alternatives like React or Vue.js might be more suitable.