Getting Started with Angular Dariusz Kalbarczyk @ngKalbarczykÂ
NOVEMBER 21,2017 WARSAW
Selecting a Language ESÂ 5
ES 2015
- Run in the browser - No compile required
- Lots of new features (classes, let, arrow, etc.)
TypeScript - Superset of JavaScript - Strong typing - Great IDE tooling
Dart - No JavaScript - No comment :)
Why use TypeScript?
?
JavaScript = Dynamic Types The Good: 1. Variables can hold any object 2. Types determined on the fly The Bad: 3. Difficult to ensure proper types are passed without tests 4. Not all developers use === 5. App scale
What is TypeScript? • • • • •
Open source language Superset of JavaScript Transpiles to plain JavaScript Strongly typed Class-based object-orientation
TypeScript Any Browser
Any Host
Any OS
Tool Support
Key TypeScript Features Supports standard JavaScript code
Provides static typing
Classes and modules
Define interfaces
=> function (lambdas)
Intellisense and syntax checking
Supports for constructors, properties, functions
TypeScript Example Encapsulation
class Greeter { greeting: string; constructor (message: string){ this.greeting = message; } greet(){ return �Hello, � + this.greeting; } }
Static Typing
JavaScript Result var greeter = (function{ function Greeter(message){ this.greeting = message; } Greeter.prototype.greet = function(){ return �Hello, � + this.greeting; } return Greeter; })();
TypeScript Syntax Rules • {} brackets define code block • Semi-colons end code expressions • JavaScript keywords: – for – if – More...
Important Keywords and Operators • • • • • • • • • •
class - Container for members such as properties and functions constructor - Provides initialization functionality in a class export - Export a member from a module extends - Extend class or interface imports - Import a module interface - Defines code contracts that can be implemented by types module / namespaces - Container for classes and other code public / private - Member visibility modifiers <typeName> - <> characters use to cast / convert between types : - separator between variable / paramiter names and types
Code Hierarchy Module / Namespace
Class
Fields Constructor Properties Functions
Interface
Arrow Function Expressions var foo = function (a: number, b: number){ return a * b; } var foo = (a: number, b: number) => a*b; var foo = function (a,b){ return a * b; };
Angular Application Application
Component
Component
Service
Component
Component Class Component
Template
Metadata Properties
Methods
Component Example index.html
app.component.ts
<body>
<dkl-root></dkl-root> <body>
Import { Component } from ‘@angular/core’; @Component({ selector:’dkl-root’, template:’<h1>Hey {{name}}</h1>’ }) export class AppComponent { name: string = ‘Ktoś tam ’; }
Template in a Component Inline Template
Inline Template
template:”<div>…”
template:` <div> {{name}} <div>
` ES 2015 Back Ticks
Linked Template templateUrl: ”./car-list.component.html”
Angular Modules Root Angular Module
Feature Angular Module
Component
Component
Component
Component
Component
Data Binding Interpolation: {{carType}}
Property Binding: <img [src]="imgUrl">
DOM
Event Binding: <button (click)="go()">
Two-Way Binding: <input [(ngModel)]="filter">
Component
Interpolation (One-way) <img src={{imageUrl}}> <img src=' http://page.org/ {{imageUrl}} '>
Property Binding (One-way) <img [src]="imageUrl"> Re co mm
[] Binding Target
"" Binding Source
en de
d
Property Binding - Example <div *ngFor="let car of cars"> <img [src] = "car.imgUrl" [title] = "car.name" [style.width.px] = "imgWidth" [style.margin.px] = "imgMargin"> </div>
Event Binding Class
Template
<h1>{{car.name}}</h1> <img [src]="car.imgUrl"> <button (click) = "doSomething()">
() Target Event
export class CarListComponent { cars : any[] = [â&#x20AC;Ś.]; doSomething(): void {â&#x20AC;Ś..} }
"" Template Statement
Event Binding - Example <button (click)="toggleTable"> {{showTable ? 'Hide' : 'Show'}} table </button> <table *ngIf="showTable">...</table>
export class CarListComponent{ showTable: boolean = false; â&#x20AC;¦ toggleTable(): void { this.showTable = ! this.showTable; }
Mouse Event List mouseenter
mouseover mousemove mousedown mouseup auxclick
click dblclick contextmenu wheel mouseleave
mouseout select pointerlockchange pointerlockerror
https://developer.mozilla.org/en-US/docs/Web/Events
Two-way Binding Template
Class
<input [(ngModel)] = "carFilter">
export class CarListComponent { carFilter : string = "Audi Q7" ; }
[()] Banana in a Box
Thank You!