Angular 2and

Ionic 2From birth to stable version

Hrvoje Pek, Domagoj Pučar, Stjepan Ložnjak

• S2 Information Systems

• Java, web-based and mobile solutions

• Outsourcing, project rescue

S2 Information Systems

• What is OPG Direkt

• What’s new in Angular 2

• What is Ionic?

• History preview

• Ionic 2.0 final examples

• Conculsion

Agenda

• Food delivery system

• Spring Boot as backend

• Mobile applications in Ionic 2

• Web applications in Angular 2

OPG Direkt

Power of Angular

You rock AngularJS?

• Typescript

• Component based

• Dependency injection

• Annotations, Classes, Interfaces

• Form Builder

• Testing

• ES6 clases

• Observables

• Routing

• Templating

• More modern and capable code

Here comes…..Angular 2

Angular 2

• 2.0.0-beta (January 2016.)

• rc.0 version (May 2016.)

• 30. June 2016. – 2.0.0-rc.4

• 14. September 2016. 2.0.0 release

Angular CLI – Example 1

Before:

• https://angular.io/ starter project

• WebPack + Angular 2 solutions

After:

• Angular CLI

• Generating project (ng new PROJECT_NAME), serving (ng serve)

• Build project, test project, making components, directives, pipes, class etc.

@NgModule – Example 2

Before:

• Declaring needed providers and directives in every single component

@NgModule – Example 2

After (from rc.5):

• Declaring all providers, imports and directives in app.module.ts

New Router Module – Example 3

• app.routes.ts

*ngFor and import change – Example 4

Before:

After:

Angular 2 – Version change

Dont do that in your package.json file!!!

Angular CLI from SystemJS to WebPack

• Update your Angular CLI

• Make new project

• Copy – paste code

IONIC

What is Ionic?

HTML CSS JavaScript

Cordovaplugins

History

IONIC 1• 2013 - Drifty Co.

• 1.0 Alpha, November 2013

• 1.0 Beta, March 2014

• 1.0 Final, May 2015

IONIC 2• 2.0 Alpha, October 2015

• 2.0 Beta - Beta 11• Feb - Aug 2016

• 2.0 RC 0 - 2.0 RC 6• Sep 2016 - Jan 2017

• 2.0 Final - January 25, 2017

Login screen – Examle 1

Login screen – Code

Product details – Example 2

Product details – Code

Product details – Code

• Angular 2• Complexity

• DOM Shadow

• Ionic 2• Plugin dependency

• New plugins usually full of bugs

• Startup (boot) time of applicatons

Cons

• Open source

• Good support (forums, github etc)

• Fast development of applications

• Graphically good looking (Ionic 2 components / Angular 2 material)

• Native support for Ionic

Pros

Thank You for listening…

… and the last one!