Angular 2

 06.07.2016

BUZZWOO!

(RC 4)

• npm

• Modules (ES6, CommonJS)
• SystemJS
• TypeScript

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()