Angular - Creating a Component using Angular CLI

Install Angular CLI

If you don't have Angular CLI you will need to install it using npm

npm install -g @angular/cli

Usage

ng g c products/product-detail.component --flat

ng = Angular CLI
g = generate
c = component
--flat = no folder will be created

This will create 4 files:

  src\app\products\product-detail\product-detail.component.css
  src\app\products\product-detail\product-detail.component.html
  src\app\products\product-detail\product-detail.component.spec.ts
  src\app\products\product-detail\product-detail.component.ts

It will update the file which will register the component in the app.module.ts:
  src\app\app.module.ts

It will also wire the components together putting some useful code in
src\app\products\product-detail\product-detail.component.ts

Angular - Retrieving data using http and observables

Import HttpClientModule

Add HttpClientModule to the imports array of one of the application's Angular Modules

The items in bold are the ones that are specific to adding http.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({

  declarations: [ AppComponent, ],

  imports: [ HttpClientModule, BrowserModule, FormsModule ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Adding Http to Service

my.service.ts


import { Injectable } from "@angular/core";
import { IProduct } from "./product";
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/Observable/throw'
import 'rxjs/add/operator/catch'
import 'rxjs/add/operator/do'
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class ThingService {
    
    private _thingUrl = 'www.myWebApi.com/api/myThings';

    constructor (private _http: HttpClient){ }

    getMyThings(): Observable<IThing[]> {
        return this._http.get<IThing[]>(this._thingUrl)
        .do(data => console.log('data: ' + JSON.stringify(data)))
        .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
            return Observable.throw(err.message);
    }
}

TIP: The url can be to a local JSON file that has the desired response. This can be useful for mocking out the web service you are calling when testing or rapidly developing.

Using Service / Subscribing

Call the subscribe method of the returned observable

In your component you could have something like this.

ngOnInit(): void {
this._productService.myThings()
.subscribe(things => {
this.things = things;
}, 
error => {
                      /// handle error here...
});
}

Kill all instances of a process using Powershell

Sometimes it is just too tedious to click on and kill all the processes in Task Manager in Windows.

If you have a PowerShell prompt open and several instances to kill the following command will do the trick.

Kill the processes

One of my favorite examples:

stop-process -name phantomjs

Get List of Processes

If you don't know the name, use the following command to get a list of all processes running

Get-Process

Angular - Services

What is a service

Simply put it is a class with a focused purpose. Generally it is not specific to any component, and thus provides logic that can be used for different components. Useful for encapsulating external interactions such as web api calls, etc.

Dependency Injection

We can use Angular and Dependency Injection to inject the service into the component. This makes testing much easier by allowing for Mocks. Luckily, Angular has a built in injector.

In order for a component to use the service it just needs to add a parameter to the constructor of the component.

Example:

my.service.ts

import { Injectable } from '@angular/core'

@Injectable()
export class MyService {
   getMyThings() : IThing[] { ... }
}

export class MyComponent {
    private _myService;
    constructor(myService: MyService) {
        _myService = myService
    }
}

Tip: Here is the same MyComponent class, but in shorter syntax

export class MyComponent {

    constructor(private _myService: MyService) {
    }
}

Registering the Service

A service can be registered at with different scope. Choose the right method to get the right scope.

Method 1: Registering a Provider

To make the service available to a component and its children add it to the array of providers where the component is defined.

import { MyService } from './my.service';

@Component({

    selector: ...,

    template: ..., 

    providers: [MyService]

})

export class MyComponent {
    constructor(private _myService) {}
}