Now it's time to look into the popular AngularJS framework (AngularJS version 1.4.3) and how it binds together with Ionic framework (Ionic version 1.2.4). This chapter shows how to leverege the Angular features easily using Appery.io service. You can import the service with the Appery.io trial mode for free.
In the previous chapter we used JQuery to print the UI elements and hashtag messages on the screen, now we use Angular directives to create components on the screen. AngularJS binds also the UI components to the scope model.
This fun little chat application demonstrates also how to use emojis as hashtags. Hope you have a good time in trying out the application.
In Appery.io you can create a fresh new application or create an application from a backup that is included in the end of this chapter. The following will show you how to create a new application.
Image in Appery IDE, Create a new Ionic application using Angular.
Then go to the Appery API Express and create the hashtag messaging API services. You can either import the services or create new services as described in the previous chapter. Note that you have to add limit, offset and convertEmojis URL parameters to the services getFreshMessages and getMessagesByHashtag. These parameters are already added in the API backup file in the end of this chapter.
When you have the API Express services created you can import the api.weall.com services in Appery IDE with Create new / API Express Service. Select all API services.
Image in Appery IDE, Import Hashtag messaging API services.
In Appery IDE create a new Model in Project / Model page. Add a model named messageList and add the following parameters to it. The messageList model is the same model as the response message from the getFreshMessages service, except the messageWordList parameter is not in the actual API response message. We generate the content to this field after the messages have been fetched.
Image in Appery IDE, model for the messageList.
Then create the services as Angular scope functions in the main screen. First let's create a service to fetch the fresh messages from the API service. In Appery IDE select the screen and the Scope tab. Write the function name getFreshMessages and select the Scope function type and click add.
Image in Appery IDE, add angular scope function.
Then select Invoke service from the dropdown list and Appery will generate a template for your function. Write the callable function name to the ”service_name” position eg. hashtag_messaging_messaging_messages_get And Click on the ”Click to edit mapping” button after the function(success) to open up the Appery Mapping editor.
Image in Appery IDE, new angular function template in Appery.
Draw the elements from the API response in left to the Angular model in the right.
Image in Appery IDE, angular function response mapping.
After that we need a special function call to extract the message's words into a list. This is done by adding manually a line to the generated code as below. Add the following line as in image.
_.set(messageList_scope, '[' + i + '].messageWordList',splitMessageToWords(success.data.BODY[i].message));
We also need to clear the array of old messages before refresh, so modify the generated code with (see below in image)
var messageList_scope = ;
Image in Appery IDE, modified response mapping for the getFreshMessages function. The blue-marked line is the modified code, manually added after drawing mappings in editor.
Create also a new function getMessagesByHashtag with parameters selectedHashtag and type Scope function. Do the identical configurations as before, only difference is to add the requestData parameter from the incoming parameter selectedHashtag as below in image.
Image in Appery IDE, mapping code for the getMessagesByHashtag function.
To add a new message create a new function addNewMessage with parameter newMessageText and type Scope function. Add the following requestData mapping code manually to the editor.
Image in Appery IDE, mapping code for the addNewMessage function.
Create a new function splitMessageToWords with parameter message and type Function. Write the following code to the function. This function will check each word and sets a boolean if the word is a hashtag.
Image in Appery IDE, function to split the message into words and return the array.
Create a new function called replaceNonHashtagChars with parameter hashtag and type Scope function. Write the following code to the function. This function replaces dashes and other non-hashtag characters from the hashtag and returns it.
Image in Appery IDE, function to clean up the hashtag.
Create also a new function to validate the hashtag function name validateHashtag parameter hashtag type Scope function. Add the following code to validate the hashtag.
Image in Appery IDE, function to validate the hashtag.
Now we have all the scope functions ready. Then we need one Angular directive and filter to handle the hashtags. The directive takes the word as input end prints the UI element on the screen according if the word is a normal word or a hahstag. The filter checks if the element is a hashtag and adds the UI class variables to the element accordingly.
In Angular directives are reusable components. Angular creates a new scope for the directive that has a restricted visibility. Each directive works inside it's own scope. You can access the directive's parent scope with the following syntax. This calls the API service to refresh the messages according to the hashtag parameter.
Image in Appery IDE, create new directive.
Add the following code to the directive. The directive uses a template that has a span element. The element's class is selected using the hashtagClassFilter. The template uses ng-repeat to print all the words in the messageWordList to the screen and ng-click is used to call the service to fetch the messages according to that hashtag text.
Image in Appery IDE, directive code to print the button element to the hashtag.
Create new filter with create new / JavaScirpt / Angular filter. Add the following code to the filter. This returns different class attributes according if the input boolean is a hashtag or not. This adds the css style name attributes to the span element that the angular directive prints out.
Image in Appery IDE, filter code to select the element css variable according if the element is a hastag or not.
Then it's time to update the screen and add the user interface elements to it.
The screen has 3 grids. 1st grid has the application label and a refresh button. The second grid has the new message input box and add new message button. The third grid has a label to print the message.
The following angular attributes are added to the elements.
In the third grid the grid itself has the ng-repeat for each different message in messageList. The messages words are then repeated inside the weall-update-hashtags directive. The directive prints out the span elements for each word.
Image in Appery IDE, the application main screen.
As a bonus there is one new parameter to the addMessage API interface that's called convertEmojis and it can be set to true or false. If it's set to true words are converted to an emojis according to their text.
You can download the Angular application resources here.
Test live Emoji chat application with web or mobile browser here
Download Emoji chat Appery.io Project backup and Import the project
Download Emoji chat Appery.io API Express project backup and Import it as API Express project
Download Emoji chat Android APK to your mobile phone and install (Requires only Internet access)
Download Emoji chat web application Source code, you can install this application inside web server or launch it by opening the index.html file in your browser.
Download Emoji chat Android Studio project application to view the source code in Android studio