Skip to main content

1. Intro

It is used in Single Page Applications Project.

It extends HTML DOM with additional attributes and make it more responsive to user actions.

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Eight main building blocks of an Angular application

Angular Features​

  1. Animations
  2. Change Detection
  3. Events
  4. Forms
  5. HTTP
  6. Lifecycle hooks
  7. Pipes
  8. Router
  9. Testing
  • Angular CLI
  • App Components
  • Pipe
    • Uppercase pipe
  • Two - way data binding
    • Using ngModel directive
  • App Module
  • Forms Module
  • *ngFor - Angular Repeater Directive
  • Angular's Event Binding
    • (click)="onSelect(hero)"

Angular​

  • Front-end Framework
  • Angular helps you organize your JavaScript
  • Angular helps create responsive (as in fast) websites
  • Angular plays well with jQuery
  • Angular is easy to test

Traditional Page-Refresh Response Cycle​

  1. Initiate a request

  2. Response with Webpage & Assets

  3. New Request

  4. New Response (loads entire webpage again)

Modern API-Driven Application​

Next set of requests only data is sent in JSON format and data is loaded back to the same assets and view is updated.

Definition​

A client-side JavaScript Framework for adding interactivity to HTML.

Topics​

  • Use built-in Angular directives to show and hide elements and display lists of hero data.
  • Create Angular components to display hero details and show an array of heroes.
  • Use one-way data binding for read-only data.
  • Add editable fields to update a model with two-way data binding.
  • Bind component methods to user events, like keystrokes and clicks.
  • Enable users to select a hero from a master list and edit that hero in the details view.
  • Format data with pipes.
  • Create a shared service to assemble the heroes.
  • Use routing to navigate among different views and their components.