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)
    • Using angular material ui, you import the module you use
    • You can also organize your codebase based on module, such that you can remove the imports declaration of a parent module.
  • Observable: push mode (observable) vs pull mode( pull mode)
  • life cycle events
  • communication between parent and children components
    • @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.
• Angular Material UI: After using material UI of angular, Angular UI libraries are directive driven, module based.

[reboottime]

References

• Ngrx, a centralized state management solution for angular app
• Angular official website
• Build a hotel inventory SPA application using angular