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)
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.
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
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<h1>{{title}}</h1>`
})
export class App {
title:string = 'Hello Kaltura';
}
<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
<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 is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source."
- from typescript website.
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
Application component tree plan:
Playground & live demo:
https://plnkr.co/edit/b1GD95ooaDtsa3u1OqO3?p=preview
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.
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