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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s