Essentials Of Creating Angular SPA Application

[reboottime]

Essentials of creating SPA using Angular Stack

This note is a essential list of creating angular app SPA, content covered are

• Angular Basics
  • directives
  • component:
    • define a component: html template, styling, and component state
    • component lifecycle hooks
  • module: declarations, imports, providers, bootstrap(app level only)
  • Observable: push mode (observable) vs pull mode( pull mode)
  • life cycle events
  • communication between parent and children
    • @Input: define what property a parent component passes to is specific child component, for example
    • @Output: define communication from child to parent via event emitter instance, for example
    • Event Emitter
• Angular Routing
  • Route:
    • forRoot
    • forChild
    • nested routing
  • lazy loading
  • route guard
    • route guardian
    • child route guardian
• State Management using ngrx: Similar to Vuex/React Redux
  • The simplest example, a counter application
• CI/CD: built in support on env:
  • Angular CLI supports generate environment preset files for development, staging, and production.
  • At each code building time, you can specify the building environment based on your needs via the --configuration parameter, for example, build your code for staging environment. ng build --configuration=staging
  • With above mechanism, you can specify the building environment in CI/CD pipeline and read different configurations for that environment.

[reboottime]

Angular component life cycle events

constructor

used only when you want to inject some services

Details

1. ngOnChanges: This hook is called whenever one or more data-bound input properties of a directive or a component changes. It receives a SimpleChanges object containing the previous and current values of the input properties.

   When to use: Use this hook when you need to react to changes in input properties.

2. ngOnInit: This hook is called after Angular has initialized all data-bound properties of a directive. It is a good place to perform initialization logic for your component.

   When to use: Use this hook when you need to set up the initial state of your component or perform one-time initialization tasks.

3. ngDoCheck: This hook is called during every change detection cycle. It allows you to perform your own custom change detection logic.

   When to use: Use this hook when you need to implement custom change detection or perform more granular change detection.

4. ngAfterContentInit: This hook is called after Angular has projected external content (e.g., content passed between component tags).

   When to use: Use this hook when you need to perform initialization logic that relies on content projection.

5. ngAfterContentChecked: This hook is called after Angular has checked the content projected into the component.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the content.

6. ngAfterViewInit: This hook is called after Angular has initialized the component's views and child views.

   When to use: Use this hook when you need to perform initialization logic that relies on the view or its child views.

7. ngAfterViewChecked: This hook is called after Angular has checked the component's views and child views.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the views.

8. ngOnDestroy: This hook is called just before Angular destroys the component. It is a good place to clean up resources, unsubscribe from observables, etc.

   When to use: Use this hook when you need to clean up resources or perform any necessary cleanup before a component is destroyed.

Real-world Usage Examples:

1. ngOnInit: Use this hook to fetch initial data from a server or set up initial state based on input properties.

2. ngOnChanges: Use this hook to react to changes in input properties. For example, if you have a component that displays user details, you can use this hook to update the display whenever the user data changes.

3. ngAfterViewInit: Use this hook when you need to interact with the DOM or perform operations that require the view to be fully initialized. For example, if you need to work with a specific element in the template, this is the appropriate hook.

4. ngOnDestroy: Use this hook to clean up resources like subscriptions to observables or event listeners to prevent memory leaks.

Remember, the choice of which lifecycle hook to use depends on the specific requirements of your application and component. Use the appropriate hooks to manage the state and behavior of your components effectively.

[reboottime]

Angular Directives

Angular directives are powerful features that allow you to extend HTML with custom attributes and elements. They are an essential part of building dynamic and interactive web applications using the Angular framework. Directives allow you to manipulate the Document Object Model (DOM), control the behavior of HTML elements, and create reusable components.

There are three types of directives in Angular:

1. Component Directives:

   • Components are directives with a template. They combine a template, which is an HTML structure, with a class that provides the behavior logic. Components are the building blocks of an Angular application.
   • They are typically used to create reusable UI elements or small sections of a web page.
   • Example: <app-header></app-header>

2. Attribute Directives: any valid html properties

   • Attribute directives modify the appearance or behavior of an element. They change the behavior or style of a DOM element without changing the underlying structure.
   • They are used by applying them as attributes on HTML elements.
   • Example: <div [ngClass]="{'my-class': isActive}"></div>
   • You can also use it to bind event handling, for example

3. Event binding Directives

<button type="button" (click)="clickMessage=$event" clickable>click with myClick</button>
{{clickMessage}}

3. Structural Directives:
   • Structural directives change the structure of the DOM by adding or removing elements. They are responsible for altering the layout by manipulating the DOM tree.
   • They use the asterisk (*) syntax.
   • Example: <div *ngIf="condition">Content to display</div>

Here's a brief overview of some commonly used built-in directives in Angular:

• ngIf: Conditionally adds or removes elements from the DOM based on an expression.
• ngFor: Iterates over a list of items and renders a template for each item.
• ngSwitch: Conditionally displays elements based on matching cases.
• ngClass and ngStyle: Dynamically applies CSS classes or styles based on conditions.
• ngModel: Provides two-way data binding for form elements.

Additionally, you can create your own custom directives when you need to encapsulate and reuse a specific behavior across your application.

To use a directive, you'll include it in your Angular application by importing it and then using it in your HTML templates.

For example, to use the ngIf directive:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="isVisible">Content to display</div>
  `
})
export class ExampleComponent {
  isVisible = true;
}

In this example, the *ngIf directive is used to conditionally display the content based on the value of isVisible.

Remember that directives are a fundamental part of Angular's declarative approach to building web applications, allowing you to create dynamic, data-driven user interfaces with ease.

[reboottime]

References

1. Angular official website
2. Ngrx, centralized state management solution for Angular SPA
3. Build a hotel inventory SPA using Angular