Conociendo Angular

Cosas a Conocer

• ECMAScript 6
• TypeScript
• Angular 2
• Demo

En el 2015 JS conquisto el mundo... 

ECMAScript 6

• Add Classes.
• Modules.
• Promises.

Classes

class Person {
  name;
  age;

  constructor (name, age) {
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}

 

Modules

//  lib/math.js
export function multiply (x, y) { return x * y }

//  someApp.js
import { multiply } from "./lib/math"
console.log(multiply(2, 2));

 

Promises

doSomething(){
   return new Promise((resolve) =>{
     resolve(true);
   })
}

doSomething().then(rta => {
  console.log(rta);
});

 

TypeScript

Types

// Only string permitted.

let alert = (msg: string) => {
  alert(msg);
}

Interfaces

interface Shoe {
  brand: string,
  size: number,
  isCasual: boolean
}

Angular 2 simplemente Angular...

Cross Platform

• PWA
• Native
• Desktop

Speed and Performance

• Code generation
• Universal
• Code splitting

Productivity

• Templates
• Angular CLI
• IDEs

Full Development Story

Components

@Component({

selector: 'main-view',

styles: [ require('./main.view.scss') ],

template: require('./main.view.html'),

directives: [ UserInfoComponent ],

providers: [ PostService ]

})

export class MainViewComponent {

title: string = "Main View"

posts: Array<string> = []

 constructor( private postService: PostService) {

      this.postService.getPosts().then(posts => this.posts = posts)

}}

 

Templates

<div>{{ name }}</div> 

<button (click)="downloadData()"> Download </button>

<ul>

<li *ngFor="let post of posts">

{{ post.name }}

</li> </ul>

<div *ngIf="shouldShow()">.....</div> 

<user-info [user]="user"></user-info>

<input [(ngModel)]="username">

Observables & Subscribers

 

const observable = Observable.of('dog') 
const subscriber = observable.subscribe(response => {
                   console.debug(response) }) subscriber.next('cat') 
subscriber.unsubscribe()

 

Services

  @Injectable()
  export class UserService {
    baseUrl: string = 'http://api.myapp.com'
    constructor(
@Inject(Http) private http: Http
) {}
downloadUser(): Observable<any> {
     return this.http
       .get(`${this.baseUrl}/user`)
       .catch(() => Observable.throw())
       .map(response => {
          if (response.statusCode === 200) {
           return response.json()
          } else {
            throw new Error()
          }})}}

Cambios en el versionamiento y Releases.

Angular CLI

$npm install -g angular-cli 

$ng new myapp 

$ng build --prod 

$ng serve 

$npm install -g firebase

$firebase init

$firebase deploy