INTRODUCTION TO IONIC 2

Transcription

1 LECTURE 7 INTRODUCTION TO IONIC 2 DANIEL RYS JAN VÁCLAVÍK

2 OVERVIEW Create new Ionic2 application Why Ionic2 Project structure Features 2/95

3 INSTALL IONIC 2 & CREATE NEW APPLICATION $ npm install -g ionic@beta $ ionic start my-first-ionic2-app [tabs sidemenu blank] --v2 [--ts] $ ionic serve 3/95

4 INSTALL IONIC 2 & CREATE NEW APPLICATION Ionic version 2 $ npm install -g ionic@beta $ ionic start my-first-ionic2-app [tabs sidemenu blank] --v2 [--ts] $ ionic serve 4/95

5 INSTALL IONIC 2 & CREATE NEW APPLICATION 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

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

7 /95

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

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

10 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

11 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

12 FAT ARROW FUNCTIONS somefunction(function(response){ console.log(response); ); 12/95

13 FAT ARROW FUNCTIONS Has local context somefunction(function(response){ console.log(response); ); 13/95

14 FAT ARROW FUNCTIONS Has local context somefunction(function(response){ console.log(response); ); somefunction((response) => { console.log(response); ); 14/95

15 FAT ARROW FUNCTIONS Has local context somefunction(function(response){ console.log(response); ); somefunction((response) => { console.log(response); ); Has parent context 15/95

16 PROMISES dosomething().then((response) => { console.log(response); ); For more details see Lecture 5 16/95

17 IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y export var pi = // 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

18 IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y export var pi = // someapp.js import * as math from "lib/math" console.log("2pi = " + math.sum(math.pi, math.pi)) Specify visible functions, vars // otherapp.js import {sum, pi from "lib/math" console.log("2pi = " + sum(pi, pi)) 18/95

19 IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y export var pi = // someapp.js import * as math from "lib/math" console.log("2pi = " + math.sum(math.pi, math.pi)) Specify visible functions, vars // otherapp.js import {sum, pi from "lib/math" console.log("2pi = " + sum(pi, pi)) Can call functions from components 19/95

20 IMPORT & EXPORT COMPONENTS // lib/math.js export function sum (x, y) {return x + y export var pi = // someapp.js import * as math from "lib/math" console.log("2pi = " + math.sum(math.pi, math.pi)) Specify visible functions, vars // otherapp.js import {sum, pi from "lib/math" console.log("2pi = " + sum(pi, pi)) Can call functions from components 20/95

21 IMPORT & EXPORT COMPONENTS IN IONIC2 import {Page from 'ionic-angular'; import {MoviesPage from '../movies/movies'; 21/95

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

23 BLOCK SCOPING for (let i = 0; i < movies.length; i++) { let x = movies[i]; console.log(x); 23/95

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

25 TYPESCRIPT EXAMPLE function add(x : number, y : number) : number { return x + y; add('a', 'b'); 25/95

26 TYPESCRIPT EXAMPLE function add(x : number, y : number) : number { return x + y; add('a', 'b'); // Compiler error 26/95

27 DEPENDENCY INJECTION 27/95

28 DEPENDENCY INJECTION import {Page, NavController, Platform from 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

29 DEPENDENCY INJECTION import {Page, NavController, Platform from 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

30 DEPENDENCY INJECTION import {Page, NavController, Platform from 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

31 BINDING 31/95

32 BINDING <input [value]="name"> 32/95

33 BINDING One-way data binding [] <input [value]="name"> 33/95

34 BINDING One-way data binding [] <input [value]="name"> <button (click)="somefunction($event)"></button> 34/95

35 BINDING One-way data binding [] <input [value]="name"> <button (click)="somefunction($event)"></button> Call function on event () 35/95

36 BINDING One-way data binding [] <input [value]="name"> <button (click)="somefunction($event)"></button> Call function on event () <input [value]="name" (input)="name = $event.target.value"> 36/95

37 BINDING One-way data binding [] <input [value]="name"> <button (click)="somefunction($event)"></button> Call function on event () <input [value]="name" (input)="name = $event.target.value"> <!-- or --> <input [(ngmodel)]="name"> 37/95

38 BINDING One-way data binding [] <input [value]="name"> <button (click)="somefunction($event)"></button> Call function on event () <input [value]="name" (input)="name = $event.target.value"> <!-- or --> <input [(ngmodel)]="name"> Two-way data binding [()] 38/95

39 RENDERING <p>hello my name is {{name and I like {{thing.</p> 39/95

40 RENDERING <p>hello my name is {{name and I like {{thing.</p> The same as in Angular1 40/95

41 CREATE LOCAL VARIABLE <p #myparagraph></p> <button (click)="myparagraph.innerhtml = 'Fill element with something...'"> 41/95

42 CREATE LOCAL VARIABLE # means variable <p #myparagraph></p> <button (click)="myparagraph.innerhtml = 'Fill element with something...'"> 42/95

43 DECORATORS Metadata and info about classes Directly above class definition Starts 43/95

44 DECORATOR Declare class for root component in Separately usable element (template, style, Ionic-specific Modify behavior of existing Inject to constructor, for creating similar with filter in Angular1 44/95

45 DECORATOR EXAMPLE import {Page, NavController, Platform from templateurl: 'build/pages/movies/movies.html' ) export class MoviesPage {... 45/95

46 DECORATOR EXAMPLE import {Page, NavController, Platform from templateurl: 'build/pages/movies/movies.html' ) export class MoviesPage {... Decorator for Ionic2 page 46/95

47 DECORATOR EXAMPLE import {Page, NavController, Platform from templateurl: 'build/pages/movies/movies.html' ) export class MoviesPage {... Object with metadata, contains template URL for specific page Decorator for Ionic2 page 47/95

48 DIRECTIVES Modify behavior of existing component <section *ngif="showsection"></section> <li *ngfor="#item of items"></li> 48/95

49 DIRECTIVES Modify behavior of existing component <section *ngif="showsection"></section> <li *ngfor="#item of items"></li> Array/Object iterator, the same as ng-repeat from Angular1 49/95

50 DIRECTIVES Modify behavior of existing component <section *ngif="showsection"></section> <li *ngfor="#item of items"></li> Remember #? Array/Object iterator, the same as ng-repeat from Angular1 50/95

51 DIRECTIVES Modify behavior of existing component * Syntactic sugar for <template> <section *ngif="showsection"></section> <li *ngfor="#item of items"></li> Remember #? Array/Object iterator, the same as ng-repeat from Angular1 51/95

52 TEMPLATE ELEMENT, * <template> rendered when script is running * is embedded template You can work with HTML elements like with <template> 52/95

53 LOOPING <ion-list> <ion-item *ngfor="#movie of movies" (click)="viewmovie(movie)"> <h2>{{movie.title</h2> <p>{{movie.rating / 10</p> </ion-item> </ion-list> 53/95

54 IONIC2 PROJECT STRUCTURE!"" app #!"" app.js #!"" pages # #!"" page1 # # #!"" page1.html # # #!"" page1.js # # # $"" page1.scss # #!"" page2 # #!"" page3 # # $"" tabs # $"" theme #!"" app.core.scss #!"" app.ios.scss #!"" app.md.scss #!"" app.variables.scss # $"" app.wp.scss!"" config.xml!"" gulpfile.js!"" hooks!"" ionic.config.js!"" ionic.config.json!"" node_modules!"" package.json!"" platforms!"" plugins!"" resources $"" www $"" index.html 54/95

55 IONIC2 PROJECT STRUCTURE Do not edit code in WWW directory except index.html! Except resources and index.html, everything in www directory is generated automatically from app directory! 55/95

56 IONIC2 GENERATOR 56/95

57 IONIC2 GENERATOR We don t need to create and include files manually! Use Ionic Generator, you will love it $ ionic g [page component directive pipe provider tabs] some-name 57/95

58 CREATE COMPONENT $ ionic g component my-component app/components/my-component/my-component.js import {Component from 'angular2/core'; import {IONIC_DIRECTIVES from selector: 'my-component', templateurl: 'build/components/my-component/my-component.html', directives: [IONIC_DIRECTIVES] ) export class MyComponent { constructor() { this.text = 'Hello World'; 58/95

59 CREATE COMPONENT $ ionic g component my-component app/components/my-component/my-component.js import {Component from 'angular2/core'; import {IONIC_DIRECTIVES from selector: 'my-component', templateurl: 'build/components/my-component/my-component.html', directives: [IONIC_DIRECTIVES] ) export class MyComponent { constructor() { this.text = 'Hello World'; Decorator for component 59/95

60 CREATE PAGE $ ionic g page my-page app/pages/my-page/my-page.js import {Page, NavController from templateurl: 'build/pages/my-page/my-page.html', ) export class MyPagePage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; 60/95

61 CREATE PAGE $ ionic g page my-page app/pages/my-page/my-page.js import {Page, NavController from templateurl: 'build/pages/my-page/my-page.html', ) export class MyPagePage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; Create bundle with JS + HTML + SASS 61/95

62 CREATE DIRECTIVE $ ionic g directive my-super-directive app/components/my-super-directive/my-super-directive.js import {Directive from selector: '[my-super-directive]' // Attribute selector ) export class MySuperDirective { constructor() { console.log('hello World'); 62/95

63 CREATE PIPE $ ionic g pipe my-old-pipes app/pipes/my-old-pipes.js import {Injectable, Pipe from name: 'my-old-pipes' export class MyOldPipes { transform(value, args) { value = value + ''; // make sure it's a string return value.tolowercase(); 63/95

64 CREATE PROVIDER $ ionic g provider my-provider app/providers/my-provider/my-provider.js import {Injectable from 'angular2/core'; import {Http from 'angular2/http'; import export class MyProvider { static get parameters(){ return [[Http]] constructor(http) { this.http = http; this.data = null; load() { if (this.data) return Promise.resolve(this.data); return new Promise(resolve => { this.http.get('path/to/data.json').map(res => res.json()).subscribe(data => { this.data = data; resolve(this.data); ); ); 64/95

65 CONDITIONALS 65/95

66 CONDITIONALS <div *ngif="someboolean">hello 1</div> 66/95

67 CONDITIONALS <div *ngif="someboolean">hello 1</div> <div [ngswitch]="somevalues"> <p *ngswitchwhen="1">paragraph 1</p> <p *ngswitchwhen="2">paragraph 2</p> <p *ngswitchwhen="3">paragraph 3</p> <p *ngswitchdefault>paragraph</p> </div> 67/95

68 CONDITIONALS <div *ngif="someboolean">hello 1</div> <div [ngswitch]="somevalues"> <p *ngswitchwhen="1">paragraph 1</p> <p *ngswitchwhen="2">paragraph 2</p> <p *ngswitchwhen="3">paragraph 3</p> <p *ngswitchdefault>paragraph</p> </div> <div [hidden]="someboolean">hello 2</div> 68/95

69 CONDITIONALS <div *ngif="someboolean">hello 1</div> <div [ngswitch]="somevalues"> <p *ngswitchwhen="1">paragraph 1</p> <p *ngswitchwhen="2">paragraph 2</p> <p *ngswitchwhen="3">paragraph 3</p> <p *ngswitchdefault>paragraph</p> </div> <div [hidden]="someboolean">hello 2</div> <div [class.my-custom-class]="someboolean">hello 3</div> 69/95

70 NAVIGATION 70/95

71 NAVIGATION Pop and push to history stack push(somepage) add to the top of stack pop() delete last page from the stack 71/95

72 NAVIGATION EXAMPLE 72/95

73 NAVIGATION EXAMPLE app/pages/movies/movies.html <ion-navbar *navbar> <ion-title>movies</ion-title> </ion-navbar> <ion-content padding class="movies"> <button class="positive" (click)="showdetail()"> Go to detail </button> </ion-content> 73/95

74 NAVIGATION EXAMPLE app/pages/movies/movies.html <ion-navbar *navbar> <ion-title>movies</ion-title> </ion-navbar> <ion-content padding class="movies"> <button class="positive" (click)="showdetail()"> Go to detail </button> </ion-content> Call method for showing another page 74/95

75 NAVIGATION EXAMPLE app/pages/movie-detail/movie-detail.html <ion-navbar *navbar> <ion-title>movie-detail</ion-title> </ion-navbar> <ion-content padding class="movie-detail"> <button class="positive" (click)="goback()"> Go back </button> </ion-content> 75/95

76 NAVIGATION EXAMPLE app/pages/movie-detail/movie-detail.html <ion-navbar *navbar> <ion-title>movie-detail</ion-title> </ion-navbar> <ion-content padding class="movie-detail"> <button class="positive" (click)="goback()"> Go back </button> </ion-content> Call method for going back 76/95

77 NAVIGATION GO TO PAGE app/pages/movies/movies.js import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage) 77/95

78 NAVIGATION GO TO PAGE app/pages/movies/movies.js Import import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage) 78/95

79 NAVIGATION GO TO PAGE app/pages/movies/movies.js Import import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; Dependency injection showdetail() { this.nav.push(moviedetailpage) 79/95

80 NAVIGATION GO TO PAGE app/pages/movies/movies.js Import import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; Dependency injection constructor(nav) { this.nav = nav; Save as class variable showdetail() { this.nav.push(moviedetailpage) 80/95

81 NAVIGATION GO TO PAGE app/pages/movies/movies.js Import import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; Dependency injection constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage) Save as class variable Push MovieDetailPage to the stack 81/95

82 NAVIGATION GO TO PAGE app/pages/movies/movies.js Import import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; Dependency injection constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage) Save as class variable Push MovieDetailPage to the stack 82/95

83 NAVIGATION GO BACK app/pages/movie-detail/movie-detail.js import {Page, NavController from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; goback() { this.nav.pop() 83/95

84 NAVIGATION GO BACK app/pages/movie-detail/movie-detail.js import {Page, NavController from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; goback() { this.nav.pop() Pop last page from the stack 84/95

85 NAVIGATION GO TO PAGE WITH PASSING PARAMS import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage, { id: 4 ) 85/95

86 NAVIGATION GO TO PAGE WITH PASSING PARAMS import {Page, NavController from 'ionic-angular'; import {MovieDetailPage from templateurl: 'build/pages/movies/movies.html', ) export class MoviesPage { static get parameters() { return [[NavController]]; constructor(nav) { this.nav = nav; showdetail() { this.nav.push(moviedetailpage, { id: 4 ) Second parameter is an object with params 86/95

87 NAVIGATION GET PARAMS import {Page, NavController, NavParams from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController], [NavParams]]; constructor(nav, params) { this.nav = nav; this.params = params; console.log("id: " + this.params.get("id")); goback() { this.nav.pop(); 87/95

88 NAVIGATION GET PARAMS import {Page, NavController, NavParams from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController], [NavParams]]; constructor(nav, params) { this.nav = nav; this.params = params; console.log("id: " + this.params.get("id")); Import goback() { this.nav.pop(); 88/95

89 NAVIGATION GET PARAMS import {Page, NavController, NavParams from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController], [NavParams]]; constructor(nav, params) { this.nav = nav; this.params = params; console.log("id: " + this.params.get("id")); Import Dependency injection goback() { this.nav.pop(); 89/95

90 NAVIGATION GET PARAMS import {Page, NavController, NavParams from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController], [NavParams]]; constructor(nav, params) { this.nav = nav; this.params = params; console.log("id: " + this.params.get("id")); Import Dependency injection goback() { this.nav.pop(); Save as class variable 90/95

91 NAVIGATION GET PARAMS import {Page, NavController, NavParams from templateurl: 'build/pages/movie-detail/movie-detail.html', ) export class MovieDetailPage { static get parameters() { return [[NavController], [NavParams]]; constructor(nav, params) { this.nav = nav; this.params = params; console.log("id: " + this.params.get("id")); Import Dependency injection goback() { this.nav.pop(); Get ID from params Save as class variable 91/95

92 92/95

93 WORK ON PROJECTS! 93/95

94 QUESTIONS? 94/95

95 JAN DANIEL 95/95