AngularJS Essentials for Using Onsen UI Part 3

Part 3: Services

We are going to make an app with Onsen UI using AngularJS services.

First, let’s learn the basics of services.

When you are using AngularJS and defining all sorts of data and functions in a controller, the controller gets bloated very quickly, often causing source code to be tangled and unstructured. However, there is a way to keep controllers slim and fit. That is to have them focused on managing and processing only view-related data, and export other data or processing to services to share with other controllers. Controllers can access data or functions stored in services via dependency injection (DI).

There are several ways to register services, but the two most common methods are “service() function” and “factory() function”. We will use factory() function in this example. Let’s look at the sample below:

You may find it a little complicated at first, but you will get comfortable as you practice a couple of times with overwriting services and start to understand how they work.

After defining the myApp module, the “MenuService” service is registered underneath it. The MenuService has the following data and functions:

  • menu: menu data [array]
  • getMenu() : function to get menu
  • addMenu() : function to add new menu
  • removeMenu() : function to remove menu

Next, let’s look at the controller. The two controllers, ManageCtrl and ListCtrl, are defined. The MenuService parameters are passed to each controller as the parameter of each function other than $scope. This is how you can have the controllers share data and functions stored in the service. We injected only one service in this example, but you can inject multiple services to a controller. Also, you can inject services to directives.

Let’s look inside ListCtrl first.

myApp.controller('ListCtrl', function($scope, MenuService){   
$scope.myMenu = MenuService.getMenu();
});

This calls the injected MenuService function, and stores data inside of its own scope ($scope). This will reflect the data of MenuService within the view. Let’s look at the corresponding html:

What’s important here is only this part below:

<li ng-repeat='items in myMenu track by $index'>{{items}}</li>

The ng-repeat directive is used to loop arrays or objects as many times as the number of elements.

This ng-repeat=’items in myMenu’ means that it stores myMenu, or $scope.myMenu, every time in the items, and loops as many times as there are total elements. If the $scope.myMenu is the array that contains following data:

By ng-repeat=’items in myMenu’:

<li ng-repeat='items in myMenu track by $index'>{{items}}</li>

The above code is expanded to the HTML element below:

<li>Udon</li> 
<li>Soba</li>
<li>Sushi</li>
<li>Sukiyaki</li>

*This example omits classes that are automatically added by AngularJS. The track by $index is an option to permit duplicate keys within ng-repeat.

This is how the menu stored in the MenuService service will be displayed as a list in the view.

Next, let’s look at ManageCtrl.

Similarly, MenuService is also injected to ManageCtrl. This ManageCtrl controller shares data with the ListCtrl controller via MenuService.

The ManageCtrl controller has two functions, addMenu() and removeMenu(). Both functions call the function of the MenuService service.

The menu that is added or removed by these functions will be immediately reflected in the ListCtrl model. Also, the view changes according to the current menu data.

This is how you can share data and functions between controllers.

Making an HTML5 mobile app using AngularJS services.

This is a simple to-do app made with Onsen UI. It uses AngularJS services internally.

*If Onsen UI does not work properly, try using the latest version of a Webkit browser like Google Chrome or Safari. This is because Onsen UI framework is built for mobile apps such as Android, iOS and Windows. We are using version 1.0 of Onsen UI for this app.

You can download the source code from here:

Download

Congratulations! You have completed the trilogy of the AngularJS essentials tutorial. Thank you for reading, and enjoy using Onsen UI!


Originally published at onsen.io on March 6, 2014.

Like what you read? Give Onsen UI & Monaca Team a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.