angularjs – Codemotion

Writing Services in Angular.js

Yaroslav Golovach — Mon, 11 Sep 2017 15:28:01 +0000

Series “Developing applications on single-Angular.js”

Why do I need Angular.js and why he
Modern tools and framework Angular.js frontend applications
Familiarity with controllers and directives Angular.js
Writing Services in Angular.js
Routing in Angular.js
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:





  Money
  
    500.0
  
  
    
      
        
        Transactions {{navigation_ctrl.transactions.length}}
      
    
    
       Settings

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

The post Writing Services in Angular.js appeared first on Codemotion.

Routing in Angular.js

Yaroslav Golovach — Mon, 04 Sep 2017 15:52:11 +0000

Series “Developing applications on single-Angular.js”

We are approaching the end of our guidance for Angular.js. There are only two articles: and this is another. In this we consider the Angular.js UI Router – a library to organize navigation between different parts of our application. At the same time, we can rewrite our code so that it uses the templates, instead of storing the entire html to a single file.

Templates in our application are stored in src/app/app_part/. Under app_part I mean a separate part of the application. Now we only main, but in the future may be in the same sub-folder settings, categories and everything else. Fast forward the entire central portion containing the form to add transactions and table with transactions in src/app/main/transactions.html and replace it with:

It is also necessary to remove the ui-view from above of the container level. Thus, in src/index.html inside the body tag in addition to the script tags we still have the following layout:


  
    Money
    
      {{navigation_ctrl.transactions_store.sum()}}
    
    
      
        
          
          Transactions {{navigation_ctrl.transctions_store.transactions.length}}
        
      
      
        
           Settings

Now we have nothing works, because we did not specify what kind of UI Router’u template output in ui-view at the root link. That’s what this library and deals with: inserts ui-view template corresponding to the application settings.

So, we update src/app/index.js :

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('transactions', {
      url: "/",
      templateUrl: "app/main/transactions.html"
    });
    $urlRouterProvider.otherwise('/');
  });

We use the function of config() to configure the various service providers (one of the types of services), before they begin to be used in other parts of the application.

Here, through a chain of calls to the function state() on the service $stateProvider we specify which template to display inside the ui-view for each page. The last line, $urlRouterProvider.otherwise('/'); said Angular’u what address to redirect the user if the requested route does not exist. Our app now again should work as before.

Few analogies for those familiar with Ruby on Rails: ui-view can be compared with the yield in rail templates and call chain state() – a file routes.rb.

Let’s try to add a real navigation: to link transactions led to the table with the transactions, and settings for future user settings page.

We update our list of routes:

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('transactions', {
      url: "/transactions",
      templateUrl: "app/main/transactions.html"
    })
    .state('settings', {
      url: "/settings",
      templateUrl: "app/settings/settings.html"
    })

    $urlRouterProvider.otherwise('/transactions');
  });

And add the file app/settings/settings.html with such content:

Settings

Now, any nonexistent path will be redirected to the page with the transaction. Try to open the following path: http://localhost:3000/, http://localhost:3000/#/transactions, http://localhost:3000/#/settings, http://localhost:3000/#/crap.

Sense from the manual driving bit addresses, so revive links in the sidebar. To this end, there is UI Router directive ui-sref, stating the name of the State (the first argument to the function state ()), which is due to open by clicking on the following link:


  
    
    Transactions {{navigation_ctrl.transctions_store.transactions.length}}
  


  
     Settings

That’s enough to our menu earned – by clicking on the links the central part of the application changes. Commit to the changes done in the article: 448daee.

Homework:

Refer to the documentation UI Router way to highlight the current menu item

The post Routing in Angular.js appeared first on Codemotion.

Familiarity with controllers and directives Angular.js

Yaroslav Golovach — Mon, 31 Oct 2016 15:02:13 +0000

Series “Developing applications on single-Angular.js”

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

In this article we will write a simple controller Angular.js and make it display the data in this table using the built-in Angular directives. Moreover, we revive this form so that it really adds a new row to the table transactions.

Controllers Angular.js are the link between the html-marking and a “model”. The Angular model responsible for just 4 different kinds of objects, which we will discuss later. Omit is that the model and will store all of the data directly in the controller.

The task of the controller, as well as in other MVC frameworks, is to obtain data from the model and display it to the user, or in the other direction, to obtain data from the view and sending them to the model.

First of all, remove src/app/main.controller.js, src/app/main.controller.spec.js, src/app/main.html and src/components/navbar/, which generated the Yeoman for us.

Writing the first controller

Our first controller will be called TransactionsCtrl. According to the naming conventions in Angular.js, controller name is constructed as a “name + Ctrl”.

Create a file src/app/main/transactions.controller.js. In this file, define the controller itself:

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

 });

Note that we do not need to connect the newly created file manually using the tag