Angular 4
Components, Modules
Components
Text
• Declare reusable UI building blocks for an application.
• The @Component annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
Component’s definition
Text
• An Angular application is a tree of components.
• A component controls a patch of screen real estate that we could call a view.
• We define a component's application logic inside a class. The class interacts with the view through an API of properties and methods.
Example
Text
Component and Directive
Text
∙There are three kinds of directives in Angular:
∙Components
∙Structural directives
∙Attribute directives
Component configuration
Text
• selector
• templateUrl
• directives
• providers
Template
Text
• A template is a form of HTML that tells Angular how to render the component.
∙interpolation {{ }}
∙property binding [ ]
∙event binding ( )
∙two-way data binding [ () ]
Template
Text
import {
Component, ViewEncapsulation
} from '@angular/core';
@Component({
selector: 'cr-counter',
styleUrls: [ './counter.scss' ],
templateUrl: './counter.html',
encapsulation: ViewEncapsulation.None
})
export class CounterComponent {
public counter: number = 0;
increment() {
this.counter++;
}
}import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterComponent } from './counter.component';
@NgModule({
declarations: [
CounterComponent
],
imports: [
CommonModule
],
exports: [ CounterComponent ]
})
export class CounterModule {
}Template with @Input and @Output
Text
- «Inputs», указывают, какие свойства вы можете установить на компоненте;
- «Outputs» идентифицируют события, которые компонент может инициировать для отправки информации по иерархии родительскому элементу.
Template with @Input and @Output
Text
template:
using:
Template with @Input and @Output
Text
module:
index:
Template with NG-CONTENT
Text
template:
using:
Multiple:
Property binding or interpolation?
Text
• There is no technical reason to prefer one form to the other.
CLASS BINDING
• We can add and remove CSS class names from an element’s class attribute with a class binding.
• We can set inline styles with a style binding.
COMPONENT LIFECYCLE
• A Component has a lifecycle managed by Angular itself.
• Angular offers component lifecycle hooks that give us visibility into component’s key moments and the ability to act when they occur.
• Developers can tap into key moments in that lifecycle by implementing Lifecycle Hook interfaces.
COMPONENT LIFECYCLE
ngOnInit - Initialize the component after Angular initializes the data-bound input properties.
ngOnChanges - Respond after Angular sets a data-bound input property.
ngDoCheck - Detect and act upon changes that Angular can or won't detect on its own. Called every change detection run.
ngOnDestroy - Cleanup just before Angular destroys the component.
COMPONENT LIFECYCLE
ONINIT
•To perform complex initializations shortly after construction
• To set up the component after Angular sets the input properties
ONDESTROY
• This is the place to free resources that won't be garbage collected automatically
∙Unsubscribe from observables and DOM events
∙Stop interval timers
∙Unregister all callbacks that this directive registered with global or application services
ONCHANGES
• Detects changes to input properties of the component (or directive)
• Angular only calls the hook when the value of the input property changes
View children and content children
• view children - The children element which are located inside of its template of a component
• content children - elements which are used between the opening and closing tags of the host element of a given component
SUM
Directives
PIPES
A pipe takes in data as input and transforms it to a desired output. In this page, you'll use pipes to transform a component's birthday property into a human-friendly date.
INTERFACE
Одним из основных принципов TypeScript является то, что проверка типов основывается на форме значений. Этот подход иногда называется "структурным подтипированием".
В TypeScript интерфейсы выполняют функцию именования типов, и являются мощным способом определения соглашений внутри кода, а также за пределами проекта.
Modules
Модули Angular объединяют компоненты, директивы и др. в единые функциональные блоки … Модули так же могут содержать сервисы
FEATURE STRUCTURE
Angular4
By Oleg Rovenskyi
Angular4
Components, Modules
