What is Angular?

1. Javascript framework for Single Page Application
2. Uses Typescript - optionally typed
3. Component Architecture
4. Built in Dependency Injection
5. Developed and maintain by Google

<component>

Custom HTML tag!?

1. A way to compose your UI into reusable part of your website
2. An Angular app is largely made up of components

<component>

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'helloworld',
  template: `<div>Hello World! I am {{name}}</div><button (click)="letsGo"></button>`,
  styles: [`
    div {
      color: 'red'
    }
  `]
})
export class HelloworldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @Input()
  name: string;

  @Export()
  alertMe: EventEmitter<string> = new EventEmitter();
}

<component>

<div>
    <helloworld [name]="'Ringo'" (alertMe)="showAlert($event)"></helloworld>
</div>

Services

reusable code that can be injected into components

Service 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class stuffService {

  constructor(private _httpClient: HttpClient) { }

  public GetStuff() {
    return this._httpClient.get('stuff url');
  }
}

Dependency Injection

A pattern we use to manage dependency in our code

Angular w/ DI

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'

@Injectable()
export class UserService {

  constructor(private http: HttpClient) {}

  TalkToServer() {
    return this.http.get('some url');
  }
}

import { Component, OnInit } from "@angular/core";
import { UserService } from "../user.service";

@Component({
  selector: "app-welcome-component",
  templateUrl: "./welcome-component.component.html",
  styleUrls: ["./welcome-component.component.css"]
})
export class WelcomeComponentComponent implements OnInit {
  
constructor(private _userService: UserService) {}

  ngOnInit(): void {
    _userService.TalktoServer()
  }
}

Component =>

<= Service

Constructor initialized/injected UserService class to be used in component.
​

Constructor initialized/injected HttpClient class to be used in service.
​

@NgModule()

Declare your dependencies!

@NgModule()

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UserService } from './user.service';

import { AppComponent } from './app.component';
import { WelcomeComponentComponent } from './welcome-component/welcome-component.component';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponentComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

What is TDD?

Way of writing software

• A coding best practice
• Test first, code later!

Why?

1. Regression Testing 
2. Help Manage Code Complexity

Angular provide a testing tool set out of the box

• Angular CLI
• Jasmine
• Karma

Lets Get Started!

What are we building?

Shopping Cart Checkout Page