Introduction

Appery.io provides visual representation of scope in AngularJS. By going to SCOPE tab you can add new variables and functions. You can also manage their types.

Scope

There is three sub tabs under SCOPE tab: Variables, Split and Functions.

Variables

Variables tab allows to create new scope variables and define their types. Type can be primitive or based on the created Model (Project > Model)

Read more about Model

Accessing index variables

You can access index variable on different pages in the app. For example, if you have defined a variable on index page selectedSpoolTag to read/write scope variable from the page use $parent.$parent structure with code below:

Functions

In a newly created app, the init function is created by default (Type = Scope function).

To add a new function, specify its name and type by selecting from the dropdown:

To specify the function parameters, use Arguments column. Separate them with a comma to provide multiple arguments.

Function types

There are three function types to select from:

• Scope function – is a simple scope method.
• Self executing functions are the ones which are invoked automatically as soon as they are defined. They are anonymous and are more useful when used with initialization logic.
• Function are functions that are not bound to the controller scope, but exist only inside the controller function.

Dependency injection

As Appery.io doesn’t provide access to the controller to its users, the Dependecy Injection option is implemented with the function Apperyio.get("dependency").

In the Appery.io builder, there are only two objects injected into the controller by default: $scope and Apperyio.

The flow is like the follows: in case you need to inject, for example, $timeout into the controller, use the following syntax:

Read more on Dependency Injection here.

Scope variables in Ionic

In Ionic pages with content, if a user binds the variables with the UI components working via ng-model, the two-way data-binding won’t work properly in the screens SCOPE. It is due to the fact, that the screen Content has its own child scope.

So, when defining the screen UI components mentioned above, be sure to pass the scope values through object.

e.g:

If you want to bind name variable with some component:

1. Under Project > Model, create a model User (Type = Object) with a nesting name (Type = String) parameter.
2. Switch to SCOPE and add a variable user with Type = User.
3. Lastly, in DESIGN view, define the needed UI component with the ng-model = user.name.

As a result, now user.name is correctly binded.

To learn more about child scope, please check this link.

Code snippets

A snippet is a small section of reusable code that is inserted on an appropriate button click. To make using them easier, most snippets have placeholders where you can input data to adjust them. These places are highlighted with a gray background. When the snippet is first added the cursor will automatically move to the first placeholder. Press Tab to move between snippet placeholders.

Invoke service

With this snippet you can add an Appery.io service invocation to the function.

• service_name – service name to execute. You can also use Ctrl + Space for autocomplete.

Navigate to page

With this snippet, navigation to any page can be added to the scope function. Pages must have appropriate routes.

• routeName – route name to navigate.

Invoke scope refresh

This snippet is used to execute an expression in AngularJS from outside of the AngularJS framework (for example, from browser DOM events, setTimeout, XHR or third party libraries).

Open modal page

This snippet is used to adjust, open, and work with a modal. The snippets are different for Ionic and Bootstrap projects.

Bootstrap

Ionic

Read more information about Ionic modal here.

Init push handler

This snippet allows you to subscribe to a push notification init event.

Push notification handler

This snippet allows you to subscribe to a push notification event.

Invoke REST API ($http)

The Invoke REST API ($http) is a wrapper for $http. All REST services created within the builder use this feature to create AJAX requests. Invoke the returned function without arguments to receive an object that creates AJAX requests.

The snippet has the following code:

• options:
  Basic settings are the same as standard settings for the AngularJS $http service.
  • url (String) – Absolute or relative URL of the resource that is being requested.
  • method (String) – HTTP method (e.g. GET, POST, etc)
  • headers (Object) – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent.
  • params (String or Object that contain Strings) – Map of strings or objects which will be turned to ?key1=value1&key2=value2 after the URL. If the value is not a string, it will be converted to JSON.
  • data (String or Object) – Data to be sent as the request message data.
    The following additional settings are available:
  • echo (String) – If echo mode is on (property exists), then the service will return an echo value instead of the REST response.
  • aio_config (Object that contains Strings) – Appery.io configuration object:
    • requestType (String) – Request type (xml, x-www-form-urlencoded)
    • responseType (String) – Response type (xml, json, jsonp)

Additional service settings may be needed for conversion from XML to JSON, objects to form data, etc.

The echo property allows you to emulate a service invocation without running the code.

If this parameter exists in the settings dictionary the request doesn’t run.

This property must be deleted from the settings dictionary before publishing the app.

The function setDefaults( default_options ) sets default service settings and returns a service instance that can be saved in a variable to use many times.

The function execute( /*options_for_current_request*/ ) can receive a dictionary with settings that can override default settings (described in setDefaults), but only for this request. Invoking a function without parameters will run a request with default settings. A Promise object will be returned.

This service has a name REST, so it isn’t a template for some different name.

Shortcuts

Shortcuts are used to quickly add an expression to your functions. To use shortcuts, type appropriate characters and press Ctrl+Space (Cmd+Space) for autocomplete. Shortcuts will be immediately changed to the corresponding code.

• $Cg to get a variable from config.
  
  1	Apperyio.Config.get( expression/*, default*/ );

• $Ca to add a variable to config.
  
  1	Apperyio.Config.add( expression, value );

• $u to generate a route URL. Use the options parameter to pass route settings.
  
  1	Apperyio.url( route_name /*, options*/ );

  If route_one in application routing is equal to http://somedomain.com/route/path/:id/:value/done/ then:
  
  1	Apperyio.url( 'route_one', {id: 10, value: 4} );

  Will return http://somedomain.com/route/path/10/4/done/
• $Entity to reproduce the specified model structure in the object or part of the object.
  
  1	Apperyio.EntityAPI( model /*, defaults*/ );

• $get to get an AngularJS service or other AngularJS service used in the application.
  
  1	Apperyio.get( service_name );

• $q to get a deferred object via the $q service.
  
  1	var deferred = Apperyio.get( '$q' ).defer();

• $parse to convert an AngularJS expression into a function.
  
  1	var getter = Apperyio.get( '$parse' )( 'expression' );

• $routeParams to get route parameters.
  
  1	var $routeParams = Apperyio.get( "$routeParams" );

More help resources

More help resources are links to the blog, our YouTube channel and other web sites.

• Understanding How to Work with AngularJS Scope Variables