Site icon Codemotion

Writing Services in Angular.js

Yaroslav Golovach

Series “Developing applications on single-Angular.js”

  1. Why do I need Angular.js and why he
  2. Modern tools and framework Angular.js frontend applications
  3. Familiarity with controllers and directives Angular.js
  4. Writing Services in Angular.js
  5. Routing in Angular.js
  6. How to connect to the API backend Angular.js

In a previous article, we have recovered a list of transactions and added the ability to add new transaction. However, as we have seen it is not related to transactions in the sidebar of our application, the total amount of money. In fact, it’s just text, registered in the html code.

In this article we will look at service facilities available in Angular.js. We will use the services as a single place for access to our transactions, which will allow us to get the data in different controllers. As we look at Dependency Injection in Angular.js.

In Angular.js available whole zoo of different types of service facilities. The most popular of these are the factory and service. Each service is a singleton, that is, there is only one instance of a particular service. It fits perfectly in our terms and conditions: a single point of access to transactions, available from any of the controllers.

Today we are going to use factory, and soon you will understand why.

Let’s start by adding a new file: src/components/transactions_store.service.js with the following content:

// src/components/transactions_store.service.js
angular.module('ngmkdev').factory('TransactionsStore', function() {
  return {
    transactions: []
  }
});

Unlike the controllers, with the services we have more freedom in choosing the name. In this case, TransactionsStore makes sense, because the service will store all of the current transaction.

Now we need to combine this service with TransactionsCtrl. In Angular.js pattern used Dependency Injection. The framework itself is able to resolve the required dependencies, the developer only needs to specify the name of the component that is needed other component applications. It looks to specify dependencies as follows:

// src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope, TransactionsStore) {
  // ...
});

Now we have access to our service from the controller for the transaction. Since we used the factory, when you call TransactionsStore function is called from the definition of this service, so we can easily get all the transactions and write their controller attributes as follows:

// src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope, TransactionsStore) {
  this.transactions = TransactionsStore.transactions;
  // ...
});

Note that the rest of the code remains the same – Angular.js takes care of the communication controller attribute transactions and service upgrade.

Now we verify functionality in our service. We perform a number of operations are already familiar:

Add a new controller src/app/main/navigation.controller.js, in charge of the side menu in your application:

// src/app/main/navigation.controller.js
angular.module('ngmkdev').controller('NavigationCtrl', function(TransactionsStore) {
  this.transactions = TransactionsStore.transactions;
});

We define it on the sidebar and derive the number of transactions in the parentheses after the item Transactions:

<!-- src/index.html -->

<!-- ... -->
<div class="col-xs-2" ng-controller="NavigationCtrl as navigation_ctrl">
  <h2>Money</h2>
  <h3 class="money-ok">
    500.0
  </h3>
  <ul class="nav nav-pills nav-stacked">
    <li>
      <a href="#">
        <i class="glyphicon glyphicon-th-list"></i>
        Transactions <span class="badge">{{navigation_ctrl.transactions.length}}</span>
      </a>
    </li>
    <li>
      <a href="#"><i class="glyphicon glyphicon-tasks"></i> Settings</a>
    </li>
  </ul>
</div>
<!-- ... -->

Reload the page in the browser (if gulp still has not done so) and try to add a transaction. In addition to updating the table with the transaction is automatically updated and the counter transactions in the sidebar.

Commit all changes, as always, in a project repository on the GitHub: 6d661c0

Homework ( tips ):

Replace static amount of transactions in the sidebar to the present.
Hide the table if you do not have any transactions

Exit mobile version