Angular2 and You!

class: center, middle

# Angular 2 and *you*
### with Pam Selle, @pamasaur thewebivore.com

???

Making serverless awesome at IOpipe, Google Developer Expert, Philadelphia

---

# What is Angular 2?

---

## Angular 2

- [https://angular.io/](https://angular.io/)
- *Quite* different from Angular 1

---

## Angular 1 => 2

- [Blogged about on 3/18/2014](https://angularjs.blogspot.com/2014/03/angular-20.html)
- Goals
  - Faster
  - Modular
  - ECMAScript 6
  - Simplify DI, templating, directives
- Beta: Dec 2015

---

What makes Angular 2 special?

---

## Angular 2 and you

- Build for any deployment target
- Choose your own language
- Web components

---

# Build for any deployment target

---

# Angular2 is not tied to the DOM

---

![tada](images/tada.png)

---

![tada](images/angularjs-loves-nativescript.png)

https://github.com/NativeScript/sample-ng-todomvc

???
Share code between mobile app and website
NativeScript is an open source, cross-platform framework for mobile apps

---

# Choose your own language

???
While AngularJS is a JavaScript framework, Angular 2 is a “whatever compiles to JavaScript” framework. As long as what you want to write in can compile to JavaScript, you can (probably) use Angular 2.

---

![Docs dropdown](images/angular-docs-dropdown.png)

---

## TypeScript?

Superset of JavaScript providing:

- optional static typing
  - interfaces
  - enums
  - hybrid types
  - generics & more

---

## TypeScript?

- compile newest JS standards to run in older environments
  - modules
  - lambdas
  - classes
  - spread operator & more

---

## TypeScript?

AND JavaScript code is valid TS code!

---

# Do I have to use TypeScript to use Angular 2?

???
No! But I might ask: Why wouldn't you? TS is also the best documented in the docs.

---

# Web components

---

## A web component consists of …

- Markup (HTML)
- Behavior (JS)
- Presentation (CSS)

---

## Web components APIs

![Web Components Logo](images/webcomponents.svg)

- Custom Elements
- HTML Imports
- Templates
- Shadow DOM

???
Browser vendors still need to shake things out a bit for Web Components to be implemented. As an architectural component of an client-side application, however, the Web Components approach is something to be reckoned with.

---

<select>
  <option>Python</option>
  <option>JavaScript</option>
  <option>Porque no los dos?</option>
</select>

```html
<select>
  <option>Python</option>
  <option>JavaScript</option>
  <option>Porque no los dos?</option>
</select>
```

---

## Learn more

http://webcomponents.org/

---

# Components in Angular 2

---

## TypeScript

```javascript
@Component({
  selector: 'my-app',
  template: '<p>Hello {{name}}!</p>',
})

class AppComponent {
  name:string = 'World';
  constructor() { }
}
```

---

## And in ES5 …

```javascript
var AppComponent = ng
  .Component({
    selector: 'my-app',
    template: '<p>Hello {{name}}!</p>'
  })
  .Class({
    name: 'World'
    constructor: function () { }
 });
 ```

---

# What's a directive anyway?

???
In Angular 1, nearly everything to control page rendering is done with directives. There are lots of existing directives ranging from the very simple (for example, ngIf is a directive you can use to conditionally show/hide part of the page) to the complex (such as data binding with ngBind). You often create your own directives to add custom behavior to an element or simply to render a template.

---

```javascript
<a *ngIf="thisIsTrue" href="foo.com">Some Link </a>
```

???
The * makes it easy to see directives that modify the HTML layout, and helps Angular expand them into something it understands
---

# Keep directives, but they go in _components_

---

## Component with directive

```javascript
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{name}}<span *ngIf="itIsJuly">, DjangoCon</span>!</h1>',
})

class AppComponent {
  name:string = 'World'
  itIsJuly:boolean
  constructor() {
    var date = new Date()
    this.itIsJuly = (date.getMonth() == 6 && date.getFullYear() == 2016)
}
```

---

# Angular and Django

---

# Write [API] once use everywhere

---

## Write an API

- [Django REST](http://www.django-rest-framework.org/)
- [Tastypie](https://django-tastypie.readthedocs.io/en/latest/)

---

## Django REST

- Powerful & flexible
- Web-browsable API
- Other awesomeness

---

# Our API? DaaS

(dinosaurs as a service)

---

## Angular 2? Consume the API!

```javascript
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class DinosaurService {
  private apiURL = 'http://localhost:8000/dinosaurs';

constructor(private http: Http) { }

getDinos() {
    return this.http.get(this.apiURL)
              .toPromise()
              .then(response => response.json())
              .catch(this.handleError);
  }

private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

```

---
class:important-bit

## Consume the API

```javascript
getDinos() {
  return this.http.get(this.apiURL)
    .toPromise()
    .then(response => response.json())
    .catch(this.handleError);
}
```

---

# Zut alors! CORS!

---

There's a Django package for that:

https://github.com/ottoyiu/django-cors-headers

---

# Back to JavaScript!

---

## Dinosaur Component

```javascript
@Component({
  selector: 'dinosaurs',
  template: `<ul><li *ngFor="let dino of dinos">{{dino.species}}</li></ul>`
})
```
---

## Dinosaur Component

```javascript
export class DinosaurComponent implements OnInit {
  dinos: any[];
  error: any;

constructor(private dinosaurService: DinosaurService) { }

getDinos() {
    this.dinosaurService
        .getDinos()
        .then(dinos => this.dinos = dinos)
        .catch(error => this.error = error);
  }

ngOnInit() {
    this.getDinos();
  }
}
```

---

```javascript
constructor(private dinosaurService: DinosaurService) { }
```
???
Dependency Injection in action!
---

```javascript
ngOnInit() {
  this.getDinos();
}
```
???
Call this OnInit so we can use it!

---

Example app at [https://github.com/pselle/django-rest-angular2-example](https://github.com/pselle/django-rest-angular2-example)

Slides at [pselle.github.io/angular2andyou](http://pselle.github.io/angular2andyou)

---

class: center, middle

# Thank you!

### @pamasaur | thewebivore.com | turing.cool