Ionic2 the the journey continues

#ionic2 #ng-sydney 02-03-16 and #ionicaustralia 23-03-16

Transcript

1. IONIC 2 - THE JOURNEY CONTINUES..
2. ruby developer sameera (sam)
3. REINTERACTIVE
4. WHAT IS A HYBRID MOBILE APP? Mobile apps build with web technologies like HTML, CSS, and JavaScript
5. WHAT IS A IONIC Hybrid mobile framework build on top of AngularJS http://ionicframework.com/
6. WHY IONIC 2 ?
7. 2.0.0-BETA.1 OK, LETS START... disclaimer https://github.com/driftyco/ionic/tree/2.0
8. n p m i n s t a l l - g i o n i c @ b e t a i o n i c s t a r t d e m o P r o j e c t b l a n k - - v 2 - - t s CREATING A NEW PROJECT
9. i o n i c g e n e r a t e p a g e s e a r c h i o n i c g e n e r a t e - - l i s t GENERATORS
10. support native look and feel LOOK & FEEL app.variables.scss app.core.scss app.ios.scss / app.md.scss home.scss
11. i o n i c s e r v e - l HOW TO CHECK
12. # i o n i c 1 v a r a p p = a n g u l a r . m o d u l e ( ' i o n i c A p p ' , [ ' i o n i c ' ] ) a p p . c o n f i g ( f u n c t i o n ( $ s t a t e P r o v i d e r , $ u r l R o u t e r P r o v i d e r ) { $ u r l R o u t e r P r o v i d e r . o t h e r w i s e ( ' / ' ) $ s t a t e P r o v i d e r . s t a t e ( ' h o m e ' , { u r l : ' / ' , t e m p l a t e : ' < p > H e l l o , w o r l d ! < / p > ' } ) } ) ROUTING no more $urlRouterProvider no more urls
13. # i o n i c 2 e x p o r t c l a s s S t a r t P a g e { c o n s t r u c t o r ( n a v : N a v C o n t r o l l e r ) { t h i s . n a v = n a v ; } g o B a c k ( ) { t h i s . n a v . p o p ( ) ; } g o T o O t h e r P a g e ( ) { / / p u s h a n o t h e r p a g e o n t o t h e h i s t o r y s t a c k / / c a u s i n g t h e n a v c o n t r o l l e r t o a n i m a t e t h e n e w p a g e i n t h i s . n a v . p u s h ( O t h e r P a g e ) ; } ROUTING WITH IONIC2 Using NavController uses basic push() and pop()
14. No more ACCESSING NATIVE API ngcordova.com plugins will support as a first class citizen in ionic2
15. ..so it will be like.. # h t t p s : / / g i t h u b . c o m / m a r c u s a s p l u n d / i o n i c 2 - c a m e r a - d e m o / b l o b / m a s t e r / a p p / p a g e s / t a k e P h o t o ( ) { t h i s . p l a t f o r m . r e a d y ( ) . t h e n ( ( ) = > { l e t o p t i o n s = { q u a l i t y : 8 0 , d e s t i n a t i o n T y p e : C a m e r a . D e s t i n a t i o n T y p e . D A T A _ U R L , s o u r c e T y p e : C a m e r a . P i c t u r e S o u r c e T y p e . C A M E R A , a l l o w E d i t : f a l s e , e n c o d i n g T y p e : C a m e r a . E n c o d i n g T y p e . J P E G , s a v e T o P h o t o A l b u m : f a l s e } ; / / h t t p s : / / g i t h u b . c o m / a p a c h e / c o r d o v a - p l u g i n - c a m e r a # m o d u l e _ c a m e r a . g e t P i c n a v i g a t o r . c a m e r a . g e t P i c t u r e ( ( d a t a ) = > { l e t i m a g e d a t a = " d a t a : i m a g e / j p e g ; b a s e 6 4 , " + d a t a ; t h i s . _ z o n e . r u n ( ( ) = > t h i s . i m a g e s . u n s h i f t ( {
16. but.. for now.. (ionic 2 beta.1) # h t t p s : / / b l o g . n r a b o y . c o m / 2 0 1 6 / 0 1 / s h o w - n a t i v e - t o a s t - n o t i f i c a t i o n s - i n - a n - i o n i c - i m p o r t { P a g e , P l a t f o r m } f r o m ' i o n i c / i o n i c ' ; @ P a g e ( { t e m p l a t e U r l : ' b u i l d / p a g e s / h o m e / h o m e . h t m l ' , } ) e x p o r t c l a s s H o m e P a g e { c o n s t r u c t o r ( p l a t f o r m : P l a t f o r m ) { t h i s . p l a t f o r m = p l a t f o r m ; } s h o w T o a s t ( m e s s a g e , p o s i t i o n ) { t h i s . p l a t f o r m . r e a d y ( ) . t h e n ( ( ) = > { w i n d o w . p l u g i n s . t o a s t . s h o w ( m e s s a g e , " s h o r t " , p o s i t i o n ) ; } ) ;
17. WHERE TO GET HELP 40+ Ionic Framework 2 Resources (http://mcgivery.com/15- ionic-framework-2-resources/) http://ionicframework.com/docs/v2/ https://forum.ionicframework.com http://www.joshmorony.com/ https://blog.nraboy.com http://gonehybrid.com/ https://www.packtpub.com *
18. THANK YOU QUESTIONS ?