APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Blog Feed Post

How to Add a Nice Popup to Your Appery.io Ionic App

Using browser’s alert() is quick way to test something but it doesn’t create good user experience. This is how the standard browser alert looks:

Screen Shot 2015-10-13 at 1.06.15 PM

Standard browser alert

This doesn’t look very nice. Plus, there is always the “The page at <site> says:”. There is a better option and that’s using the nice looking Ionic Popup. Here is how it looks (much better):

Screen Shot 2015-10-13 at 1.10.21 PM

Ionic popup

This popup can be customized via CSS – that’s nice!

I’m going to show you how to add this popup to your Ionic app.

  1. Open an existing app or create a new Ionic app.
  2. Open the page where you want to add a popup and switch to Scope view.
    • The Scope view is the automatically created Angular controller for this page. This means you don’t need to create a controller, the App Builder already created one for you.
  3. Create a scope function called showPopup and click Add to add the function.
  4. Enter the following code:
    // inject Ionic popup
    var $ionicPopup = Apperyio.get("$ionicPopup");
    var alertPopup = $ionicPopup.alert({
       title: 'Really?',
       template: "My dog ate my HW."
    alertPopup.then(function(res) {
       console.log("OK.. popup closed. Good.");
    • Line 2: the Ionic Popup is injected into the function
    • Line 3: you set the content to display in the popup
    • Line 7: optionally, you can do something when the popup closes
  5. One more thing to do and that’s to invoke the function. Go back to Design view.
  6. Select the button and in Properties view for ng-click, click Ctrl-space to activate code assist. Then select the function from the list. You don’t even need to type the name, just select it from the list. This is very helpful as it reduces errors.

    Screen Shot 2015-10-13 at 1.30.44 PM

    Angular code assist

  7. You are done. Now click Test in the tool bar to test the popup.

If you love Ionic and would like to super charge your development with Appery.io, sign up for a developer account today.

Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.