Angular

TECH SESSION Lapusneanu Gabi Costel

 Key Features

01 Modules Data Binding / Events 04

02 Directives Services 05

03 06
Components Dependency Injection
 Modules

Angular Modules help organize an application into cohesive blocks of functionality.

Metadata Definitions
bootstrap?: Array<Type<any> | any[]> Components that should be bootstrapped when this module is
bootstrapped.

01
imports?: Array<Type<any> | ModuleWithProviders | any[]>
Annotation List of modules whose exported directives/pipes should be available
to templates in this module. 04
providers?: Provider[] Set of injectable objects that are available in the injector of module.

02 exports?: Array<Type<any> | any[]> List of directives/pipes/modules that can be use within the template of any
component that is part of an Angular module.

declarations?: Array<Type<any> | any[]> List of directives/pipes that belong to module.

entryComponents?: Array<Type<any> | any[]> List of components that should be compiled when this module is defined.

@NgModule
Tells Angular how to process a class.
 Directives
Angular Directives allow you to attach behavior to elements in the DOM.

Metadata Definitions
selector?: string CSS selector that identifies this component in a template.
queries?: { [key: string]: any; } Configure queries that can be injected into the component.
host?: { [key: string]: string; } Annotation ListMapof ofclass
class property to host element bindings for events, properties and attributes.
property names to data-bind as component inputs. 04
inputs?: string[]
outputs?: string[] List of class property names that expose output events that others can subscribe to.
providers?: Provider[] List of providers available to this component and its children.
exportAs?: string @Directive Name under which the component instance is exported in a template.

C A N VA S
Class: Attribute: Name : Attribute & Value : Selectors :
`.class` `[attribute]` `element-name` `[attribute=value]` `selector1, selector2`

There are three kinds of Angular directives: Components, Attribute directives and Structural directives.
 Components
Angular Components are the main way we build and specify elements and logic on the page.

Metadata Definitions
viewProviders?: Provider[] List of providers available to this component and its view children.
interpolation?: [string, string] Custom interpolation markers used in this component's template {{}}.
templateUrl?: string Annotation Inline-defined
Url to an external file containing a template for the view.
template for the view. 04
template?: string
entryComponents?: Array<Type<any> | any[]> List of components that are dynamically inserted into the view.
changeDetection?:ChangeDetectionStrategy Change detection strategy used by this component (OnPush, Default).
animations?: AnimationEntryMetadata[] List of animations of this component.
styleUrls?: string[] List of urls to stylesheets to be applied to this component's view.
styles?: string[] Inline-defined styles to be applied to this component's view.
encapsulation?: ViewEncapsulation Style encapsulation strategy used by this component (Native, Emulated, None)
@Component
Tells Angular how to process a class.
Angular components are a subset of directives.
 Component Lifecycle
A component has a lifecycle managed by Angular itself.

Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.

2 ngOnInit
1 ngOnChanges
Called before ngOnInit
and whenever one or
more data-bound input
properties change.
Called once, after the
first ngOnChanges.
3 ngDoCheck
Called during every change
detection run, immediately
after ngOnChanges and
ngOnInit.

7 ngAfterViewChecked
Respond after Angular
checks the component's
views and child views.
8 ngOnDestroy
Called just before
Angular destroys the
directive/component.
4 ngAfterContentInit
Respond after Angular
projects external content
into the component's view.

6 ngAfterViewInit 5 ngAfterContentChecked
Respond after Angular initializes the Respond after Angular checks the
component's views and child views. content projected into the
component.
 Basic Application
An Angular application is a tree of components.

Every Angular application has at least one module: the root module.

01 03
Bootstrap the root
Create the root
module* module

02
Create the entry
component of
module

*By convention it's a class called AppModule in a file named app.module.ts.

 Basic Application (Code)

Angular Tech Session 1+2=3

 Architecture
Application

Angular Frameworks
Router Http Compiler Platform

core & common

Libraries
Rx Reflect Zone System

shim
 Bootstrap

A manual bootstrap of the application must be done.

 Expressions
Angular expressions employs a subset of JavaScript syntax supplemented with a few special
operators for specific scenarios.

{{expression}}

((expression))

There are some restrictions for literals used in interpolation (INTERPOLATION_BLACKLIST_REGEXPS).

Angular Tech Session 1+2 = {{1 +2}} | 1+2=3

 Data Binding / Events

Data Source View Source

View Target Data Source

Component Attribute Target Event Two-way

DOM [attr.attr-name] (target) = "statement" [(target)] = "expression"
on-target = "statement" bindon-target = "expression"

Interpolation Class Custom Events

{{ }} [class.class-name] EventEmitter

Property
[property] Style
bind-target [style.style-property]
Communication
 Services
Services are substitutable objects that are wired together using
dependency injection (DI).

Share code across an application.

03
Import and register

02
service.

01
Create a class.
Import Injectable
function and applied
that function as an
@Injectable()
decorator.

SUGGESTION: ADD @INJECTABLE() TO EVERY SERVICE CLASS.

Services (Code)
 Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.

Angular creates an application-wide injector for us during the bootstrap process.

An Injector is itself an injectable service.

Dependencies are singletons within the scope of an injector.

DI is an hierarchical injection system, which means that nested injectors can create
their own service instances.

Every component has an injector.

(even if it shares that injector with another
component) and there may be many different
injector instances operating at different
levels of the component tree.
Time for (DEMO)

https://github.com/lapusneanugabi/Angular-TechSession.git
THANK YOU!