Notes

Ujnotes — CC0 1.0

Working notes on Notes: Annotations, ng-, Variables, $scope, Iterate, and /.

Frontend.

Enhanced HTML for Web apps.

Model View -Whatever

Model : JS.

View : HTML.

Style: SCSS.

Annotations

ng-

App.

Controller.

Variables

$scope

Mother variable.

Iterate

https://stackoverflow.com/questions/29953198/foreach-loop-in-angularjs

For(let e of elements).

Routing.

URLs.

/

From room.

/ <No slash>

Relative.

Private variables won’t leak on to the html side - and can be accessed only in the ts files

e.g. constructor(private <service>: <instance>)

There can be only a single form group on a page.

Execution path

\\ angular.json > build > main > <path/<main_file>.ts> > boostrapModule()

main.ts creates browser environment for the application to run

Imports { platformBrowserDynamic } from '@angular/platform-browser-dynamic';.

Calls bootstrapModule(AppModule).

PlatformBrowserDynamic().bootstrapModule(AppModule).

Module, component and service

Component is a piece of UI

Defined using @Component decorator.

Has three parts.

1. .ts file

1. Has class.

2. .html

1. Template - with dom piece.

1. can be presented inplace by enclosing in tildes.

3. .scss

1. Stylesheet.

Selector.

TemplateUrl.

StyleUrls.

ng generate component <component_name>

Ng g c test.

@Component({

@Component({ templateUrl: "./app.<component>.html",

selector. "app",.

}).

export class AppComponent {

Data = "This is an example component of two way data binding.";.

}.

Modules

Modules to group components.

One whole module is transported as one unit.

Two types.

1. root

1. Only one.

1. imports BrowserModule.

2. Feature

1. imports CommonModule.

Registered in module providers.

Service

Single instance class that facilitate communication across classes.

@Injectable decorator.

Provides methods that can be invoked directly by importing the service.

ng g s <service-name>

Scope

Binder between controller(js) and view(html).

Object - available to both.

Data binding

Direct communication between DOM and component - no explicit data push pull.

1. Property binding

1. DOM element’s property : field in Component

1. Handled internally.

2. Event binding

1. DOM event. Component method.

3. String binding

1. DOM element. {{ Component_field }}.

4. Two way data binding

1. DOM element filed. Component field.

1. One end immediately reflects on another end.

5. <input [(ngModel)]="data"  type="text">

6. <h2>You entered the data:  {{data}}</h2>

Decorators

Modify service, directive or filter.

Provides configuration metadata

Provides configuration metadata @<decorator>({

<metadata_property>: ‘<value>’...

Provides configuration metadata export class <class> {

)}.

}.

1. Method.

2. Class

1. specify. Component or module.

3. Parameter

1. arguments to class constructors.

2. add functionality

1. e.g. @HostListener(‘click’, [‘$event’]).

4. Property

1. @Input(), @Output, @ReadOnly(), @Override()

1. Output. From child component to parent.

1. class property.

Annotations

Hard-coded. Metadata - set on class to ‘reflect’ metadata library.

Annotations property added to class - array - annotation saved.

Instance name same as annotation.

Pipes

Used to transform data.

@Pipe({

@Pipe({ name: ‘<pipe_name>’;

pure. [false|true].

}).

export class <Pipe_name> {}

Progression from left to right.

1. Pure

1. only methods - no properties - stateless.

2. Impure

1. impure method - has propertie(s) and thus state.

1. Runs on every change detect cycle.

1. Heavy on cpu resource.

3. Pipe transform Interface

1. for custom transform.

2. 1st param - value of binding

1. 2nd param - list of arguments.

4. Pipe chaining

4. Pipe chaining 1. <var>|<pipe_1_transform>|<pipe_2_transform>

Share data

@input - @output.

export class <component> {

@Input() <property>: <type>;

}.

Parent to child

Use property directly.

Child to parent

Child to parent @ViewChild(<ChildComponent>, {static:[true|false]} <child>;

ngAfterViewInit() {

ngAfterViewInit() { this.<dataFromChild> = this.<child>.<data>

}.

Banana in Box

[()].

For bi-directional sharing of data.

Loading.

1. Eager

1. pre-load before execution begins.

2. Lazy

1. Load modules as needed.

View encapsulation

Specifies if specific component’s template and style can impact the entire app or vice versa.

1. Native

1. No inheritance.

1. Limited to component.

2. Emulated

1. Inheritance.

1. Limited to component.

3. None

1. Inheritance?

1. Not limited to component.

1. “styles will be repeated in each component - with native encapsulation?

RxJS

Reactive extensions for JavaScript.

Observables -> Reactive programming.

Async / callback - based code -> sequence of operations on data streams

Publisher to subscriber.

Often used with http requests - as it is async.

Subscribe.

Data binding

Interconnection between model and view.

String interpolation

{{ }}

Content is executed.

For example, 1+1 => 2.

Part of data binding.

One way.

Property binding

[]

Property of DOM element. Component’s property.

Part of data binding.

One way

Component logic to view.

Event binding

()

target listens to events. Click, keypress.

Two way

[()]

Banana in box.

Observables v/s promise.

1. Observables

1. can be both async or synchronous.

1. Can emit multiple values - i.e. multiple times.

1. Lazy - called only when subscribed to.

1. Unsubscribe() to cancel.

1. Operators, multiple - map, forEach, filter, reduce, retry, retryWhen….

2. Promise

1. always async.

1. can only emit single value - i.e. once.

1. Not lazy.

1. Cannot be canceled.

1. No such operators.

Dependency injection

Design pattern.

Services.

Component

onInit

onInit Constructor(<service>) {}

Input

pattern

[]{}.

For example, .

Lifecycle

Applicable to components.

Initialized - then - destroyed.

Hooks - tap into the lifecycle events.

1. Constructor.

1. ngOnChanges.

3. ngOnInit

1. called after first ngOnChanges.

1. If lot of processing - better here instead of constructor.

1. Initializes component and sets input properties.

1. no arguments, and returns void.

4. ngDoCheck

1. after ngOnInit.

1. used to detect changes that cannot be detected by Angular.

1. custom change detection algorithm.

5. ngAfterContentInit

1. after ngDoCheck.

1. after ?content gets projected? into component.

6. ngAfterContentChecked

1. after ngAfterContentInit and after every subsequent ngDoCheck.

1. responds after ?projected content is checked?

7. ngAfterViewInit

1. after view initialized.

8. ngAfterViewChecked

1. after ngAfterViewInit.

1. after view checked.

9. ngOnDestroy

1. after component destroyed by Angular.

1. to be used to clean up and detach event handlers.

Imports OnInit but implements ngOnInit.

Same with other hooks.

Router links

Router links <a routerLink=’/<path>’><title></a>

Router links <router-outlet></router-outlet>

Router state

Route tree.

nodes. ‘consumed’ url segments, retrieved arguments and ?processed data?.

Uses router service and router state property to get current RouterState from anywhere.

Angular Material

User interface component.

uniform - consistent, appealing, functional - contemporary design concepts: gentle degradation and browser portability

Transpiling

Compiling one language code into another.

e.g. TS is transpiled into JS code by Angular

Dart can also be used. AngularDart.

Internal.

Http intercept

Both HttpRequest & HttpResponse can be intercepted.

For example, to add auth headers at one place.

AOT

Ahead of time compilation.

Compiled during build time - i.e. pre production.

Faster rendering.

Fewer ajax loads.

Error detection during build phase.

Fewer files - better security.

Default is JIT.

for AOT. Ng build –aot, ng serve –aot.

Change detection

Process of synchronizing view with model.

One directional, from root to children.

?all components are children, themselves Not parent?

Bootstrapping module

Initial.

Popular. ‘AppModule’.

MVVM

Model, View, ViewModel.

Model

Data model.

View

Visual layer.

ViewModel

Abstract layer - manages business logic and translation.

Bound to view - data-binding - two way.