Over a million developers have joined DZone.

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

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}