Angular 2

1st kNG2 meetup agenda

1. Angular 2 intro

2. Typescript intro

3. Angular 2 eco-system

assumptions:

you know how to code.

disclaimer:
angular2 is in RC stage (RC4)

Angular 2 intro

Angular What?

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target.
For web, mobile web, native mobile and native desktop.

Angular2 Motivation

1. angularJs 1.x is old

2. easy to start. hard to mention

3. scope soup

4. new web standards (shadow DOM, ES6)

5. performance improvement

Component-oriented architecture

• manage your application as a component tree
• each component has it's html, css, js
• not a new idea (Web components, react)
• angular 1.x supported it in limited way
• react made it mainstream
• and it's a core concept in angular 2
• talks with new trend of 'atomic design'. ask your desginer about it
• better unit testing

Hello world component

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

@Component({
  selector: 'app',
  template: `
    <h1>{{title}}</h1>`
})
export class App {
  title:string = 'Hello Kaltura';
}

Syntax

<player [mediaName]="'Superman'"></player>

<player-play-pause-btn (click)="togglePlayPause(isPlaying)">
</player-play-pause-btn>

Property binding

Events

<p>{{mediaTitle}}</p>

Interpolation

<input [(ngModel)]="mediaTitle"></input>

Two -way binding

Syntax

<media-item *ngFor="let media of medias"></media-item>

<media-description *ngIf="mediaDescription">
    {{mediaDescription}}
</media-description>

*ngFor

*ngIf

<video-player #player></video-player>
<button (click)="player.pause()">Pause</button>

References

Typescript intro

"TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source."

- from typescript website.

• Class and Module Support
• Static Type-checking
• ES6 Feature Support
• Clear Library API Definition
• Build-in Support for JavaScript Packaging
• Syntax Similarity to Our Backend Languages (Java, Scala)
• Superset of JavaScript

Angular 2 tools

Angular CLI:

CLI tool for creating new angular 2 apps with best practices,
creating components, pipes and all building blocks of angular2
 

Angular Universal:

run angular 2 code on server initially. boost initial load, SEO, social links

Angular 2 + Nativescript \ react renderer:

compile your js code into a native mobile app

Angular 2 mobile toolkit

Tools for building progressive web apps with Angular

More than just Hello world

1. List of meetups with its date and attendies
2. Add new meetup

Application component tree plan:

1. kng2-app 
   1. kng2-meetup-list  (holds the data)
      1. kng2-meetup (loop using ngFor). click to expand details
         1. ​kng2-meetup-attendee (loop using ngFor)
   2. kng2-add-ng-meetup (adding data to k-app component)

Playground & live demo:

https://plnkr.co/edit/b1GD95ooaDtsa3u1OqO3?p=preview

Our plan

Next meetups will be in form of workshop along with one subject that we'll learn.

you're going to get next meetup static html&css and start building an angular2 web app.

The web app will manage kaltura's internal meetups, attenders, ideas, talkers and more.

get ready for next time

​Installations:

• Node 4 + & npm
  https://docs.npmjs.com/getting-started/installing-node

• Typings v1 +
  https://www.npmjs.com/package/typings

• typescript 1.8
  https://www.typescriptlang.org/

• ng-cli
  npm install -g angular-cli

Angular2 education:

https://github.com/timjacobi/angular2-education​