Max Katz

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:

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):

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.

   
   

   

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.