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
von NULL auf app
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
Hamburg AngularJS Meetup @angular_hamburg
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
Browser
Native
Mobile
angular.io
compiled die App
eigene Compiler nutzen möglich
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';
platformBrowserDynamic().bootstrapModule(AppModule);
in rc5 eingeführt
Gröbste Struckturierung
viele ngModule in einer App
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 } 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: String;
title = 'app works!';
constructor() { }
ngOnInit() {}
}
<app-root [class]="myInput" (myOutput)="handleOutput($event)"></app-root>
angular.io
Daten holen
Daten / Code sharen
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, Input, 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
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
ng g
ng generate <blueprint> [<path-to>/]<name>
blueprint:
module
component
directive
service
pipe
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