Part 2: How to use Angular controllers and services

Complete Cordova App with Angular JS tutorial

In part 1 we set up Angular JS, build the views and route to navigate through pages with a menu. This part covers controllers and services to get data from a backend and show it on a page.

Angular Controllers

To show data from a backend in the view, we need to bind this data to the view, that’s what a controller does. Start with creating a file called ‘contact-controller.js’ and place this file in a new folder called ‘controllers’, which is to be placed in the ‘js/app’ folder, (created in part 1). Define a controller by calling Angular’s controller function on the angular.module:

Pass the name of our controller (‘ContactController’) as the first parameter. In this case we create a controller for the contact.html view. And a callback function is defined with a parameter $scope. The properties of this object becomes available in the view. We start with a static object ‘contactData’ on the scope, which later on will be received from a backend.

Include ‘contact-controller.js’ in ‘index.html’ (created in part 1).

Link the controller to the view

In route.js (created in part 1) we tell Angular it should use ‘ContactController’ when navigated to #/contact

Use Angular’s $scope object in the view

We have set up a controller and told Angular it’s scope should be used when routed to #/contact. We can now use the scope data in contact.html

Angular services

We can show data in the view, defined in a controller. But we do not want this data to be static. Instead we want to get this data from a server backend? We can do this by creating a service, that gets this data with AJAX.

Inside the js/app/ folder create a new folder called ‘services’ where we put all our services. Add a new file called ‘contact-service.js’ to the services/ folder. Like we did with creating a controller, we create a service by calling Angular’s factory function on the angular.module:

Pass the name of the service, ‘ContactService’, as first parameter. Followed by a callback function with 2 Angular services injected, $q and $http. $q is needed for handling asynchronous results with Promises and $http is used to make an ajax call. The factory callback function returns an object with function named ‘get’. This object can be extended with whatever function is needed to get and return data from or post or put data to a server, local storage or even locally stored values.

The get function declares a Promise by $q.defer(). And returns deferred.promise. It makes an asynchronous request by $http.get() and once the server responds, the result is passed through the resolve() or reject() function. Further explanation on Promises and AJAX calls are beyond this tutorial. More information on $q and $http can be found in the Angular JS documentation. For now it is enough to understand that this service returns an object with a function ‘get’, that gets data from an external file we will create later and call ‘contact-mocked-data.json’.

After creating the ‘contact-service.js’ file we have to include it in index.html

Create mock data

Create a folder called mock-data in the root folder, the same as where the file ‘index.html’ and the folders ‘js/’ and ‘partials/’ are. Add a file called ‘contact-mock-data.json’ to the new mock-data folder. Add the data defined in the ‘ContactController’ to this new ‘contact-mock-data.json’ file. Make sure the format is valid JSON by adding double quotes to the keys and replace single quotes by double quotes where needed.

This content can now be requested by the service function that we are going to invoke inside the ‘ContactController’.

Use the service inside the controller

We have a service that contains a function that can be called to get some data. We have a controller that shows data in a view. It is now time to use the service in the controller and replace the static scope data by the result from the service.

The controller callback is now replaced by an array, [], with as last item the callback function. The first 2 parameters represent the injections of the $scope object and ContactService. This way the callback is passed two instances of these injections.

The static data we defined before as $scope.contactData is now replaced by calling the get() function of an instance of the ContactService. When the request is being resolved, the result is put on $scope as the contactData.

Navigating to #/contact will now show the contact data requested by the service. Make some changes in the mock-data/contact-mock-data.json file and refresh #/contact to see the changes.

Result, so far…

We have an Angular JS app, with a menu with which we can navigate (route) to 3 different pages.

And we can now get data with AJAX from a server backend and show this in a page.

What’s left to do:

  • Use Cordova to create an app for Android and iOS

« Part 1: How to setup Angular
Part 3: How to setup an environment for Cordova »

Tweet about this on TwitterShare on LinkedIn

Reacties

Het e-mailadres wordt niet gepubliceerd.

*