New and Improved Ionic 2 Sample Application

Earlier this year, I shared a real estate sample application built with the first beta of Ionic 2. Many things have changed in Ionic 2 since then, and it was time for an update. In this post, I’ll share a new and improved version of the app built with the latest release candidate.

Watch the video:

Hosted Version

Click here to run a hosted version of the app in your browser. Use the Google Chrome device emulator or simply resize your browser for a phone-like experience.

Source Code

The source code and installation instructions are available in this repository.

Mock and REST Services

The app comes with two interchangeable implementations of the data services:

  • The Mock services implementation uses in-memory data and are used for prototyping or testing purpose.
  • The REST services implementation uses Angular’s new observable-based http object to access Node.js-based REST services.

Leaflet

You can now see the list of properties on a map. The map view is implemented with Leaflet and provides an example of integrating third party libraries in an Ionic app built with TypeScript.

69 Responses to New and Improved Ionic 2 Sample Application

  1. Antonio Gallo November 3, 2016 at 3:41 pm #

    Thanks for this post! Any reason for using Leaflet instead of G.Map?

    • freeze June 30, 2017 at 3:13 pm #

      a lot

  2. Mike Parsons November 3, 2016 at 6:15 pm #

    Initial load …

    13 Requests
    6.8 Megs
    Finish 16.91 seconds

    Not exactly a progressive Web App

    • FlickrAwards November 4, 2016 at 8:46 am #

      To be fair though the application which is hosted online is not being optimised for production build…

  3. Guy Halperin November 5, 2016 at 2:59 pm #

    awesome post! I can’t seem to get leaflet to work correctly.. I tried npm install leaflet but “L” is still not recognized. I also tried adding typings but that didnt work either. Any suggestions?
    Thanks!

  4. manorocks November 9, 2016 at 4:22 am #

    It’s a good post
    http://connectfirms.com

  5. manorocks November 9, 2016 at 4:36 am #

    Cool information provided

  6. shreetmt November 9, 2016 at 4:47 am #

    It’s a cool article
    http://www.shreetmt.com/

  7. Fede Sardo November 9, 2016 at 11:42 pm #

    Thanks a lot, I am trying to run this sample. One question, in app.component.ts what is pages array declared for? Regards

  8. Jay LeCorse November 10, 2016 at 1:08 pm #

    Thank you enormement for this post. Everything works wonderfully, it’s really a great example to start. Can you demonstrate, please,how to add inputs on Json from the application? A Crud system in rest mode? thank you very much

  9. chihab eddine Belil March 27, 2017 at 1:58 pm #

    Than you very much for you effort, One question. about the localisation. what if i want to get it from a database, How can i modify this ?

  10. jai May 29, 2017 at 7:53 am #

    I need to add qty options plus and minus thing ionic 3

  11. Damny January 26, 2018 at 9:54 am #

    Get all latest music Nice post Latest Music Around Nigeria

  12. Ayo Adekola March 12, 2018 at 12:44 pm #

    ,,nice 1 .

  13. CIIT Noida April 19, 2018 at 3:17 am #

    Your Site Is Very Good and The Post is Well On Topic, Thanks for Sharing it with us.

    Hadoop Training Institute in Noida

    Best Hadoop Training in Noida

  14. Dinesh Kumar June 11, 2018 at 8:18 am #

    This is very useful information. I really looking for this kind of post.visit
    mobile
    app development
    for modern ideas and techniques. We are very thankful for this post

  15. calfre1995 August 12, 2018 at 5:32 am #

    hi your blog Article is very nice & thanks for sharing the information.java training

  16. Techrable September 25, 2018 at 10:28 am #

    Zonke Diana L.O.V.E ALBUM

    360musicng.pw

  17. Friday Nathaniel Udofia February 1, 2019 at 11:29 am #

    wow cool application https://www.khodedbaze.com.ng

  18. TargbaBenjamin February 7, 2019 at 2:50 pm #

    Very Informative sir. https://legacytips.com/refer24-com-ng-review-nigerias-no-1-refer-and-earn-platform/

  19. TargbaBenjamin February 7, 2019 at 2:51 pm #

    This is awesome. http://www.legacytips.com

  20. Desirebaze Media February 15, 2019 at 11:46 pm #

    Nice
    DOWNLOAD MP3
    Musics
    Mixtapes
    News
    Videos
    Article
    Sports
    Lifestyle
    Album
    Mp3 Download

  21. Selenay Dilara March 2, 2019 at 1:45 am #

    İzmir spor salonu olarak uzmanlaşmış olduğumuz faaliyet alanlarımız boks kursu | pilates kursu | cimnastik kursu | piyano kursu vb. çeşitli kurslarımıza adreslerimizden ulaşabilirsiniz.

    • Selenay Dilara March 14, 2019 at 9:35 am #

      İzmir’in en gözde ilçelerinde 3 şube ile sizlere hizmet veren İzmir spor salonu merkezimiz sizlere en iyi hizmeti vermeye devam etmektedir.

      • Selenay Dilara April 11, 2019 at 5:26 am #

        İzmir spor salonları olarak White Club spor kompleksi İzmir’de 3 farklı şubesi ile hizmet vermektedir. Klasik bir spor merkezi dışında izlenim sergileyen olan White Club çeşitli kurslar ile İzmir’li spor severleri eğitimler vererek kişisel gelişimlerine yardımcı olmaktadır. Reveşta olan ve fazla tercih edilen kurslarımız arasında dans kurslarımız dikkat çekmektedir bunlardan bir kaçıstreet jazz kursu | oryantal dans kursu | modern dans kursu | tango kursu vb. çeşitli kurslarımıza bağlantılardan ulaşabilir ve daha detaylı bilgiler alabilirsiniz.

        • Selenay Dilara June 13, 2019 at 4:47 am #

          Dans kursları ile İzmir’de ün sanan White Club Dans Okulu hizmet kapılarını sonuna kadar açmıştır. Street jazza dans kursu, oryantal dans kursu, modern dans kursu, tango kursu, bale kursu (küçük yaş grubu olabilir), cimnastik kursu vb. gibi kurslarımız hakkında iletişim adreslerimizden bilgi alabilirsiniz. İzmir dans kursu hakkında detaylı bilgilendirmeleri linkten görebilirsiniz. https://whiteclub.net/kurslarimiz/izmir-dans-kursu/

  22. Cakiroglu Nakliyat March 2, 2019 at 1:59 am #

    Çakıroğlu Nakliyat, Asansörlü nakliyat | Ofis taşımacılığı | Piyano taşımacılığı | Buca evden eve nakliyat | Buca evden eve nakliyat | İzmir aşya depolama vb. hizmetleri en kaliteli ve profesyonel şekilde müşterilerine sunmaktadır.

  23. Asif Bhat March 3, 2019 at 2:26 am #

    this us awesome app to learn lots of things. Unfortunately i tried to run it but i got error with “ionic-app-scripts “. I have a higher version of node on my machine. I would appreciate if you could share any fix for this issue.

    Thanks,
    Asif

  24. Serpil ÇİÇEKÇİ March 14, 2019 at 9:37 am #

    Мармарис морская прогулка как наши услуги, ЭКСКУРСИЯ В ЭФЕС | ЭКСКУРСИЯ В ДАЛЬЯН НА ЯХТЕ | ЭКСКУРСИЯ НА ЛЕГЕНДАРНЫЙ ОСТРОВ КЛЕОПАТРЫ | экскурсия памуккале Пожалуйста, свяжитесь с нами для будущего и больше преимуществ.

  25. Serpil ÇİÇEKÇİ March 14, 2019 at 9:38 am #

    Marmaris tekne turu olarak hizmetlerimiz, marmaris efes turu | Dalyan tekne turu | kleopatra plajı | marmaris pamukkale turu gibi ve daha fazla avantajlardan yararlanmak için bizimle iletişime geçin.

    • Serpil ÇİÇEKÇİ April 4, 2019 at 11:15 am #

      Marmaris tekne turu firmamız, yaz aylarında yoğun talep görmektedir. Marmaris tekne turu firması olarak kaliteli hizmet anlayışı ile hizmet vermekteyiz. Bizim için değerli olan müşterilerimiz için sunduğumuz özel gezi paketleri bulunur..

  26. Pinar Guler April 25, 2019 at 4:34 am #

    Nişan organizasyonu istanbul olarak unutulmaz anlarınızda sizlere eşlik ediyoruz. Nişan masası konseptleri ile Nişan masası kiralama istanbul ile nişan masası hazırlama hizmetleri vermekteyiz.

  27. Ceosuite October 24, 2019 at 3:07 am #

    Nice post

  28. Iroid Technologies October 29, 2019 at 1:11 am #

    Thanks for the post….

  29. David January 24, 2020 at 8:04 pm #

    Thank you for the information

    JustOfofo

    Viral portal

    Entertainment News

    Health and Business Tips

    Latest Celebrity News

    Latest Music

  30. ab March 8, 2020 at 8:04 pm #

    Petroyasan CO Is A 30 Year Old Company And One Of Top Iranian Used Oil Recycling Plant Manufacturers , Oil Distillation Plant , Grease , Solvement 402 , Sulfurization ,Waste Engine Oil Distillation Plant

  31. Mahraja Express March 13, 2020 at 4:33 am #

    Awesome information with wonderful images. The information you have covered satisfy the necessities of each traveler. Thanks for sharing. India Tours

  32. Peter Harper April 30, 2020 at 5:28 am #

    Wonderful guide on application with a great example. But I think you can find some of the best mobile app development companies India who can do it for an affordable rate without compromising on quality.

  33. freelicense key August 13, 2020 at 1:32 pm #

    this us awesome app to learn lots of things. Unfortunately i tried to run it but i got error with “ionic-app-scripts “. I have a higher version of node on my machine. I would appreciate if you could share any fix for this issue.

    thanks
    avast driver updater key 2019

  34. yuvaraj singh August 14, 2020 at 3:04 am #

    Advanced Scrum Master training
    Advanced Certified Scrum Master (A-CSM) is one of the top most certificates in the IT industry. It’s a certificate program awarded to Certified Scrum Master from Scrum Alliance
    We need to understand the responsibilities of these roles to understand who is responsible for quality.

  35. Miguel August 27, 2020 at 7:40 am #

    Awesome!

    Check my blog

  36. yuvaraj singh September 4, 2020 at 1:50 am #

    Informative content,Great work
    To crack scrum master interview : Scrum Master Interview Questions

  37. yuvaraj singh September 7, 2020 at 6:47 am #

    Thanks for sharing
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    CSM online

  38. yuvaraj singh September 9, 2020 at 3:17 am #

    Very good content,thanks for sharing
    Leanpitch provides online training in Advanced Scrum Master during this lockdown period everyone can use it wisely.
    Advanced Scrum Master Training Online

  39. Mahraja Express October 12, 2020 at 7:14 am #

    Wow! wonderful Post Thanks for share with us. Thanks so much. Luxury Train Tours

  40. Varsha November 20, 2020 at 6:34 am #

    I really liked your blog.. Thank you for sharing it with us… Best mobile application development Kochi

  41. yuvaraj singh November 23, 2020 at 4:36 am #

    Great content ,
    To crack scrum master interview : Scrum Master Interview Questions

  42. Caroline Ann Maria November 23, 2020 at 9:31 am #

    Good content.. I really like it.
    Zoople Technologies provide the best digital marketing course in Kochi.

  43. Jason White December 8, 2020 at 8:03 am #

    Great article. Thanks for sharing. Will really help mobile app developers

  44. yuvaraj singh December 22, 2020 at 2:33 am #

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching

  45. yuvaraj singh January 8, 2021 at 12:53 am #

    Thanks for sharing this informative content.,
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days CSM Certification Workshop in different cities.

    CSM certification online

    CSM online

    CSM online certification

    Scrum master certification online

    CSM online training

  46. Variable Sets January 12, 2021 at 1:43 am #

    Hi, great article thanks for sharing an informative post. The points you tell about Ionic 2 is great. I appreciate your work and experience. I will recommend this interior to others, more people get opportunities. Thank you!

  47. yuvaraj singh February 2, 2021 at 2:30 am #

    Thanks for sharing this.,
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days CSM Certification Workshop in different cities.

    CSM certification online

    CSM online

    CSM online certification

    Scrum master certification online

    CSM online training

  48. Salimzy February 3, 2021 at 10:56 am #

    Thanks for sharing this informative content , nice work.
    My out my Music that i have been preparing for so long

  49. sugnasteels February 10, 2021 at 2:30 am #

    TMT implies Thermo Mechanical Treatment, which is a thermomechanical interaction; These TMT steel bars are for the most part utilized material in development for improved insurance against tremor and another kind of cataclysmic events.
    https://sugnatmt.com/ To guarantee wellbeing for your construction TMT steel bars ought to be impervious to erosion which assists with acquiring a more extended life to your design.

  50. Saket Kumar February 12, 2021 at 6:17 am #

    Nice post. Thanks for sharing the content

  51. Digital Notebook February 13, 2021 at 3:00 am #

    what is the differnce between static snf dynmic website
    in the above section, you must have got a fair idea of what these two types of websites are. However, a definition cannot actually contain the magnitude of these two websites. There is a lot more to both static as well as dynamic websites

  52. Ria February 19, 2021 at 3:57 am #

    Great article. Thanks for sharing. Will really help flutter app developers in Florida and the world.

  53. sabkasabkuch March 3, 2021 at 2:03 am #

    Amazing Thing Best Online Shopping Sites Delhi

  54. sabkasabkuch March 15, 2021 at 5:05 am #

    Thank you so much for gracing us with this info Best Online b2b Portal Marketplace

Trackbacks/Pingbacks

  1. Sample Application with Ionic 2 and Salesforce | Christophe Coenraets - December 8, 2016

    […] few weeks ago, I shared a version of the DreamHouse sample application built with the latest release candidate of Ionic 2. The app […]

css.php