Angular 2

06.07.2016

BUZZWOO!

(RC 4)

Before We Start

https://www.npmjs.com/~angular

ANGULAR CLI*

$ npm install -g angular-cli

* requires node 4.x+

creat new project

$ ng new project-name

built-in web server with live-reload

$ ng serve

http://localhost:4200

Setting up Test Environment

unit test: karma

https://karma-runner.github.io/

run unit test

with angular cli

$ ng test

karma server
file watcher
re-run tests

end-to-end test: protractor

protractortest.org

run e2e test

with angular cli

$ ng e2e

* the app must be already running (via ng serve)

easier e2e test: codeceptjs

codecept.io

codecepjs syntax

coding time!

buzzwoo! contacts

features

display all contacts
add new contact
view a contact details
edit contact details
delete a contact

a `contact`

(id)
name
email
description
tel. number
avatar image

[{
  "id": 1,
  "name": "armno",
  "email": "armno@company.de",
  "description": "MD, Chiang Mai Office",
  "tel": "+66098765432",
  "avatar": "avatar/armno.jpg"
},
{
  "id": 2,
  "name": "Mucky Muckginger",
  "email": "mucky@company.de",
  "description": "Give me one more drink",
  "tel": "+44739238013",
  "avatar": "avatar/mucky.jpg"
}]

contact.service

basic CRUD methods
C - Create (add)
R - Read (get, getAll)
U - Update (update)
D - Delete (delete)

Read

getContacts()