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:
1 |
$scope.$parent.$parent.selectedSpoolTag = SpoolNumber; |
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:
1 |
var $timeout = Apperyio.get("$timeout") |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var requestData = {}; // onbeforesend mapping button allows to bind scope variable to service request data Apperyio.get("service_name")(requestData).then( function(success){ // onsuccess mapping button allows to bind service response data to scope variable in a case of successful result }, function(error){ // In the case of error, result may be handled with custom code here }, function(notify){ // In the case of service notification. }); |
- service_name – service name to execute. You can also use
Ctrl + Space
for autocomplete.
With this snippet, navigation to any page can be added to the scope function. Pages must have appropriate routes.
1 |
Apperyio.navigateTo("routeName", {}); |
- 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).
1 |
$scope.$apply(); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$scope.type = newType; Apperyio.get('Modals').loadModal(modal_name).then( function(modal){ modal.scope.current_item = { // Set input object for send to modal window // Value: $ope.itemFromModal }; modal.scope.modalInstance = modal.open({ // Optional settings: size: '', /* 'lg' | 'sm' */ backdrop: true, /* true | false | 'static' */ keyboard: true, /* true | false */ backdropClass: '', /* backdropClass name */ windowClass: '', /* additional CSS class(es) to be added to a modal window template */ windowTemplateUrl: '' /* a path to a template overriding modal's window template */ }); modal.scope.modalInstance.result.then( function(current_item){ // Custom implementation with modal response with current_item }, function(error){ console.log(error); } ); }); |
Ionic
Read more information about Ionic modal here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var modalOptions = { // About Ionic Modal: https://devcenter2.appery.io/documentation/angularjs/screens/#Modal_screen animation: 'slide-in-up', // The animation to show & hide with focusFirstInput: false, // Whether to autofocus the first input of the modal when shown backdropClickToClose: true, // Whether to close the modal on clicking the backdrop hardwareBackButtonClose: true // Whether the modal can be closed using the hardware back button on Android and similar devices }; Apperyio.get('Modals').loadModal(modal_name).then( function(modalInstance) { modalInstance.open(modalOptions).then(function(modal) { modal.scope.modal = modal; modal.show(); }); }, function(error){ console.log(error); }); |
Init push handler
This snippet allows you to subscribe to a push notification init
event.
1 2 |
document.addEventListener("pushinit", function() { }); |
Push notification handler
This snippet allows you to subscribe to a push notification event.
1 2 |
document.addEventListener("push-notification", function() { }); |
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:
1 2 3 4 5 6 7 8 9 |
Apperyio.get("REST")() .setDefaults( options ) .execute( options ).then( function(success){ }, function(error){ }, function(notify){ }); |
- 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
orObject
that containStrings
) – 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
orObject
) – 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 containsStrings
) – Appery.io configuration object:- requestType (String) – Request type (
xml
,x-www-form-urlencoded
) - responseType (String) – Response type (
xml
,json
,jsonp
)
- requestType (String) – Request type (
- url (
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.
1Apperyio.Config.get( expression/*, default*/ ); - $Ca to add a variable to config.
1Apperyio.Config.add( expression, value ); - $u to generate a route URL. Use the
options
parameter to pass route settings.
1Apperyio.url( route_name /*, options*/ );route_one
in application routing is equal tohttp://somedomain.com/route/path/:id/:value/done/
then:
1Apperyio.url( 'route_one', {id: 10, value: 4} );http://somedomain.com/route/path/10/4/done/
- $Entity to reproduce the specified model structure in the object or part of the object.
1Apperyio.EntityAPI( model /*, defaults*/ ); - $get to get an AngularJS service or other AngularJS service used in the application.
1Apperyio.get( service_name ); - $q to get a deferred object via the $q service.
1var deferred = Apperyio.get( '$q' ).defer(); - $parse to convert an AngularJS expression into a function.
1var getter = Apperyio.get( '$parse' )( 'expression' ); - $routeParams to get route parameters.
1var $routeParams = Apperyio.get( "$routeParams" );
More help resources
More help resources are links to the blog, our YouTube channel and other web sites.