Angular 2: Working with Alphas

View Github Repository Open presentation in a new window

dpsthree

See all presentation from dpsthree

Angular 2: Working with Alphas

0 0

ng2talk

Talk given at Angular Lunch Meetup

On Github dpsthree / ng2talk

Angular 2: Working with Alphas

Paul Spears

paul.spears@oasisdigital.com
@dpsthree

Victor Savkin

http://victorsavkin.com/ A lot of the material today is mostly just a rehash of the content from Victor's Blog. He is a member of the Angular 2 team and has some great explanations of the hows and whys behind Angular. I strongly encourage anyone working with NG2 to checkout his blog.
Where do I get it?
  • Pre-built
    • https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js
  • Sandbox
    • http://github.com/dpsthree/NG2-TS-JSPM
  • Build It
  • Bundle It
The quickest way to get up and running is to pull up a sandbox and dig in. There are a couple places online and a few clone-and-go repos. I have one here that you can play with as an example. If you don't care for TypeScript there is an ES5 version available as well.

There are 3 primary ideas you will need to know

  • Components
  • Data Binding
  • Dependency Injection
In Angular 1 everyone started off throwing controllers at every problem they had. Eventually we learned how to better divide our applications and improve upon this approach. These three concepts are the Angular 2 equivalent. By focusing on these three pieces we can build some substantial applications.

Components

@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
    name: string;
    constructor() {
        this.name = 'Alice';
    }
}
This is an NG2 component. Everything that you see in an Angular2 application is associated with a component. And almost everything in Angular 2 is a component~. By identifying an application level component and referring to child components in its template we build applications out of a component tree.

Data Binding

[Properties] send data down

(Events) send data up the hierarchy

Moving data between components is almost exactly like communicating between isolate scope directives. The list of properties declared on a component are used to indicate what data will be passed down to the component from its parent. The events declared on a component indicate what the parent is listening to.

Properties

@Component({
    selector: 'child-cmp',
    properties: ['providedByParent'],
})
@View({
    templateUrl: 'child_cmp.html'
})
class ChildCmp {
    providedByParent: string;
    //...
}
            
<div>
    Hello, the following is data from the parent component: {{ providedByParent }}
</div>
This is an example of a component with a property. You declare that the component has the property and any bindings made using that property will be updated as its value changes in the parent scope.

Events

@Component({
    selector: 'child-cmp',
    events: ['childDataEmitter']
})
@View({
    templateUrl: 'child_cmp.html'
})
class ChildCmp {
    childDataEmitter: EventEmitter;
//...
}
            
<child-cmp (childDataEmitter)="childEventWasCalled()">
    childEventWasCalled is a function on the parent
</child-cmp>
This is an example of a component that emits an event and its declaration in the HTML. There are all kinds of tricks and syntax sugar for this system that we may get into later if there is time.

Dependency Injection

Think of dependency injection as a tree that follows the component hierarchy. Any component can request that a new instance of some component, service, whatever be injected into the class for use. That instance is then available for use there as well as in any child components. Any injectable that was created higher in the tree can be overridden in any child by a request for a new instance 
@Component({
    selector: 'my-app',
    bindings: 'MyThing'
})
@View({
    template: '<h1>Hello {{ name }}</h1>
               <child-cmp></child-cmp>',
    directives: ['childCmp']
})
class MyAppComponent {
    name: string;
    constructor(thing1: MyThing) {
        this.name = 'Alice';
    }
}
                
@Component({
    selector: 'child-cmp'
    //did not specify binding because I do not want to override the one above
})
@View({
    template: '<div>placeholder</div>'
})
class ChildCmp {
    constructor(thing1: MyThing){
        //thing1 is the same instance as above
    }
}

Putting it all together

You can find the code on github/dpsthree

Prepping for NG2

  • Ban ng-controller
  • Compose your applications of isolate scope directives
  • Write directives using only one-way binding and function hooks
  • Remove $scope.watch
  • Consider using observables with your custom services
  • Write Services, Not Factories
  • Start using Typescript and Module Systems
Angular 2: Working with Alphas