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.

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!

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store