DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Building a Hello World App With Ionic

In this tutorial you are going to build a Hello World app with Ionic in Appery.io

Max Katz user avatar by
Max Katz
·
Jun. 02, 16 · Tutorial
Like (2)
Save
Tweet
Share
5.87K Views

Join the DZone community and get the full member experience.

Join For Free

In this tutorial you are going to build a Hello World app with Ionic in Appery.io. This is how the app is going to look:

Screen Shot 2016-05-27 at 5.04.15 PM

You should finish this tutorial in about 10 minutes.

Appery.io Account

The first step is to sign up for an Appery.io free trial account. If you already have an account then you can skip this step. Appery.io provides a visual App Builder for building apps with Ionic. This means it’s very easy and fast to build Ionic apps.

Creating a New Ionic App

Let’s now create a new Ionic app.

  1. Inside the platform, go to Apps tab (if you are not there already).
  2. Click Create new app.
  3. For app name enter: ionic-hellworld.
  4. Select Ionic AngularJS app and click Create. In a few seconds the App Builder for Ionic will load.

That was easy.

Designing the Page

Now let’s work on the app UI. As this is a Hello World app, the UI will be pretty simple.

  1. First, open the index page.
  2. Click the header, then in Properties change Text property to Hello Ionic.
  3. Now open Screen1.
  4. Select the Card component (from the Palette) and drag and drop it inside the phone area.
  5. Click the header and in Properties change the Text property to Hello World.

That’s all you need to do here for now. You will change the Item text label in a few minutes. Your page should look like this:

Screen Shot 2016-05-28 at 4.48.41 PM

Setting Up Page Scope

Now you are going to set up the scope for the page. This is also going to be very easy.

  1. Switch to Scope tab.
  2. You will now create one variable. At the top of the Scope editor enter a new variable called message and click the Add button. Its type should be String (the default value).
  3. Now open the init function by clicking the Edit button.
  4. Enter the following code:
    $scope.message = "My first Ionic app. That was easy.";
  5. Click the Save button in the toolbar. You can also click Hide to close the function editor.

Good. The next step is to bind this scope variable (message) to the page.

Also, as you put the code inside the init() function, the function will be automatically invoked when the page loads. You don’t have to add any events to invoke this function in this example.

Screen Shot 2016-05-28 at 4.50.57 PM

Setting Up Binding

In order to display the message in the page you need to bind it to the scope variable. Here is how to do it.

  1. Go back to Design tab.
  2. Select the card item area (where it says Item text).
  3. Go to Properties for the Text property set: {{message}}.
    • You can also try using code assist. Type {{}} and place the cursor in the center and click Ctrl-Space to invoke code assist.

You are actually done and ready to test the app.

Screen Shot 2016-05-28 at 4.51.52 PM.png

Testing the App

Testing the app is fast and simple. Simply click the Test button in the toolbar. A new browser will launch with the app that you just built.

Screen Shot 2016-05-28 at 4.53.03 PM.png

Testing the App On the Device

You can also test the app on the device. To test on the device first download and install the Appery.io Tester app for iOS or Android. Then use your Appery.io username/password to sign in. You will see the app you just created. Tap the app and it will be launched on the device as a hybrid mobile app.

What’s Next?

Check out the Appery.io YouTube channel for videos on building hybrid mobile apps with backend services.

mobile app

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • The Role of Data Governance in Data Strategy: Part II
  • Enabling DB Migrations Using Kubernetes Init
  • The Importance of Delegation in Management Teams
  • How and Why You Should Start Automating DevOps

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: