Angular 2 provides the basic building blocks for developing client applications including: Components, which control a view and associate with a template; Directives, which alter elements in the DOM; Services, which provide reusable business logic; and Metadata, which provides information to Angular on how to process classes. The key building blocks work together through templates, data binding, dependency injection, and a component-tree-based architecture to develop Angular applications.

1. Angular 2
THE BASIC BUILDING BLOCKS OF ANGULAR 2 APPLICATIONS

2. OVERVIEW
 Angular 2 is a framework to help us build client applications in HTML and
either JavaScript or a language (like Dart or TypeScript).
 With Angular, we write applications by composing
 HTML templates with Angularized markup,
 writing component classes to manage those templates,
 adding application logic in services,
 and handing the top root component to Angular's bootstrapper.

3. Building blocks
 An Angular 2 for Dart application rests on seven main building blocks:
1. Components
2. Metadata
3. Templates
4. Data binding
5. Directives
6. Services
7. Dependency injection

4. ARCHITECTURE

5. Components
A component controls a patch of screen real estate that we could call a view
class HeroListComponent {
List<Hero> heroes;
Hero selectedHero;
HeroListComponent(HeroService heroService) {
heroes = heroService.getHeroes();
}
selectHero(Hero hero) {
selectedHero = hero;
}
}

6. Templates
We define a component's view with its companion template. A template is a
form of HTML that tells Angular how to render the component
<h2>Hero List</h2>
<div *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{hero.name}}
</div>
<hero-detail *ngIf="selectedHero != null"
[hero]="selectedHero"></hero-detail>

7. Component Tree

8. Metadata
Metadata tells Angular how to process a class.
@Component(
selector: 'hero-list',
templateUrl: 'hero_list_component.html',
styleUrls: const ['hero_list_component.css'],
directives: const [HeroDetailComponent],
providers: const [HeroService]
)
class HeroListComponent { ... }

9.  At runtime, Angular discovers the metadata specified by
the @Component annotation. That's how Angular learns
how to do "the right thing".
 The template, metadata, and component together
describe the view.
 We apply other metadata annotations in a similar fashion
to guide Angular behavior. @Injectable, @Input,
@Output, and @RouterConfig are a few of the more
popular annotations we'll master as our Angular
knowledge grows.
At runtime, Angular discovers the metadata specified by the @Component annotation. That's how Angular learns how to do "the right thing".
The architectural takeaway is that we must add metadata to our
code so that Angular knows what to do.

10. Data binding
Without a framework, we would be responsible for pushing data values into
the HTML controls and turning user responses into actions and value updates.
Angular supports data binding, a mechanism for
coordinating parts of a template with parts of a
component. We add binding markup to the
template HTML to tell Angular how to connect
both sides.
There are four forms of data binding syntax. Each
form has a direction — to the DOM, from the
DOM, or in both directions — as indicated by the
arrows in the diagram.

11. <div ... >{{hero.name}}</div> String Interpolation
DOM  Component
The {{hero.name}} Interpolation displays the
component's hero.name property value within
the <div> tags.
<hero-detail ...
[hero]="selectedHero"></hero-
detail>
Property Binding
DOM  Component
The [hero] property binding passes
the value of selectedHero from the
parent
<div ...
(click)="selectHero(hero)">...</div>
Event Binding
DOM  Component
The (click) event binding calls the
component's selectHero method
when the user clicks a hero's name.
<input
[(ngModel)]="hero.name"></div>
Two-way data binding
DOM  Component
Important fourth form that
combines property and event
binding in a single notation, using
the ngModel directive

12. Two-way data binding
Data binding is also important for communication between parent and child
components

13. Directives
A directive is a class with directive metadata. In Dart we apply the @Directive
annotation to attach metadata to the class.
 A component is a directive-with-a-template; a
@Component annotation is actually a
@Directive annotation extended with
template-oriented features.
 Two other kinds of directives exist: structural
and attribute directives.
 Structural directives alter layout by adding,
removing, and replacing elements in DOM.
 Attribute directives alter the appearance or
behavior of an existing element.

14. Structural Directives
<div *ngFor="let hero of heroes">
<h1> {{hero.name}}</h1>
</div>
<hero-detail *ngIf="selectedHero != null"
>
<h1> {{hero.name}}</h1>
</hero-detail>
Attribute Directives
<div>
<input [(ngModel)]="hero.name">
</div>

15. Services
Services is a broad category encompassing any value, function, or feature that
our application needs.
 Almost anything can be a service. A service is
typically a class with a narrow, well-defined
purpose. It should do something specific and
do it well.
 A component's job is to enable the user
experience and nothing more. It mediates
between the view (rendered by the template)
and the application logic (which often includes
some notion of a model).

16. Dependency injection
Dependency injection is a way to supply a new instance of a class with the
fully-formed dependencies it requires.
 Most dependencies are services. Angular uses
dependency injection to provide new
components with the services they need.
 Angular can tell which services a component
needs by looking at the types of its constructor
parameters.
 When Angular creates a component, it first
asks an injector for the services that the
component requires.

17. Angular features and services
 Animations:
 Bootstrap:
 Change detection:
 Component router:
 Events:
 Forms:
 HTTP:
 Lifecycle hooks:
 Pipes: