Welcome!

APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Blog Feed Post

Learn how Appery.io Simplifies Creating and Working with AngularJS Controllers

We are creating the Appery.io platform to make mobile app development simpler and faster. At the beginning of this year we added support for Ionic and AngularJS. Both frameworks enable to build native-like apps with HTML, JavaScript, and CSS. If you built with AngularJS before, you know that the AngularJS controller is one of the key components in the framework. There is usually one controller behind each page. The controller provides the logic for the page and connects the view (page) with the model.

If you were coding by hand, here is how a very simple controller might look:

angular.module('myApp')
   .controller('MyController', function($scope) {
      // controller logic goes here...
});

When you are building your app in Appery.io, the platform App Builder will automatically create a controller for every page. This way you don’t have to worry about the “plumbing” of the app and can concentrate on the app logic. Plus, it saves time (developers love to save time). Let me show you how this works.

Every page in your AngularJS app has three tabs: Design, Scope, and Bindings:

Screen Shot 2015-10-15 at 3.38.55 PM

AngularJS page

You will find the controller in the Scope view:

Screen Shot 2015-10-15 at 3.43.40 PM

Angular Scope editor

The controller consists of two main parts: the scope variables on the left side, and scope functions on the right side. You can also display only the scope variables or only the functions by selecting the tabs at the top. Also, you can change the positioning of the editors by clicking the buttons in the upper right corner. For example, positioning the scope variables at the top:

Screen Shot 2015-10-15 at 3.48.37 PM

Scope editor in vertical view

When you create a new page, you automatically get a scope editor where you can define variables and functions.

The Bindings editor visually displays the binding between the page and scope and looks like this:

Screen Shot 2015-10-15 at 3.51.25 PM

Bindings editor


Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.