These are chat archives for Selleo/angular2-workshop

23rd
Apr 2016
Kacper Kuś
@gaa7par
Apr 23 2016 07:07
Hello, world!
Paweł Duda
@pawelduda
Apr 23 2016 07:07
siema :)
Dominik Duda
@dominikduda
Apr 23 2016 07:07
cześć :)
Przemek
@psmyrdek
Apr 23 2016 07:07
dzień dobry :3
Mario
@delmaroi
Apr 23 2016 07:08
Hello
PiotrSzlagura
@PiotrSzlagura
Apr 23 2016 07:08
Witam :)
Piotr Chalecki
@chalecki
Apr 23 2016 07:11
hi!
Michał Staśkiewicz
@mikoscz
Apr 23 2016 07:11
Hello :)
Szymon Kabelis
@szymkab
Apr 23 2016 07:16
cześć :D
Wojtek Ryrych
@ryrych
Apr 23 2016 07:25
kto ma konto na twitterze proszę o share :) https://twitter.com/wryrych/status/723774504699351041
Tomasz Bak
@tb
Apr 23 2016 07:57
Webpack
  1. Bootstrapping an Angular 2 Application
    http://ngcourse.rangle.io/handout/bootstrapping/index.html
Starter preboot/angular2-webpack
https://github.com/preboot/angular2-webpack
Tomasz Bak
@tb
Apr 23 2016 08:22
Install js lib + its typings
npm install lodash --save
typings install lodash --save
npm install bootstrap-sass ng2-bootstrap --save
Tomasz Bak
@tb
Apr 23 2016 08:57
➜ angular2-workshop git:(0-bootstrap) node -v
v4.2.6
➜ angular2-workshop git:(0-bootstrap) npm -v
3.8.6
we create component Hello

import {Component, Input} from 'angular2/core';

@Component({
selector: 'hello',
template: <h1> Hello, {{name}} <span *ngIf="city">from {{city}}</span> </h1>
})
export class Hello {
@Input('name') name: string;
@Input('city') city: string;
}

<hello [name]="name"></hello>
<hello name="Joe" city="Jasienica"></hello>
Tomasz Bak
@tb
Apr 23 2016 09:26
users: any[] = [{id: 1, email: 'tom@selleo.com'}];
Tomasz Bak
@tb
Apr 23 2016 09:31
  <tr *ngFor="#user of users">
        <td>{{user.id}}</td>
        <td>{{user.email}}</td>
    </tr>

export class UsersIndex {
name: string;
users: User[] = [];

constructor(public usersStore: UsersStore) {
this.name = 'Tom';
this.users = usersStore.getList();
}
}

Tomasz Bak
@tb
Apr 23 2016 09:37
Users edit component

import {Component} from 'angular2/core';

import {UsersStore} from '../../providers/users-store';
import {User} from '../../models/user';

@Component({
selector: 'users-edit',
template: require('./users-edit.html'),
styles: [],
providers: [],
directives: [],
pipes: []
})
export class UsersEdit {
constructor(public usersStore: UsersStore) {
}
}

{path: '/users/:id', component: UsersEdit, name: 'UsersEdit'},
Tomasz Bak
@tb
Apr 23 2016 10:10
<form [ngFormModel]="userForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<label>Email:</label>
<input type="email" ngControl="email" class="form-control">
</div>

<div class="form-group">
<label>Password:</label>
<input type="password" ngControl="password" class="form-control">
</div>

<button type="submit" class="btn btn-default">Update user</button>
</form>

export class UsersEdit {
user: User;
userForm: ControlGroup;

constructor(public usersStore: UsersStore,
public params: RouteParams,
public builder: FormBuilder
) {
this.user = usersStore.getOne(Number(params.get('id')));

this.userForm = builder.group({
  email: this.user.email,
  password: this.user.password
});

}

onSubmit() {
console.log(this.userForm.value);
}
}

import {Component} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {Control, ControlGroup, FormBuilder, FORM_DIRECTIVES} from 'angular2/common';
Tomasz Bak
@tb
Apr 23 2016 11:31
npm i json-server --save-dev
"api": "json-server --watch db.json --port 8081",
Tomasz Bak
@tb
Apr 23 2016 11:37
{
"users": [
{
"id": 1,
"email": "t.bak@selleo.com",
"password": "secret"
},
{
"id": 2,
"email": "max@example.com",
"password": "secret"
}
]
}
Tomasz Bak
@tb
Apr 23 2016 11:53
getList(): Observable<User[]> {
return this.http.get(${this.apiHost}/users)
.map((res: Response) => {
return res.json().map((object: any) => new User(object));
});
}

export class UsersIndex {
users: User[] = [];

constructor(public usersStore: UsersStore) {
usersStore.getList()
.subscribe((users: User[]) => this.users = users);
}
}

Tomasz Bak
@tb
Apr 23 2016 12:04
getList(): Observable<User[]> {
return this.api.request(RequestMethod.Get, '/users')
.map((res: Response) => {
return res.json().map((object: any) => new User(object));
});
}
Tomasz Bak
@tb
Apr 23 2016 12:15
getOne(id: number): Observable<User> {
return this.api.request(RequestMethod.Get, /users/${id})
.map((res: Response) => {
return new User(res.json());
});
}
ngOnInit() {
this.usersStore.getOne(Number(this.routeParams.get('id')))
.subscribe((user: User) => {
this.user = user;
this.userForm = new ControlGroup({
email: new Control(
this.user.email,
Validators.compose([Validators.required, CustomValidators.emailFormat])
),
password: new Control(
this.user.password,
Validators.compose([Validators.required, Validators.minLength(6)])
)
});
});
}