LECTURE 7 INTRODUCTION TO IONIC 2

LECTURE 7

INTRODUCTION TO IONIC 2

DANIEL RYS J A N VÁ C L AV Í K

OVERVIEW

• Create new Ionic2 application • Why Ionic2 • Project structure • Features

2/95

I N S TA L L I O N I C 2 & C R E AT E N E W A P P L I C AT I O N

$ npm install -g ionic@beta $ ionic start my-first-ionic2-app [tabs|sidemenu|blank] --v2 [--ts] $ ionic serve

3/95

I N S TA L L I O N I C 2 & C R E AT E N E W A P P L I C AT I O N

Ionic version 2

$ npm install -g ionic@beta $ ionic start my-first-ionic2-app [tabs|sidemenu|blank] --v2 [--ts] $ ionic serve

4/95

I N S TA L L I O N I C 2 & C R E AT E N E W A P P L I C AT I O N Create TypeScript project Ionic version 2

$ npm install -g ionic@beta $ ionic start my-first-ionic2-app [tabs|sidemenu|blank] --v2 [--ts] $ ionic serve

5/95

WHY IONIC2 • Component-based model • Angular2 • ES6 / TypeScript (transpiling) • Windows 10 support, Android Material Design • Generator • Better theming & performance • More scalable structure 6/95

/95

I can do all this through him who gives me strength Philippians 4:13

/95

ECMASCRIPT 6 / TYPESCRIPT • Classes (OOP) • Fat arrow (=>) • Promises • Components (modules) • Block scoping

9/95

CLASSES • Mapping real world object into the abstract

class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y } }

10/95

CLASSES • Mapping real world object into the abstract

class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y } }

Constructor is called when creating instance of class

11/95

F AT A R R O W F U N C T I O N S

someFunction(function(response){ console.log(response); });

12/95

F AT A R R O W F U N C T I O N S Has local context

someFunction(function(response){ console.log(response); });

13/95

F AT A R R O W F U N C T I O N S Has local context

someFunction(function(response){ console.log(response); }); someFunction((response) => { console.log(response); });

14/95

F AT A R R O W F U N C T I O N S Has local context

someFunction(function(response){ console.log(response); }); someFunction((response) => { console.log(response); });

Has parent context

15/95

PROMISES

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

For more details see Lecture 5 16/95

IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y} export var pi = 3.141593 // someApp.js import * as math from "lib/math" console.log("2PI = " + math.sum(math.pi, math.pi)) // otherApp.js import {sum, pi} from "lib/math" console.log("2PI = " + sum(pi, pi))

17/95

IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y} export var pi = 3.141593

Specify visible functions, vars

// someApp.js import * as math from "lib/math" console.log("2PI = " + math.sum(math.pi, math.pi)) // otherApp.js import {sum, pi} from "lib/math" console.log("2PI = " + sum(pi, pi))

18/95

IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y} export var pi = 3.141593

Specify visible functions, vars

// someApp.js import * as math from "lib/math" console.log("2PI = " + math.sum(math.pi, math.pi)) // otherApp.js import {sum, pi} from "lib/math" console.log("2PI = " + sum(pi, pi))

Can call functions from components

19/95

IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y} export var pi = 3.141593

Specify visible functions, vars

// someApp.js import * as math from "lib/math" console.log("2PI = " + math.sum(math.pi, math.pi)) // otherApp.js import {sum, pi} from "lib/math" console.log("2PI = " + sum(pi, pi))

Can call functions from components

20/95

IMPORT & EXPORT COMPONENTS IN IONIC2

import {Page} from 'ionic-angular'; import {MoviesPage} from '../movies/movies';

21/95

IMPORT & EXPORT COMPONENTS IN IONIC2 Import from Ionic import {Page} from 'ionic-angular'; import {MoviesPage} from '../movies/movies';

22/95

BLOCK SCOPING

for (let i = 0; i < movies.length; i++) { let x = movies[i]; } console.log(x);

23/95

BLOCK SCOPING

for (let i = 0; i < movies.length; i++) { let x = movies[i]; } console.log(x); // Undefined

24/95

TYPESCRIPT EXAMPLE

function add(x : number, y : number) : number { return x + y; } add('a', 'b');

25/95

TYPESCRIPT EXAMPLE

function add(x : number, y : number) : number { return x + y; } add('a', 'b'); // Compiler error

26/95

DEPENDENCY INJECTION

27/95

DEPENDENCY INJECTION import {Page, NavController, Platform} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { static get parameters() { return [[NavController], [Platform]]; } constructor(nav, platform) { this.nav = nav; this.platform = platform; } }

28/95

DEPENDENCY INJECTION import {Page, NavController, Platform} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { static get parameters() { return [[NavController], [Platform]]; } constructor(nav, platform) { this.nav = nav; this.platform = platform; } }

Constructor is function called when new instance is created

29/95

DEPENDENCY INJECTION import {Page, NavController, Platform} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { static get parameters() { return [[NavController], [Platform]]; } constructor(nav, platform) { this.nav = nav; this.platform = platform; } Inject components }

to constructor

Constructor is function called when new instance is created

30/95

BINDING

31/95

BINDING

32/95

BINDING

One-way data binding []



33/95

BINDING

One-way data binding []





34/95

BINDING

One-way data binding []





Call function on event ()

35/95

BINDING

One-way data binding []





Call function on event ()

36/95

BINDING

One-way data binding []





Call function on event ()

37/95

BINDING

One-way data binding []





Call function on event ()

Two-way data binding [()] 38/95

RENDERING

Hello my name is {{name}} and I like {{thing}}.

39/95

RENDERING

Hello my name is {{name}} and I like {{thing}}.

The same as in Angular1

40/95

C R E AT E L O C A L V A R I A B L E

41/95

C R E AT E L O C A L V A R I A B L E # means variable

42/95

D E C O R AT O R S

• Metadata and info about classes • Directly above class definition • Starts with @

43/95

D E C O R AT O R T Y P E S • @App – Declare class for root component in Angular2 • @Component – Separately usable element (template, style, logic) • @Page – Ionic-specific component • @Directive – Modify behavior of existing component • @Injectable – Inject to constructor, for creating services • @Pipe – similar with filter in Angular1 • … 44/95

D E C O R AT O R E X A M P L E

import {Page, NavController, Platform} from ‘ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { ... }

45/95

D E C O R AT O R E X A M P L E

import {Page, NavController, Platform} from ‘ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { ... }

Decorator for Ionic2 page 46/95

D E C O R AT O R E X A M P L E

import {Page, NavController, Platform} from ‘ionic-angular'; @Page({ templateUrl: 'build/pages/movies/movies.html' }) export class MoviesPage { ... }

Object with metadata, contains template URL for specific page Decorator for Ionic2 page 47/95

DIRECTIVES Modify behavior of existing component

48/95

DIRECTIVES Modify behavior of existing component

Array/Object iterator, the same as ng-repeat from Angular1 49/95

DIRECTIVES Modify behavior of existing component

Remember #?

Array/Object iterator, the same as ng-repeat from Angular1 50/95

DIRECTIVES Modify behavior of existing component * Syntactic sugar for