Angular

Architecture

Module

• NgModules: compliation context for components.
  • A set of components
  • services
  • provide functionality
  • export functionality from other NgModules or import from other NgModules
  • Root Module: AppModule
    • provide bootstrap mechanism
  • declarations: The components, directives and pipes that will used in the modules
  • exports: the subset of declarations can be used by other modules
  • imports: import other modules' declarations used in this module
  • providers: creators of services
  • bootstrap: The main application view.

Components

• @Component
• root component
• Event binding (event)="statement"/on-event="statement"
• Property binding [property]="expression"/bind-event="expression"
  • one-time string initialization
• Two-way data binding [(target)] ="expression"/bindon-target="expression"
  • desugar: [target]="variable" (targetChange)="variable=$event"
• template reference variables
• structural directives
• input(property) and output(event) properties

Services and dependency injection

• @Injectable
• injector: creates dependencies, maintains a container of dependency instances
• provider: tell an injector how to obtain or create a dependency

Components & Templates