WarsawJS Presentation Template

We talk about JavaScript. Each month in Warsaw, Poland.

Angular 2
– a short introduction

Mateusz Kocz @mateuszkocz

Evolution or revolution?

Evolution or revolution?

Still a work in progress

Currently in the alpha state. Tested internally by Google.

Not ready for production.

What is Angular 2 all about?

No longer in Angular 2

                <!-- Template -->
                <app>
                  Hello {{ user.name }}!
                  <profile-picture
                    #urerpic
                    title="My picture"
                    [url]="user.picture"><profile-picture>
                  <remove-picture (click)="removePicture(userpic)"></remove-picture>
                </app>
            
                // Component
                import {Component, View} from 'angular2/angular2'
                @Component({
                  selector: 'profile-picture',
                  properties: ['url']
                })
                @View({
                  inline: '<img [src]="{{ url }}" [alt]="info">
                })
                export class ProfilePicture{ /* ... */ }
            
                @Component (/* ... */)
                @View (/* ... */)
                 
                // Class
                export class ProfilePicture {
                  constructor(getSize:PicturesSizing) {
                    this.info = 'User picutre';
                    this.size = getSize('user-pic');
                  }
                }
            
                import {FormBuilder, Validators, FormDirectives,
                        ControlGroups} from 'angular2/forms'
                // @Component & @View
                export class ComponentWithForms {
                  constructor(form:FormBuilder) {
                    this.inputs = form.group({
                      name: ["initial value", Validators.required]
                    })
                  }
                }
            

Attribute directives are still there

export class Component extends Directive
                @Directive({
                  selector: '[add-action-to-element]'
                })
                export class ActionAdder {
                  constructor(element:Element) {
                    // Do something with the element
                  }
                }
            

What about services?

Angular will no longer provide any frame for services. Instead, they will be plain old JavaScript [place your type here].

                // A service's example
                export SomeBusinessLogic {
                  addTwoNumbers(number1:number, number2:number):number {
                    return number1 + number2;
                  }
                }
            

Will not tell about:

Questions?

Thank you!

See you next month at WarsawJS

Fork me on Github