David Muellerchen
David Muellerchen is a trainer at AngularJS.DE. He loves to speak and teach at meetups and conferences. During leisure time he jumps through the parks with his kids or rides his racer. He a
user: Java
PW: Training
Warum angular 2?
Was ist das?
David Müllerchen
JavaScript seit 10 Jahren
Seit 2 Jahren bei acando
Blog: https://www.webdave.de/
Github: https://github.com/web-dave/
Twitter: @webdave_de
https://angularjs.de
Voraussetzung:
npm install -g angular-cli
ng v
// or
ng version
// angular-cli: 1.0.0-beta.16
// node: 4.5.0
// os: win32 ia32
ng new hello-cli --style=scss --prefix=meetup
Browser
Native
Mobile
angular.io
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';
platformBrowserDynamic().bootstrapModule(AppModule);
import { NgModule } from '@angular/core';
@NgModule({
declarations: [],
imports: [],
exports: [],
providers: [],
bootstrap: []
})
export class MyNgModule { }
https://unsplash.com/
Kai Oberhäuser
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
@Input() myInput: String;
@Output() myOutput: new EventEmitter();
title = 'app works!';
constructor() { }
ngOnInit() {
this.myOutput.emit('Tadaaa!');
}
}
<app-root [class]="myInput" (myOutput)="handleOutput($event)"></app-root>
<input type="" value="" onchange="" onclick="" onblur="">
<input [type]="" [(ngModel)]="myValue" [value]="" (change)="" (click)="" (blur)="">
Databinding
[] <= ""
[name]="myName"
() => ""
(click)="isClicked($event)"
[()] <=> ""
[(value)]="myValue"
angular.io
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MyService {
restRoot: string = 'https://api.spotify.com/v1/';
constructor(private _http: Http) { }
myServiceMethode(str: string) {
let url = `${this.restRoot}search?offset=0&limit=20&type=artist&market=US&query=${str}`;
return this._http.get(url)
.map(res => res.json());
}
}
Eigenschaften verändern
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
<p myHighlight>Highlight me!</p>
angular.io
früher Filter
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'simulateThink'
})
export class MyPipe implements PipeTransform {
transform(value: any, args?: any): any {
return `Ähm... ${value}`;
}
}
<span>{{'Hi, my name is' | simulateThink }}</span>
Ähm... Hi, my name is
code generator
Build tool
dev environment
devOps
Sie (CLI)..
//cd into your workspace
cd workspace
//scaffold your project
ng new hello-cli --style=scss --prefix=meetup
cd hello-cli
ng serve
http://localhost:4200/
ng g
ng generate <blueprint> [<path-to>/]<name>
blueprint:
component
directive
service
pipe
module
class
interface
enum
//unit test using Karma and jasmine
ng test
//e2e test using protractor
ng serve
ng e2e
// build dev
ng build
//build prod (minimized)
ng build --prod
ng help
https://cli.angular.io/
Hamburg AngularJS Meetup
@angular_hamburg
@webdave_de
https://angularjs.de
By David Muellerchen
David Muellerchen is a trainer at AngularJS.DE. He loves to speak and teach at meetups and conferences. During leisure time he jumps through the parks with his kids or rides his racer. He a