Main Building Blocks of Angular2

  • Module
  • Routes
  • Component

  • Service

    Modules

    Angular2 uses the modules for core mechanisam for composition.
    Modules export things that other modules can import.
    @NgModule is a organizational mechanism used within an Angular applications.@NgModule takes a metadata object that tells angular how to compile and run module code.

  • Declarations define view classes that are available to the module

  • Imports define a list of modules that the module need
  • Service define the list of services the module make available
  • Bootstrap defines the component that should be bootstraped

    Routes

  • Contains a path and component reference
  • Components are loaded into the router-outlet component
  • We can navigate to router link using routerLink or router.navigate directive
  • Router uses history.pushState which means we need to set a base-ref tag to our index.html file

    Component

  • Contains a template and a class
  • properties and methods of component class are available to the template.
  • Providers (Service) are injected in the constructor

  • Hook into component lifecycle with hooks

    Templates
    • A template is HTML that tells Angular how to render a component
    • Template include data bindings as well as other components and directives
      Metadata
    • Allows angular to process a class
    • We can attach metadata with TypeScript using decorators

    • Decorators are just functions, most commonly use the @Component() decorator, takes the config option with selector,templateUrl,styles,styleUrl, animations etc.

      Data Binding

      Enables the data to flow from component to template and vice-versa.
      Includes interpolation,property binding,event binding and two-way data binding(property binding and event binding combained)

      Syntax:

      Interpolation-
      Property binding-[property] =”value”
      Event binding-(event)=”handler”
      Two-way data binding-[(ngModel)]=”property”

      Service

  • Service is just a class
  • Decorate with @Injectable when we need to inject dependencies into our service