Wstęp

O czym będziemy mówić

Podstawy typescript

Nowości w angular

Reaktywne programowanie

component

service

TDD

shadow DOM

pipe

jasmine

routing

i18n

CLI

dyrektywy

subscribe

observable

semantyczne wersjonowanie

binding

template expression

http

guard

form

reactive form

Wymagania

• znajomość javascript
• ulubione IDE + terminal
• Node (7+)
• npm
• Zainstalowane:
  • npm install -g typescript @angular/cli
  • Chrome

Materiał do samodzielnej nauki

https://quizlet.com/271131809/angular-5-flash-cards/

Co się zmieniło od czasu AngularJS?

Semantic Versioning (SEMVER).

https://semver.org/

Dlaczego nie było Angular 3?

Angular is being developed in a MonoRepo. That means a single repo for everything. @angular/core, @angular/compiler, @angular/router etc are in the same repo and may have there own versions. The advantage of MonoRepo is, you don’t have to deal with the versioning of the code dependencies. Now the problem is with the @angular/router which is already in a 3.X version. And that’s because of some active and huge developments on the router section, like route-preload. 

Architektura
 

komponentowa

W architekturze komponentowej oprogramowanie budowane jest w oparciu o współpracujących ze sobą, niezależne komponenty programowe. Komponent to element oprogramowania posiadający dobrze wyspecyfikowany interfejs oraz zachowanie. Każdy komponent powinien realizować założoną funkcjonalność i dostarczać jej innym komponentom tylko za pośrednictwem własnego interfejsu.  Komponenty traktuje się jako twory generyczne. Dopiero zbiór takich połączonych ze sobą komponentów stanowi rzeczywistą aplikację.

http://architektura-oprogramowania.blogspot.com/p/architektura-komponentowa.html

Co to jest?

https://stackoverflow.com/questions/46950642/is-there-a-tool-to-view-all-the-react-components-name-on-the-webpage

komponent == tag html

*source: ng-book 2, The Complete Guide to Angular

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

Shadow

DOM

Co to jest shadow DOM?

Shadow DOM & Angular

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html#shadow-dom-in-angular

Jak to działa w praktyce?

Angular obsługuje następujące tryby enkapsulacji: 

• Native view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

• Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view.

• None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Jak to działa w praktyce?

1. Mamy komponent app-root z stylem:

2. Ten komponent ma szablon:

3. Po za komponentem jest szablon:

Jak to działa w praktyce?

Dla różnych wartości ustawionych w komponencie w polu encapsulation:

ViewEncapsulation.Emulated

ViewEncapsulation.None

ViewEncapsulation.Native

Emulacja shadow DOM

When using emulated view encapsulation, Angular preprocesses all component styles so that they approximate the standard shadow CSS scoping rules. There are two kinds of generated attributes:

• An element that would be a shadow DOM host in native encapsulation has a generated _nghost attribute. This is typically the case for component host elements.
• An element within a component's view has a _ngcontent attribute that identifies to which host's emulated shadow DOM this element belongs.

Czy do tworzenia komponentów potrzebujemy Angulara?

coffee

break

TypeScript

Zadanie

rozgrzewkowe

package.json + tsconfig.json

Udrożnij testy jednostkowe

Zaimplementuj wzorzec obserwator

Zaimplementuj wzorzec builder klasy User

Pola w klasie:

-first name

-last nam

-age

-Accounts (no, id, saldo)

-całkowita suma środków na koncie

Pora na kodowanie

Angular CLI

Co to jest?

Zalety używania Angular-CLI

http://www.consdata.pl/blog/7-szybki-start-z-angular-cli

• korzystanie z najnowszych technologii
• ustandaryzowanie struktury i konfiguracji projektu
• zrzucenie utrzymania procesu budowania na community
• szybkie wsparcie dla nowych wersji frameworka przy minimalnym koszcie
• stosowanie wzorcowej/zalecanej konfiguracji
• szybkie uruchamianie nowych projektów
• stosowanie podejścia convention over configuration

Struktura projektu

Najważniejsze parametry angular-cli

Ahead-of-Time (AOT) Compiler

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

 

An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an Angular compiler. Angular offers two ways to compile your application:​​

• ​Just-in-Time (JIT), which compiles your app in the browser at runtime
• Ahead-of-Time (AOT), which compiles your app at build time.

Why compile with AOT?

• Faster rendering

  With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

• Fewer asynchronous requests

  The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

• Smaller Angular framework download size

  There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

• Detect template errors earlier

  The AOT compiler detects and reports template binding errors during the build step before users can see them.

• Better security

  AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Różnice widać nawet na pustym projekcie

TODO: Zweryfikować AOT na projekcie końcowym

Opis kompilacji: https://angular.io/guide/aot-compiler

Pora na kodowanie

I. Wygeneruj szablon projektu na którym będziemy pracować

II. Utwórz ręcznie komponent dashboard

III. Wygeneruj komponent settings korzystając z generatora

Component I

Nasz pierwszy komponent

Modułowość Angulara wymusza na nas importowanie używanych komponentów. Podajemy listę importowanych elementów w {} (destructing)

Dekorator sprawiający że klasa staje się komponentem

Szablon komponentu. Alternatywnie można podać zewnętrzny plik: templateUrl

Pola w klasie są dostępne w szablonie

Nasz pierwszy komponent

https://angular.io/api/core/Component

Component styles

• You can use the CSS class names and selectors that make the most sense in the context of each component.

• Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.

• Changes to styles elsewhere in the application don't affect the component's styles.

• You can co-locate the CSS code of each component with the TypeScript and HTML code of the component, which leads to a neat and tidy project structure.

• You can change or remove component CSS code without searching through the whole application to find where else the code is used.

Component selector

The CSS selector that triggers the instantiation of a directive.

Template syntax

stay with me and focus

Template syntax

template statement

template expression

A template expression produces a value. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive.

JavaScript expressions that have or promote side effects are prohibited, including:

• assignments (=, +=, -=, ...)
• new
• chaining expressions with ; or ,
• increment and decrement operators

​Allowed new template expression operators, such as |, ?. and !.

A template statement responds to an event raised by a binding target such as an element, component, or directive. You'll see template statements in the event binding section, appearing in quotes to the right of the = symbol as in (event)="statement".

The template statement parser differs from the template expression parser and specifically supports both basic assignment (=) and chaining expressions (with ; or ,).

Not allowed: template expression operators

Template expression operators

Pipe operator

Safe navigator

non-null assertion (dla trybu: strictNullChecks)

 $any type cast

Template syntax/expression guide

Template expressions can make or break an application. Please follow these guidelines:

 

1. No visible side effects
2. Quick execution
3. Simplicity
4. Idempotence

 

The only exceptions to these guidelines should be in specific circumstances that you thoroughly understand.

*Idempotentność – właściwość pewnych operacji, która pozwala na ich wielokrotne stosowanie bez zmiany wyniku.

Binding syntax

{{ Interpolacja }}

{{ expression }}

The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. Interpolation is a special syntax that Angular converts into a property binding.

Property bindings (one way)

Write a template property binding to set a property of a view element. The binding sets the property to the value of a template expression.

HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works. Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

 

• A few HTML attributes have 1:1 mapping to properties. id is one example.
• Some HTML attributes don't have corresponding properties. colspan is one example.
• Some DOM properties don't have corresponding attributes. textContent is one example.
• Many HTML attributes appear to map to properties ... but not in the way you might think!

Attribute bindings

Can't bind to 'colspan' since it isn't a known native property

This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.

Class bindings

You can add and remove CSS class names from an element's class attribute with a class binding.Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name].

Style bindings

Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix style, followed by a dot (.) and the name of a CSS style property: [style.style-property].

Events bindings

The only way to know about a user action is to listen for certain events such as keystrokes, mouse movements, clicks, and touches. You declare your interest in user actions through Angular event binding.Event binding syntax consists of a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. 

https://developer.mozilla.org/en-US/docs/Web/Events

Build-in attribute directive

*An Attribute directive changes the appearance or behavior of a DOM element.

ngClass

Dyrektywa odpowiednia do dynamicznego dodawania, usuwania wielu klas jednocześnie

ngStyle

Dyrektywa odpowiednia do dynamicznego dodawania, usuwania wielu styli jednocześnie

Build-in structural directive

*They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached.

Why asterisk?

The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element, like this. Angular consumed the <ng-template> content during its actual rendering and replaced the <ng-template> with a diagnostic comment.

*ngIf

You can add or remove an element from the DOM by applying an NgIf directive to that element (called the host element).

The difference between hiding and removing doesn't matter for a simple paragraph. It does matter when the host element is attached to a resource intensive component. Such a component's behavior continues even when hidden. The component stays attached to its DOM element. It keeps listening to events. Angular keeps checking for changes that could affect data bindings. Whatever the component was doing, it keeps doing.

*ngForOf  (NgFor is implemented by the NgForOf)

NgForOf is a repeater directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list. 

The NgForOf directive may perform poorly, especially with large lists. A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations. Angular can avoid this churn with trackBy.

*ngForOf

NgForOf provides several exported values that can be aliased to local variables:

• index: number: The index of the current item in the iterable.
• first: boolean: True when the item is the first item in the iterable.
• last: boolean: True when the item is the last item in the iterable.
• even: boolean: True when the item has an even index in the iterable.
• odd: boolean: True when the item has an odd index in the iterable.
• $implicit: T: The value of the individual items in the iterable (ngForOf).
• ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async).

ngSwitch

NgSwitch is like the JavaScript switch statement. It can display one element from among several possible elements, based on a switch condition. Angular puts only the selected element into the DOM.

Pora na kodowanie

Podpięcie usługi

- live demo

Najprostsze wywołanie usługi REST 

TODO

1. Utwórz pusty projekt
2. Uruchom go na porcie 8000
3. Wepnij usługę do pobierania fiszek
4. Wyświetl je na formatce
5. Ostylizuj formatkę korzystając z bootstrap lub materialize
6. Po kliknięciu w zestaw fiszek wyświetl szczegóły
7. Dodaj filtrowanie po nazwie

Sygerowany wygląd

Component II

Component

life cycle

Component lifecycle

constructor

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy

*A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.

Opis hooków

Przykład wykorzystania hooka

The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective. The JavaScript language doesn't have interfaces. Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.

Przykład w seed: PrettyAmountComponent.ts

Binding syntax

Two way binding

You often want to both display a data property and update that property when the user makes changes. On the element side that takes a combination of setting a specific element property and listening for an element change event.

banana in the box [()]

ngModel

Zapewnia dwukierunkowy binding danych z pól formularza. W celu użycia należy dodać import FormsModule. 

Component communication

@Input

An Input property is a settable property annotated with an @Input decorator. Values flow into the property when it is data bound with a property binding

Wykorzystanie get/set

@Output

An Output property is an observable property annotated with an @Output decorator. The property almost always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding.

IN/OUT

Pora na kodowanie

• wywołaj usługę do pobierania fiszek i wyświetl je na dashboard
• zrób komponent life-search do filtrowania danych na dashboard (z wykorzystaniem two way binding)
• po wybraniu zestawu fiszek wyświetl szczegóły pod spodem (szczegóły mają osobny komponent, id wybrane zestawu podajemy jako input)
• z poziomu szczegółów pozwól na usuwanie zestawów
• zrób komponent do edycji, gdzie każde pole będzie można edytować za pomocą specjalnego komponentu
• wykorzystaj Materialize

Co robimy?

Component III

Template reference variable

Template reference variable

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. Use the hash symbol (#) to declare a reference variable. 

Wykorzystanie dziecka przez rodzica

Projekcja

ng-content

ng-content include the original host element children in a specific part of a view. Projection is a very important concept in Angular. It enables developers to build reusable components and make applications more scalable and flexible. When you do not have selector, only one ng-content could be used.

@ViewChild/@ViewChildren

You can use ViewChild to get the first element or the directive matching the selector (the directive type or the name) from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated. View queries are set before the ngAfterViewInit callback is called.

@ViewChild/@ViewChildren

We could also get a wrapper around a native element inside of a View. Permitting direct access to the DOM can make your application more vulnerable to * XSS attacks. Carefully review any use of `ElementRef` in your code.

Animation

Animation

Animations are defined on components via an animation-like DSL*. This DSL approach to describing animations allows for a flexibility that both benefits developers and the framework. Animations work by listening on state changes that occur on an element within the template. When a state change occurs, Angular can then take advantage and animate the arc in between. This works similar to how CSS transitions work, however, by having a programmatic DSL, animations are not limited to environments that are DOM-specific. (Angular can also perform optimizations behind the scenes to make animations more performant.)

*Język dziedzinowy, także język dedykowany, język specjalizowany (ang. domain-specific language, DSL) to język programowania przystosowany do rozwiązywania określonej dziedziny problemów, określonej reprezentacji problemu lub określonej techniki ich rozwiązywania. Przeciwieństwem języków dziedzinowych są języki programowania ogólnego zastosowania.

transition(':enter', [ ... ]); // Alias dla przejścia: void => *

transition(':leave', [ ... ]); // * => void

Dalsze przykłady...

HostListener

@HostListener

@HostListener lets you listen for events on the host element or component.

@HostBinding

@HostBinding lets you set properties on the element or component that hosts the directive.

 Here are a few more examples of possible bindings:

• @HostBinding(‘class.active’)
• @HostBinding(‘disabled’)
• @HostBinding(‘attr.role’)

Dynamic components

entryComponents

EntryComponents in module declaration: Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

Dynamicznie ładowane komponenty

Pora na kodowanie

Do zrobienia

• Menu które dynamicznie ładuje komponent aktualnie wyświetlany
• Po najechaniu myszką na pozycje w menu, zmienia się kolor czcionki (użyj HostBinding)
• Komponent który opakowuje przekazany html w div z klasą container i row z wykorzystaniem ng-content
• Na edycji zestawu pozwól na dodawanie nowych elementów. Nowe elementy mają się pojawiać z animacją
• Dane po edycji powinny być wysyłane na backend

Module

In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application. An Angular application can be thought of as a puzzle where each piece (or each module) is needed to be able to see the full picture.  In the same way, a module can export or hide components, directives, pipes and services. The exported elements are meant to be used by other modules, while the ones that are not exported (hidden) are just used inside the module itself and cannot be directly accessed by other modules of our application.

Why?

https://angular-2-training-book.rangle.io/handout/modules/introduction.html

providers

 list of providers available to this component and its children

declarations

Specifies a list of directives/pipes that belong to this module.

imports

Specifies a list of modules whose exported directives/pipes should be available to templates in this module. This can also contain ModuleWithProviders.

exports

Specifies a list of directives/pipes/modules that can be used within the template of any component that is part of an Angular module that imports this Angular module.

schemas

Elements and properties that are not Angular components nor directives have to be declared in the schema.

id

An opaque ID for this module, e.g. a name or a path. Used to identify modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.

Bootstraping

An NgModule describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. By convention, it is usually called AppModule.

To bootstrap our module based application, we need to inform Angular which one is our root module to perform the compilation in the browser. This compilation in the browser is also known as "Just in Time" (JIT) compilation.

Frequently Used Modules

Pora na kodowanie

Fire! Fire! Fire!

Do zrobienia

LogicModule

AppModule

DashboardModule

UserListComponent

UserDetailsComponent

DashboardComponent

LearnModule

Przerwa

Directive

inputs

list of class property names to data-bind as component inputs

outputs

list of class property names that expose output events that others can subscribe to

host

map of class property to host element bindings for events, properties and attributes (np.   '(change)': 'onChange($event)',)

providers

list of providers available to this component and its children

exportAs

name under which the component instance is exported in a template. Can be given a single name or a comma-delimited list of names.

queries

configure queries that can be injected into the component

Attribute directive

*change the appearance or behavior of an element, component, or another directive.

inject a reference to the host DOM element. ElementRef grants direct access to the host DOM element through its nativeElement property.

Przykład derektywy

Of course you could reach into the DOM with standard JavaScript and attach event listeners manually. There are at least three problems with that approach:

• You have to write the listeners correctly.
• The code must detach the listener when the directive is destroyed to avoid memory leaks.
• Talking to DOM API directly isn't a best practice.

Structural directive

*change the DOM layout by adding and removing DOM elements.

One structural directive per host element

The reason is simplicity. Structural directives can do complex things with the host element and its descendents. When two directives lay claim to the same host element, which one takes precedence? Which should go first, the NgIf or the NgFor? Can the NgIf cancel the effect of the NgFor? If so (and it seems like it should be so), how should Angular generalize the ability to cancel for other structural directives?

ng-template

The <ng-template> is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular replaces the <ng-template> and its contents with a comment.

HTML template tag

First off, <ng-template> is Angular’s own implementation of the <template> tag, allowing us to think about application design in web components and the ideas behind them. It also provides us with more power than the <template> element gives us by default, seamlessly fitting into the way Angular compiles our code.

Create view based on template

Example

*If it is necessary to display a template when the expression is falsy use the else template binding as shown. Note that the else binding points to a <ng-template> labeled #elseBlock. The template can be defined anywhere in the component view but is typically placed right after ngIf for readability.

ng-container

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Custom structural directive

Pora na kodowanie

• Stwórz dyrektywę strkturalną loader która wyświetla loader bądź też pobrane dane
• Stwórz dyrektywę która opakowuje inputa i stylizuje go oraz dodaje ikonkę przekazaną jako parametr

Service

Dependency injection

The @Injectable() decorator identifies a service class that might require injected dependencies. When Angular creates a class whose constructor has parameters, it looks for type and injection metadata about those parameters so that it can inject the right service.

Services are singletons within the scope of an injector

@Injectable() is a required coding style for services.

@NgModule vs @Component

@NgModule

@Component

Angular module providers are registered with the application's root injector. Angular can inject the corresponding services in any class it creates. Once created, a service instance lives for the life of the app and Angular injects this one service instance in every class that needs it.

A component's providers are registered with each component instance's own injector.

Angular can only inject the corresponding services in that component instance or one of its descendant component instances. Angular cannot inject the same service instance anywhere else. Note that a component-provided service may have a limited lifetime. Each new instance of the component gets its own instance of the service and, when the component instance is destroyed, so is that service instance.

Sometimes it's easier to provide a ready-made object rather than ask the injector to create it from a class.

Sometimes you need to create the dependent value dynamically, based on information you won't have until the last possible moment. Maybe the information changes repeatedly in the course of the browser session.

Zaawansowane wstrzykiwanie zależności

Application components often need to share information. More loosely coupled techniques such as data binding and service sharing are preferable

What if you don't know the concrete parent component class?

https://typeofweb.com/2016/07/19/dependency-injection-w-angular-2/

Imagine one branch of a component hierarchy: Alice -> Barry -> Carol. Both Alice and Barry implement the Parent class-interface. Barry is the problem. He needs to reach his parent, Alice, and also be a parent to Carol. That means he must both inject the Parent class-interface to get Alice and provide a Parent to satisfy Carol.

When a component requests a dependency, Angular tries to satisfy that dependency with a provider registered in that component's own injector. If the component's injector lacks the provider, it passes the request up to its parent component's injector. If that injector can't satisfy the request, it passes it along to its parent injector. The requests keep bubbling up until Angular finds an injector that can handle the request or runs out of ancestor injectors. If it runs out of ancestors, Angular throws an error.

Pora na kodowanie

Do zrobienia

• Bullet One
• Bullet Two
• Bullet Three

Pipe

Filter umarł, niech żyje pipe

Jak zrobić pipe?

• You must include your pipe in the declarations array of the AppModule.
• Angular looks for changes to data-bound values through a change detection process that runs after every DOM event: every keystroke, mouse move, timer tick, and server response. This could be expensive. Angular strives to lower the cost whenever possible and appropriate. Angular picks a simpler, faster change detection algorithm when you use a pipe.

Pure pipes (default)

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). Angular ignores changes within (composite) objects. It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.

Wbudowane pipy

Wbudowane pipy

Async

Problem

Async

• pozwala używać observable i promises bezpośrednio na szablonie
• automatycznie wywołuje unsubscribe 
• zmienne z $ na końcu to observable
• otrzymane dane z observable można przypisać do zmiennej

No FilterPipe or OrderByPipe

Angular doesn't provide pipes for filtering or sorting lists. Developers familiar with AngularJS know these as filter and orderBy. There are no equivalents in Angular. This isn't an oversight. Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification. Both filter and orderBy require parameters that reference object properties. Earlier in this page, you learned that such pipes must be impure and that Angular calls impure pipes in almost every change-detection cycle.

The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself.

Pora na kodowanie

Do zrobienia

• pipe służący do tłumaczenia aplikacji
• pipe pozwala przyjmować parametry które podstawia w tekście
• tłumaczenia są zaszyte w osobnej klasie jako static

Testowanie

TestBed

At the heart of Angular unit testing is a class called TestBed, which is responsible for simulating the Angular application environment so that tests can be performed.

Useful ComponentFixture Methods and Properties:

• componentInstance This property returns the component object.
• debugElement This property returns the test host element for the component.
• nativeElement This property returns the DOM object representing the host element
• detectChanges() This method causes the test bed to detect state changes and reflect them
• whenStable() This method returns a Promise that is resolved

Inject mock service

Testowanie logiki szablonu

Useful DebugElement Properties and Methods:

• nativeElement - This property returns the object that represents the HTML element in the DOM
• children - This property returns an array of DebugElement objects representing the children of this element
• query(selectorFunction) - The selectorFunction is passed a DebugElement object for each
  HTML element in the component’s template, and this method returns the first DebugElement for which the function returns true.
• queryAll(selectorFunction) - Similar to the query method, except the result is all the
  DebugElement objects for which the function returns true.
• triggerEventHandler(name, event) - This method triggers an event. See the “Testing Component
  Events” section for details.

Unit test

Jasmine

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects, or anywhere that JavaScript can run.

Co to jest?

E2E

protractor

Pora na kodowanie

Do zrobienia

• Bullet One
• Bullet Two
• Bullet Three

Routing

Jak to wygląda w praktyce?

Kolejność musi być od najbardziej specyficznego do najmniej

Router state

After the end of each successful navigation lifecycle, the router builds a tree of ActivatedRoute objects that make up the current state of the router. You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

The optional route parameters are not separated by "?" and "&" as they would be in the URL query string. They are separated by semicolons ";" This is matrix URL notation.

Router state

Router events

During each navigation, the Router emits navigation events through the Router.events property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below.

Router events

These events are logged to the console when the enableTracing option is enabled also. Since the events are provided as an Observable, you can filter() for events of interest and subscribe() to them to make decisions based on the sequence of events in the navigation process.

By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first. The route parameters could change each time. Unfortunately, ngOnInit is only called once per component instantiation. If  instance will never, never, ever be re-used, you can simplify the code with the snapshot.

Guards

The router supports multiple guard interfaces: 

• CanActivate to mediate navigation to a route.
• CanActivateChild to mediate navigation to a child route
• CanDeactivate to mediate navigation away from the current route.
• Resolve to perform route data retrieval before route activation.
• CanLoad to mediate navigation to a feature module loaded asynchronously.

Pora na kodowanie

Do zrobienia

• formatka logowania i rejestracji
• guard blokujący możliwość wejścia na dashboard bez zalogowania
• formatka z informacją o braku uprawnień
• stwórz osobny moduł zawierający formatki z modułu nauki
• za pomocą nazwanego routerOutlet wyświetlaj komunikaty

HTTP

Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch() API. The HttpClient in angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.

O co chodzi?

Although interceptors are capable of mutating requests and responses, the HttpRequest and HttpResponse instance properties are readonly, rendering them largely immutable. You can clone and modify the request 

You must call subscribe() or nothing happens! The AsyncPipe subscribes (and unsubscribes) for you automatically.

Pora na kodowanie

Do zrobienia

• Bullet One
• Bullet Two
• Bullet Three

Forms

Angular (v2+) presents two different methods for creating forms, template-driven (what we were used to in AngularJS 1.x), or reactive. 

When we talk about “reactive” forms (also known as model-driven), we’ll be avoiding directives such as ngModel, required and friends. The idea is that instead of declaring that we want Angular to power things for us, we can actually use the underlying APIs to do them for us. In a sense, instead of binding Object models to directives like template-driven forms, we in fact boot up our own instances inside a component class and construct our own JavaScript models. This has much more power and is extremely productive to work with as it allows us to write expressive code, that is very testable and keeps all logic in the same place, instead of scattering it around different form templates.

Template-drive vs reactive

Template driven

Binding events

Typing the event object reveals a significant objection to passing the entire DOM event into the method: the component has too much awareness of the template details. It can't extract information without knowing more than it should about the HTML implementation. That breaks the separation of concerns between the template (what the user sees) and the component (how the application processes user data).

1.

2.

Template Form

Walidacja

Angular comes with a subset of built-in validators out of the box. We can apply them either declaratively as directives on elements in our DOM, in case we’re building a template-driven form.

required - Requires a form control to have a non-empty value

minlength - Requires a form control to have a value of a minimum length

maxlength - Requires a form control to have a value of a maximum length

pattern - Requires a form control’s value to match a given regex

Dyrektywa walidująca

Reactive

 driven

FormControl is a class that powers an individual form control, tracks the value and validation status, whilst offering a wide set of public API methods.

FormGroup is a group of FormControl instances, also keeps track of the value and validation status for the said group, also offers public APIs.

Reactive Form

Dynamiczna zmiana walidatorów

Własny walidator

Pora na kodowanie

i18n

ngx-translate vs built-in i18n

ngx-translate

assets/i18n/en.json

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate

Pora na kodowanie

RxJS 5.5

Reaktywne
 

programowanie

Programowanie reaktywne to paradygmat programowania, którego filozofia opiera się na zdarzeniach. Komponenty naszej aplikacji powinny odpowiednio „reagować” – na interakcję z użytkownikiem, odpowiedź serwera czy błędy. Pozwala nam to również na osiągnięcie luźnych powiązań pomiędzy fragmentami aplikacji dzięki wymianie danych przy pomocy równoległych strumieni.

https://kamilmysliwiec.com/programowanie-reaktywne-wprowadzenie-rxjs

Co to jest?

Observable vs Promise

• Promise może zwrócić wartość zaledwie raz, Observable wielokrotnie
• Observable może zostać anulowane
• Observable udostępnia zestaw metod do wygodnego filtrowania i operowania na danych znajdujących się w strumieniu
• Observable zapewnia ujednolicone API do zarządzania zdarzeniami, bez względu na to jakie jest ich źródło (elementy drzewa DOM, zapytanie HTTP, timer),

Synchronicznie

Asynchronicznie

Wiele danych

Pojedyńczy wynik

Funkcja

Iterator

Promise

Observable

ngOnDestroy & RxJS

T

Projekt praktyczny

Opis

Aplikacja do nauki fiszek, która będzie pozwalać tworzyć nowe zestawy fiszek, edytować istniejące i uczyć się kart z zestawu. 

Wymagania

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna odio, aliquam vulputate faucibus id, elementum lobortis felis. Mauris urna dolor, placerat ac sagittis quis.

Koniec

https://slides.com/kamillolo/angular-5

Linkografia

• Główne źródło informacji: https://angular.io
• https://www.flaticon.com/authors/tutsplus
• https://netbasal.com/create-advanced-components-in-angular-e0655df5dde6

Literatura