angular-cli

von NULL auf app

  • Was
  • Warum
  • Wie

angular-cli

angular 2

Was ist das?

web-dave

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

 

web-dave

Hamburg AngularJS Meetup @angular_hamburg

angular-cli installieren

Voraussetzung:

  • node (4 oder 6)
  • git

 


npm install -g angular-cli

ng v
// or
ng version

// angular-cli: 1.0.0-beta.16
// node: 4.5.0
// os: win32 ia32

Wer von euch nutzt es schon?

angular 2

Kann auf unterschiedlichen Platformen laufen.​​

Die App

Browser

Native

Mobile

 

angular.io

Platform

compiled die App

eigene Compiler nutzen möglich

 

Platform

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';

platformBrowserDynamic().bootstrapModule(AppModule);

ngModule

in rc5 eingeführt

Gröbste Struckturierung

viele ngModule in einer App

ngModule

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  exports: [],
  providers: [],
  bootstrap: []
})
export class MyNgModule { }

components

https://unsplash.com/
Kai Oberhäuser

components

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>

lifecycle hooks

angular.io

services

Daten holen

Daten / Code sharen

services

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

directives

Eigenschaften verändern

directives

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

pipes

früher Filter

pipes

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

Was ist das?

angular-cli

Ein Tool mit dem man eine Angular 2 App aufsetzt

code generator

Build tool

dev environment

devOps

Warum angular-cli?

Sie (CLI)..

 

  • kümmert sich um alle abhängigkeiten
  • setzt ein komplettes Projekt auf
  • follgt dem Styleguide

 

Warum styleguide?

ohne Kommentar

Start


//cd into your workspace
cd workspace

//scaffold your project
ng new hello-cli

Serve your app

cd hello-cli
ng serve

http://localhost:4200/

generieren


ng g
ng generate <blueprint> [<path-to>/]<name>


blueprint:	
component
directive 
service 
pipe
module
class
interface
enum

generieren

ng g
ng generate <blueprint> [<path-to>/]<name>


blueprint:  

module
component
directive
service
pipe
class
interface
enum

Test

//unit test using Karma and jasmine
ng test

//e2e test using protractor
ng serve
ng e2e

build

// build dev
ng build

//build prod (minimized)
ng build --prod

Hilfe

ng help

https://cli.angular.io/

live coding

Questions?

Hamburg AngularJS Meetup

 

@angular_hamburg

@webdave_de

 

https://angularjs.de

Angular 2

By David Muellerchen

Angular 2

  • 1,106