0. About

This tutorial is designed for quickly building a web client with Angular2 and Typescript

1. Introduction

The following section shows how to use the tool chain relating to developing web-app with Angular2. The Ng2 Version used in this tutorial is 2.4.10. The Ng2 version is defined within the “dependencies” section/attribute in package.json file.

1.1 (Optional) Node Package Manager (NPM)

console in os system

Update NPM in the console

About package.json file

Initializing package.json

Run script in package.json

Init a tsconfig.json file

TypeScript compiler and native JavaScript libs

2. How to start?

This sections shows how can you start this demo-app after you have cloned this repo.

2.1 Get ready

2.2 Debug Ng2 Application

2.2.2 Try out the Debugger in IntelliJ IDEA IDE

Note: For further issues with debugging with IntelliJ IDEA Utimate and Webpack, please refer https://manuel-rauber.com/2016/09/30/how-to-debug-angular-2-with-webstorm/

Hacking Arround the Codes

Note: if the webpack-dev-server is running and the code changes, the code changes can be viewed immediately in the browser.

Home Work:

3. Angular2

3.1 Bindings

Property Binding

Event Binding

Input Decoration

Binding a component property to Angular Template

Asterisk (*) appearing before directive names

Directives

One of the defining features of a single page application is its manipulation of the DOM tree. Instead of serving a whole new page every time a user navigates, whole sections of the DOM appear and disappear according to the application state.

There are three kinds of Angular directives:

  1. Components or Component Directives
  2. Attribute directives
  3. Structural directives

Components or Component Directives

The Component is really a directive with a template. It’s the most common of the three directives and we write lots of them as we build our application.

Attribute Directive

An attribute directive only changes the behavior or appearance of an element. An attribute element modifies an existing element.

For example: <pre><div [ngStyle]="{'background-color': element.color}"></div></pre>

Structural Directive

A structural directive shows or hides an element. A structural directive changes the Document Object Model (DOM) by adding or removing an element entirely.

For example: <pre><div *ngIf="isAvailabe"> is available!</div></pre>

Reactive extensions library (rxjs / RxJS)

A reactive Extension allows us to get data from a security source.

For example:

var data;
{"price": 20,"meta": "from-the-server","data": [] }

var source = getDataFromUrlOrOtherAsyncSource();
source
.filter(item => item.price > 50.60) // filter the item
    .map(item => item.data) // map item to item.data
    .subscribe( items => this.data = items // save the item.data list to data 
    );

Cold Observable

After the http.get is called, the request is not sent out instantaneously. This means, http.get does not send the request automatically. The observable is cold which means the request won’t go out until the observable is subscribed by another component.

Testing HTTP Request

Working with ngIf or ngSwitch

Both the ngSwitch and ngIf directives add elements to the DOM subtree only if there conditions are met. If the coditions are false, the element is not rendered in HTML at all.

4. Angular2 Component Lifecycle

  1. OnChanges: Event hook called when a data-bound input property value changes
  2. OnInit: Event hook called when the data-bound property are initialized
  3. DoCheck: Event hook for manual checks
  4. AfterContentInit: Event hook after content is initialized
  5. AfterContentChecked: Event hook after content is checked
  6. AfterViewInit: Event hook after view is initialized
  7. AfterViewChecked: Event hook after view is checked
  8. OnDestroy: Event hook after component is disposed.

In the lifecycle of a component, the OnChanges is called first time to get the initial value of all the properties of the component class. Once the properties are set to their initial values, Oninit is called. DoCheck is than called, allowing doing a manually check of any further things…

Component Lifecycle Hooks

Hook Purpose Components Directives
ngOnInit Initialize the directive/component after Angular initializes the data-bound input properties. yes yes
ngOnChanges Respond after Angular sets a data-bound input property. The method receives a changes object of current and previous values. yes yes
ngDoCheck Detect and act upon changes that Angular can or won’t detect on its own. Called every change detection run. yes yes
ngOnDestroy Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks. yes yes
ngAfterContentInit After Angular projects external content into its view. yes no
ngAfterContentChecked After Angular checks the bindings of the external content that it projected into its view. yes no
ngAfterViewInit After Angular creates the component’s view(s). yes no
ngAfterViewChecked After Angular checks the bindings of the component’s view(s). yes no

5. Angular2 Dependency Injection

In software engineering, dependency injection is a software design pattern that implements inversion of control for resolving dependencies. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it.

5.1 Type of Dependency Injection

5.2 Injector

Note: Registering at a component level means you get a new instance of the service with each new instance of that component.

6. Angular2 Modules

Modules are executed within their own scope, not in the global scope; this means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported using one of the export forms. Conversely, to consume a variable, function, class, interface, etc. exported from a different module, it has to be imported using one of the import forms.

Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level.

Modules import one another using a module loader. At runtime the module loader is responsible for locating and executing all dependencies of a module before executing it. Well-known modules loaders used in JavaScript are the CommonJS module loader for Node.js and require.js for Web applications.

Import Module