Home > Articles, Internet Applications, Libraries & Frameworks > Using the Repository design pattern with AngularJS framework.

Using the Repository design pattern with AngularJS framework.

AngularJS is really a great open-source framework for creating single page web applications (SPA) based on MVW (Model / View / Whatever) architecture. In this article, I’ll present to you how the Repository design pattern can be used in order to encapsulate into a separate layer all the underlying communication with a back-end remote system for performing CRUD operations. The example next is very simple since the user can load either a list of customers or a list of orders by clicking the appropriate link from a menu.

The structure of the demonstration project is the following :

`-- CMApplication
    |-- Application
    |   |-- Application.js
    |   |-- Controllers.js
    |   `-- Repositories.js
    |-- Database
    |   |-- Customers.json
    |   `-- Orders.json
    |-- index.html
    |-- Partials
    |   |-- CustomersPartialView.html
    |   `-- OrdersPartialView.html
    `-- Scripts
        |-- angular.js
        `-- angular-route.js

Let’s start with the “index.html” file which acts as a main template view :

<!DOCTYPE html>

<html data-ng-app="CMApplication">
    <head>
        <meta charset="utf-8" />

        <title>CMApplication</title>

        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>

        <script src="Application/Application.js"></script>
        <script src="Application/Controllers.js"></script>
        <script src="Application/Repositories.js"></script>
    </head>

    <body>
        <div>
            <ul>
                <li><a href="#/customers">Customers</a></li>
                <li><a href="#/orders">Orders</a></li>
            </ul>
        </div>

        <div data-ng-view=""></div>
    </body>
</html>

You will notice that generally the AngularJS framework is used.

From the above main template view I will present to you the following files :

  1. Application.js
  2. Controllers.js
  3. Repositories.js

The “Application.js” file contains the following initialization code :

angular.module ('CMApplication.Controllers', []);
angular.module ('CMApplication.Repositories', []);

angular.module ('CMApplication', ['ngRoute',
                                  'CMApplication.Controllers',
                                  'CMApplication.Repositories'])
       .config (['$routeProvider', function ($routeProvider)
{
    $routeProvider
        .when ('/customers', {
            controller: 'CustomerController',
            templateUrl: 'Partials/CustomersPartialView.html'
        })
        .when ('/orders', {
            controller: 'OrderController',
            templateUrl: 'Partials/OrdersPartialView.html'
        })
        .otherwise ({
            redirectTo: '/customers'
        });
}]);

From the above code you will notice that separate modules are used for both controllers and repositories and that we inject these modules in the main application module with the AngularJS dependency injection mechanism. Moreover, we configure the routes for using the customers and orders views. Both views act as partial views and are rendered inside the main template view.

The partial view “CustomersPartialView.html” for Customers :

<h3>Customers</h3> 

<div data-ng-repeat="customer in customers | orderBy:'name'"> 
    <div>ID: {{customer.id}} - Name: {{customer.name}}</div> 
</div>

The partial view “OrdersPartialView.html” for Orders :

<h3>Orders</h3> 

<div data-ng-repeat="order in orders | orderBy:'name'"> 
    <div>ID: {{order.id}} - Name: {{order.name}}</div> 
</div>

Next, follows the contents of the “Controllers.js” file :

angular.module ('CMApplication.Controllers')
       .controller ('CustomerController', ['$scope', 'CustomerRepository',
             function ($scope, CustomerRepository) {
                   CustomerRepository.getCustomers (function (data) {
                         $scope.customers = data;
	           });
}]);

angular.module ('CMApplication.Controllers')
       .controller ('OrderController', ['$scope', 'OrderRepository',
             function ($scope, OrderRepository) {
                   OrderRepository.getOrders (function (data) {
		         $scope.orders = data;
	           });
}]);

Inside the controllers (OrderController and CustomerController) there is no direct use of $http service. Controllers have no idea of the data source or the underlying system for retrieving or sending data. We could use JSON files, XML files, a local database or a backend system with a RESful API communication. In this example we just use JSON files since the source of data works as an abstraction for $http. The appropriate repository is injected in each controller. Whenever a controller calls a repository method passes the success callback (you can modify it for passing also the error callback) for handling the request due to fact that the operation is asynchronous.

Next, follows the contents of the “Repositories.js” file :

angular.module ('CMApplication.Repositories')
       .factory ('CustomerRepository', ['$http', function ($http) { 
         return { 
           getCustomers: function (callback) { 
             $http.get ('Database/Customers.json').success (function (data) { 
               callback (data); 
             }); 
           } 
         }; 
}]);

angular.module ('CMApplication.Repositories')
       .factory ('OrderRepository', ['$http', function ($http) { 
         return { 
           getOrders: function (callback) { 
             $http.get ('Database/Orders.json').success (function (data) { 
               callback (data); 
             }); 
           }
         }; 
}]);

Lastly, the contents of the files “Customers.json” and “Orders.json” :

[
    { "id": 1, "name": "Customer Name 1" },
    { "id": 2, "name": "Customer Name 2" },
    { "id": 3, "name": "Customer Name 3" }
]

[
    { "id": 1, "name": "Order Name 1" },
    { "id": 2, "name": "Order Name 2" },
    { "id": 3, "name": "Order Name 3" }
]

In a controller you can inject more than one repositories depending on what data you want to use. Also, you can introduce a middle service layer that can encapsulate any repositories you want and expose a single method with wrapper model parameters for the controller.

  1. July 25, 2014 at 00:19

    My pleasure.

  2. Ashly
    July 22, 2014 at 08:30

    Thank you for this short but compound tutorial for the basics of AngularJS. You helped me understand it better.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: