Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic 2 with Angular 2

3,606 views

Published on

“Introduction to Ionic 2 with Angular 2”. That covered the differences between Ionic 1 and Ionic 2, As Ionic 2 is best compatible with Angular 2 (typescript) so some of the commands and components also discussed in this session.

Published in: Software
  • Login to see the comments

Ionic 2 with Angular 2

  1. 1. Hybrid Mobile Application Development Starting >> Ionic 2 & Angular 2 Hybrid Mobile Application Development Starting >> Ionic 2 & Angular 2 Nikhil Kumar | Software Consultant KnÓldus Software LLP Nikhil Kumar | Software Consultant KnÓldus Software LLP
  2. 2. AgendaAgenda ● What is hybrid mobile application : The Concept ● What is IONIC Framework ● Ionic 1 vs Ionic 2: A Comparison ● Ionic 2 & Angular 2 ● Going Into IONIC world ● Designing in IONIC ● What is Apache Cordova ● Get Into Cordova ● Demo
  3. 3. -Hybrid apps are like anyother app you'll find in your phone. -Hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript... From users view: It doesn't matter if wine tastes well. -The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. -Today, most hybrid mobile applications leverage Apache Cordova. -Hybrid apps are like anyother app you'll find in your phone. -Hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript... From users view: It doesn't matter if wine tastes well. -The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. -Today, most hybrid mobile applications leverage Apache Cordova. The Concept What – Why – Where – coming slides...
  4. 4. Motivation for HybridMotivation for Hybrid Hybrid mobile applications provide a way for developers to re-use their existing skills in web development. WHY Hybrid mobile application development looks appealing to an organization’s. Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? But Reality is???
  5. 5. When should you build a hybrid mobile app? ● Which mobile platforms do you wish to target? ● Do you want to distribute your application via app stores? ● Are you looking to utilize the capabilities of the mobile device? ● What are the technical abilities of your development team? ● Does the one-size-fit-all approach of hybrid really live up to its promise? When should you build a hybrid mobile app? ● Which mobile platforms do you wish to target? ● Do you want to distribute your application via app stores? ● Are you looking to utilize the capabilities of the mobile device? ● What are the technical abilities of your development team? ● Does the one-size-fit-all approach of hybrid really live up to its promise?
  6. 6. Examples of Hybrid ApplicationsExamples of Hybrid Applications Insta untappd yelp FitFyles http://showcase.ionicframework.com/
  7. 7. Drifty: Ben Sperry and Max Lynch- 2012 Ionic: 2013 ­ Developers have created 500,000 apps ­ 15,000 stars on GitHub and has risen to become one of the top 40     most popular projects worldwide, notes Lynch.  Drifty: Ben Sperry and Max Lynch- 2012 Ionic: 2013 ­ Developers have created 500,000 apps ­ 15,000 stars on GitHub and has risen to become one of the top 40     most popular projects worldwide, notes Lynch.  Ionic : A Large scale overview Drifty, a company that has been making it possible for web developers to build  and publish native mobile applications that can then be published to the major  app stores, including Apple’s iTunes, Amazon’s Appstore and Google Play, has  now raised an additional $2.6 million led by Lightbank in Chicago.
  8. 8. Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know how to build or design websites, you will be able to build a real mobile app with Ionic! Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know how to build or design websites, you will be able to build a real mobile app with Ionic! Ionic Framework
  9. 9. Ionic 2 Vs Ionic1Ionic 2 Vs Ionic1 Ionic 2 is currently in beta and is being actively devleoped At a high level, Ionic 2 is very similar conceptually to Ionic 1. In Ionic 1 you have controllers that hold your logic, and templates that define your views. Ionic 2 is the same, except you have classes instead of controllers. There are some differences in the template syntax, and a lot of differences in the class structure. So, let’s jump into some specifics. Here’s 5 reasons why I think Ionic 2 is better than Ionic 1.So, let’s jump into some specifics. Here’s 5 reasons why I think Ionic 2 is better than Ionic 1.
  10. 10. 1- Organisation and Structure1- Organisation and Structure home home.js home.html home.scss about about.js about.html about.scss Of course, you could organise your Ionic 1 projects like this as well, but it wasn’t really the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1. but in Ionic 2 you can’t really do that. 2- Tooling : it's simple but one of my favorate $ ionic generate page MyPage which can also be shortened to: $ ionic g page MyPage ● my-page my-page.js my-page.html my-page.scss
  11. 11. 3- Navigation3- Navigation Navigation in Ionic 2 is very different to Ionic 1. In Ionic 1 navigation was defined using URLs, for example: .config(function($stateProvider, $urlRouterProvider) {.config(function($stateProvider, $urlRouterProvider) { $stateProvider$stateProvider .state('intro', {.state('intro', { url: '/',url: '/', templateUrl: 'templates/intro.html',templateUrl: 'templates/intro.html', controller: 'IntroCtrl'controller: 'IntroCtrl' })}) .state('main', {.state('main', { url: '/main',url: '/main', templateUrl: 'templates/main.html',templateUrl: 'templates/main.html', controller: 'MainCtrl'controller: 'MainCtrl' });}); $urlRouterProvider.otherwise("/");$urlRouterProvider.otherwise("/"); });}); and you would activate these states by linking to them, which is a very “web” approach. In Ionic 2 a more “native” approach is used where pages are “pushed” and “popped”: this.nav.push(MyPage);
  12. 12. 4. It’s Just Javascript4. It’s Just Javascript In Angular 1 and Ionic 1 there was a lot of framework specific terminology and syntax to learn, but with Ionic 2 it’s basically just plain old (or rather new) Javascript. Everything you build is basically just ES6 (or TypeScript if you prefer) code, which isn’t specific to any framework. It’s just Javascript. The benefit of this is that everything you learn when building Ionic 2 application isn’t just going to help you build Ionic 2 applications, it’s also going to help you be a better Javascript developer in general. The skills you develop with Ionic 2 are going to be. able to be applied in a bunch of other places as ES6 eventually becomes the new “normal” Javascript.
  13. 13. 5. Building5. Building In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folders.
  14. 14. Folder StructureFolder Structure If you’re not familiar with Ionic 2, it’s the latest incarnation of Ionic – “the world’s most popular cross-platform mobile development technology.”
  15. 15. Summary of comparisonSummary of comparison Without a doubt, I would recommend everybody switch to Ionic 2 - If you’re completely new to Ionic, start with Ionic 2 - If you’re using Ionic 1 for existing projects, stick with Ionic 1 and upgrade it later - If you’re using Ionic 1 and starting a new project, use Ionic 1 if it is a mission critical or complex application
  16. 16. Ionic-2 Compotnents checkout Ionic-2 Compotnents checkout Going Into Ionic world
  17. 17. Ionic 1Ionic 1 - npm install -g ionic - ionic start myproject - adding platform - adding plugings etc Building for iOSBuilding for iOS -ionic platform add ios Building for AndroidBuilding for Android - ionic platform add android Ionic 1Ionic 1 - npm install -g ionic - ionic start myproject - adding platform - adding plugings etc Building for iOSBuilding for iOS -ionic platform add ios Building for AndroidBuilding for Android - ionic platform add android Quick Start The default templates name are below: ● tabs (Default) ● sidemenu ● maps ● salesforce ● tests ● complex-list ● blank Ionic 2Ionic 2 - npm install -g ionic@beta - ionic start cutePuppyPics –v2 --ts - cd cutePuppyPics - ionic serve Adding platforms is same... Ionic 2Ionic 2 - npm install -g ionic@beta - ionic start cutePuppyPics –v2 --ts - cd cutePuppyPics - ionic serve Adding platforms is same...
  18. 18. IONIC CREATORIONIC CREATORIONIC CREATORIONIC CREATOR Ionic Designing Magic & Cloud IONIC APPSIONIC APPS
  19. 19. Today, most hybrid mobile applications leverage Apache Cordova. Ionic builds on top of Cordova Apache Cordova takes care of packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. But if you simply take an existing website and package it as a mobile app the result will look nothing like a native app: users will notice very quickly that the styles and behaviours are pretty different. Today, most hybrid mobile applications leverage Apache Cordova. Ionic builds on top of Cordova Apache Cordova takes care of packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. But if you simply take an existing website and package it as a mobile app the result will look nothing like a native app: users will notice very quickly that the styles and behaviours are pretty different. Apache Cordova
  20. 20. ngCordova comes with over 70 native Cordova plugins that you can easily add to your Angular Cordova apps. Choose the plugin you’d like to use from the menu, which will have information on which plugin you need to install and an example of how to use it in your Angular code. Checkout : The game begins... ngCordova comes with over 70 native Cordova plugins that you can easily add to your Angular Cordova apps. Choose the plugin you’d like to use from the menu, which will have information on which plugin you need to install and an example of how to use it in your Angular code. Checkout : The game begins... Into Cordova
  21. 21. References ● Knoldus Blog [Offcial] ● Telerik Documentation [Official] ● Cordova Documentation [Official] ● Ionic Framework Documentation [Official]
  22. 22. Presenter nikhil@knoldus.com Presenter nikhil@knoldus.com Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Thanks

×