Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Adding a Popup to Your Appery.io Ionic App

DZone's Guide to

Adding a Popup to Your Appery.io Ionic App

If you use Appery.io to create your Ionic app, learn how to create a popup for your iOS or Mobile app.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,ios ,android ,appery ,ionic

Published at DZone with permission of Max Katz, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}