Javantura v4 - Angular2 - Ionic2 - from birth to stable versions - Hrvoje Pek, Domagoj Pučar,...
-
Upload
hujak-hrvatska-udruga-java-korisnika-croatian-java-user-association -
Category
Technology
-
view
107 -
download
0
Transcript of Javantura v4 - Angular2 - Ionic2 - from birth to stable versions - Hrvoje Pek, Domagoj Pučar,...
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!