Comprehensive Angular 2
嚜澧omprehensive Angular 2
Review of Day 2
of
sy c
rte In
ou o
C itis
Z
Directive:
? class with logic to transform the DOM
? @Directive() 每 to decorate the class to declare as directive type
? types:
? component:
? components (@Component) = directives with a template
? structural:
? alters DOM 每 add, remove, replace elements
? built-in:
? ngIf:
? *ngIf = ※boolean_condition§
? if false, DOM block is not instantiated
? recommended over CSS hidden
? ngFor:
? *ngFor = ※let variable of array§
? loops through array building DOM block for each loop
? ngSwitch:
? experimental
? works with ngSwitch and ngCase tags
? attribute:
? alter appearance or behaviour of existing elements
? built-in:
? ngClass supports:
? setting many CSS classes at one time
? allows for logic to be applied to style choices
? [ngClass] = ※setClasses()§
? where setClasses is method in component which
determines classes to apply
? ngStyle supports:
? setting many inline styles at one time
Page 1 of 6
courtesy of Zitiso Inc.
Comprehensive Angular 2
Review of Day 2
of
sy c
rte In
ou o
C itis
Z
? allows for logic to be applied to styles to useClass
? [ngStyle] = ※setStyles()§
? where setStyles is method in component which
determines classes to apply
Services:
? class delivering specific reusable purpose:
? function 每 e.g. logger
? feature 每 e.g. message bus
? value 每 e.g. application configuration
? coding:
? annotate class with @Injectable() decorator:
? supports allowing Angular engine to resolve class＊s dependencies
? all other Angular types are subtypes of Injectable
? put logic of service in class
? using service:
? register:
? import module containing service
? define the provider element:
providers: [ Service] // new instance created using the Service class to create it
// short hand for next option 每 when registration name and
// class to use is the same
providers: [{provide: Service, useClass: ServiceClass}] // new instance created
// using the ServiceClass to create it
providers: [{provide: Service, useExisting: ServiceObjectClass}] // create if
// needed, else existing object used
providers: [{provide: Service, useValue: serviceObjectReference}] // use existing
// object, bypasses the injector＊s need to create instance
? use service in code, e.g. component can declare a reference to service
object and call its functions
Page 2 of 6
courtesy of Zitiso Inc.
Comprehensive Angular 2
Review of Day 2
of
sy c
rte In
ou o
C itis
Z
Dependency Injection:
? Angular provides an injection engine 每 called ※DI§
? Resolves dependencies at run-time automatically
? Services are singletons per injector:
? Injector engine looks up the tree to find an instance
? Creates new instance if none exist
? Multiple instances possible:
? sandbox service instances
? use @Host decorator to stop upward search at host component for
service.
? Allow for service to not be available:
? some services may not be instantiated due to system issues
? if not needed, add @Optional:
? returns null if service unavailable
? code to test for null
Lifecycle Hooks:
? callbacks at stages in object＊s lifecycle:
Page 3 of 6
courtesy of Zitiso Inc.
Comprehensive Angular 2
Review of Day 2
of
sy c
rte In
ou o
C itis
Z
? use in code:
? import interfaces
? add ※implements§ to class declaration
? code the interface method:
? OnChanges 每 ngOnChanges()
? OnInit 每 ngOnInit()
? OnDestroy 每 ngDestroy()
Inter-component communication:
? Parent to child:
? in child component:
? @Input() variable: ParentProperty
? use variable in code and template
? Child to parent:
? in child component:
? @Output() variable = newEventEmiter():
? EventEmitter API
? in logic when data needs to be passed up to parent:
? this.variable.emit(data_reference)
Component styles:
? bundle component styles to use for view:
? @Component element:
? internal 每 styles: array// multi-line string
? external 每 stylesUrls: url // resolves to location of .css file
? selectors for styles:
? :host = target styles in the element that hosts the component
? :host-context = apply style to fit with parent elements
? /deep/ = force style down to children
Page 4 of 6
courtesy of Zitiso Inc.
Comprehensive Angular 2
Review of Day 2
of
sy c
rte In
ou o
C itis
Z
Change Detection:
? State change triggers:
? user event
? HTTP request or web socket message, e.g. XHR request fetching
data
? Timer
? Mechanism:
? each component has own change detector
? strategies:
? Declare in @Component using ※changeDetection§ element
? ChangeDetectionStrategy.Default:
? one change triggers update to whole tree
? ChangeDetectionStrategy.onPush:
? only change specific component
Forms:
? Design options:
? Template driven:
? use FormsModule:
? add tags to view:
? ngForm:
? added automatically if not done
? controls the elements tagged with ngModel
? monitors state, e.g. validity
? ngModel:
? track changes
? manage element validation
? data binding
? create #reference_variables for ngModel in views
? use to check element state
Page 5 of 6
courtesy of Zitiso Inc.
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.