Go back to Read free chapters

How to build Emoji Chat application using AngularJS and Ionic

AngularJS is widely popular framework for building next generation applications. Let's dive deeper into the world of AngularJS.

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.

Create new Angular and Ionic 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 A... 

Create new Angular scope model to store messages and hashtags

In Appery IDE create a new Model in Project / M...

Image in Appery IDE, model for the messageList.

Create Angular API services

Then create the services as Angular scope funct... and select the Scope function type and click add.

Image in Appery IDE, add angular scope function.

Then select Invoke service from the dropdown li...

Image in Appery IDE, new angular function templ...

Map REST API objects to Angular scope model objects

Draw the elements from the API response in left...

Image in Appery IDE, angular function response ...LOGIN TO READ FULL ARTICLE

After that we need a special function call to e...LOGIN TO READ FULL ARTICLE

_.set(messageList_scope, '[' + i + '].messageWo...LOGIN TO READ FULL ARTICLE

We also need to clear the array of old messages...

var messageList_scope = [];

Image in Appery IDE, modified response mapping ...

Create also a new function getMessagesByHas... 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 getMe...

To add a new message create a new function ... 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 addNe...

How to split REST API word to an Angular object array

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 mess...LOGIN TO READ FULL ARTICLE

How to clean the hashtag word in JavaScript

Create a new function called replaceNonHashtagC...

Image in Appery IDE, function to clean up the h...

How to validate hashtag in JavaScript

Create also a new function to validate the hash...

Image in Appery IDE, function to validate the h...

How to use a simple Angular directive to convert hashtags to buttons

Now we have all the scope functions ready. Then...LOGIN TO READ FULL ARTICLE

In Angular directives are reusable components. ...

$scope.$parent.getMessagesByHashtag(hashtag);

In Appery IDE create new JavaScript / Angular d...

Image in Appery IDE, create new directive.

Add the following code to the directive. The di...

Image in Appery IDE, directive code to print th...LOGIN TO READ FULL ARTICLE

How to filter class names to an attribute in Angular

Create new filter with create new / JavaScirpt ...

Image in Appery IDE, filter code to select the ...

Chat emoji application with hashtags user interface

Then it's time to update the screen and add the...

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 t...

  • 1st grid, refresh button, ng-click = getFreshMessages()
  • 2nd grid, add new message input box, ng-model = newMessageText
  • 2nd grid, add new message button, ng-click = addNewMessage(newMessageText)
  • 3rd grid, message grid, ng-repeat = messageItem in messageList
  • 3rd grid, message label, weall-update-hashtags = messageItem
  • 3rd grid, message label, text = {{wordItem.word}}

In the third grid the grid itself has the ng-re...LOGIN TO READ FULL ARTICLE

Image in Appery IDE, the application main screen.

How to convert text to emoji characters

As a bonus there is one new parameter to the ad...

Future improvements

  • Inject service dependency to the directive that prints the message to words

we all speak emoji chat application source code and test application

You can download the Angular application resour...

Test live Emoji chat application with web or mo...