http://blog.2muchcoffee.com/Ghost 0.11Thu, 19 Apr 2018 12:15:16 GMT60Several days ago Angular version 5 was released. Isn’t that a good luck that the same time ngx-restangular has reached 5 hundred stars on Github? It was quite a long journey since last year September that was accompanied by community support - great job, everyone! Let’s keep it]]>http://blog.2muchcoffee.com/5-hundred-stars-for-ngx-restangular-as-a-gift-to-angular-5-release/6e439f6b-29de-4ea5-a521-9fdf5ee1849bWed, 08 Nov 2017 11:47:26 GMT

Several days ago Angular version 5 was released. Isn’t that a good luck that the same time ngx-restangular has reached 5 hundred stars on Github? It was quite a long journey since last year September that was accompanied by community support - great job, everyone! Let’s keep it high!

Handling all http requests in one place is an inherent part of any modern app. The choice of a tool for that is more a question of team skills and approach. At this, one couldn’t simply ignore the open-source products metrics when choosing a solution.
Actually, we ended up with the list from Github page called “Awesome Angular2+ Components” from “Utilities to consume APIs”. Here is the list of contenders:

Аngular2-rest

Ngx-resource

Angular2-jsonapi

Ng2-rest-api

Ngx-restangular

The current state and version of a library

The first thing to look at is the state and status of a library. Is it still actual and supported?

Аngular2-rest

Ngx-resource

Angular2-jsonapi

Ng2-rest-api

Ngx-restangular

Very basic alpha state / -

No longer supported* / 3.6.0

Stable / -

Stable / -

Stable / -

*The author has created new library rest-core with rest-ngx module. As you can see some of the libraries were discontinued or making only their first steps.

The commits count and when the latest commit was made.

Each day you make commits for the projects you are working at, the same should library developers do. So let’s look at the number of commits and how long ago the latest one was submitted. Just check the table below. It’s clear that only Аngular2-jsonapi, Ngx-restangular and Ngx-resource are actively developed and received so necessary bug fixes.

Аngular2-rest

Ngx-resource

Angular2-jsonapi

Ng2-rest-api

Ngx-restangular

35 / 1.5 year ago

263 / 11 days ago

177 / 14 days ago

24 / a year ago

199 /16 days ago

Issues count (closed and open)

Shouldn’t we look closely at the number of closed and open issues? And here we go. Ngx-restangular has the lowest number of unresolved issues. Two libraries do not have any open bugs: Ngx-resource and Ng2-rest-api.

Аngular2-rest

Ngx-resource

Angular2-jsonapi

Ng2-rest-api

Ngx-restangular

2/171

115/0

59/212

1/0

99 / 33

1the lastest issue was opened on 17.08.2017, was closed on 12.08.2016; 2the lastest issue was opened 2 days ago, was closed - 14 days ago; 3the lastest issue was opened 2 days ago, was closed - 14 days ago.

You can also look at the time when the latest issue was opened and closed. At the moment Angular2-jsonapi and Ngx-restangular have the same period for opening and closing the latest issue.

Contributors count

To develop a successful open-source project you need contributors and a community interested in it. In this aspect, you can notice parity among the projects. Only Angular2-jsonapi has a little bit more participants.

Stars count

The number of stars you get at Github can tell you how popular your project is. We are sure you gave stars to the projects you enjoyed. So let’s look at this parameter.
In this case, the absolute champion is Ngx-restangular. Angular2-rest and Ng2-rest-api are ranked second and third respectively.

Followers count

The biggest number of followers has Angular2-rest. Ngx-restangular is the second. And the third prize is divided between Ngx-resource and Angular2-jsonapi.

The number of forks

Supported Angular versions

All of the libraries support Angular2 framework. But Ngx-restangular has an advantage here as it also supports Angular4.

UPDATE: Ngx-restangular has Angular 5 support now.

So what library is the king of the Angular castle when you need to work with REST API? Our short analysis shows that Ngx-restangular library is always ranked at least as the second one. If we are talking about stars count, then in this discipline, Ngx-angular is the absolute leader. Angular2-rest and Ngx-resource libraries are also among the first three choices but have certain drawbacks that don’t allow to call them as the leaders. Angular2-rest development was stopped and new bugs are not fixed. In case of Ngx-resource, its developers decided to use it as a base for the new library rest-core with rest-ngx module. It means Ngx-resource does not receive new feature, but only bug fixes. Angular2-jsonapi scored third. It was also usually among the first three places but still remains unappreciated by web developers.

It wouldn’t be fair enough not to mention that Ngx-restangular offers more high level approach for work with REST API. One has steep learning curve before using it in a new project and requires to dedicate several hours to documentation.

Recently there have been a lot of buzz in community regarding Angular Semantic Versioning changes. Community has been aware of a mess that might happen due to such switch. ‘ng2’ prefix is in use by the most of open source libraries/projects that expected Angular index being stable for a long time. Upon SemVer implementation many ‘ng2’ names have become obsolete when new package owners have started playing ‘who is faster’ game in getting new names in npm.

Wait a minute...Do I have to rename my repo?

At the moment there is no common practice for Angular components naming. Therefore you can find such prefixes as 'ng2', 'angular2', or simply 'angular' taking into account the framework is only Angular now. In our not so humble opinion, the best solution has been suggested by Olivier Combe and Austin McDaniel, who offered using ngx prefix for version Angular 2+ libraries to avoid this mess.

Some part of the community can say that 'ngx' is too similar to ngRx, so 'ngx' name space will not be recognizable. There is a simple explanation for that. We really need it in unifying all Angular 2+ open source libraries and components with pointing out they are not for AngularJS. Especially knowing that the latest major version released is Angular 4 nowadays.

Welcome to ngx-family, restangular :)

At this point we consider it as our responsibility to rename ng2-restangular to ngx-restangular which is proudly announcing with current post. For more information, please refer to ngx-restangular Twitter account .

Moreover, we are hardly working on official ngx-restangular documentation. As soon as it’s ready to use it will be living on http://ngx-restangular.com.

Feel free to reach us in case you have any questions and suggestions. We will be more than happy to assist you.

]]>A lot of examples of TODO apps just operate data in local storage. We want to show you how you can easily change this with ng2-restangular. It allows you to handle consuming data from REST API of any complexity from custom made APIs to cloud-based solutions. One of the really]]>http://blog.2muchcoffee.com/angular_todo_application_with_ng2-restangular_and_restdb-io/ccc44a2a-a4d0-4c1e-a272-b68eee510386Wed, 04 Jan 2017 16:21:00 GMT

A lot of examples of TODO apps just operate data in local storage. We want to show you how you can easily change this with ng2-restangular. It allows you to handle consuming data from REST API of any complexity from custom made APIs to cloud-based solutions. One of the really cool services we’ve discovered last time is restdb.io. It’s super easy and efficient way to get your own NoSQL db in the cloud. Webhooks and user roles are already there, so you just got everything for middle sized project from the box. They also can serve your HTML files if you need this ability for some reason.

This article is based on Angular (v.2+) unless explicitly stated differently.Don't forget It'sJustAngular!

Last update: April 19, 2017

First thing we need to do is create database. In our case - todos-d479. BTW, they are charging for instances of dbs so it can be a great fit for a small business or startup on MVP stage. After creating your db, go to its page by clicking on db name and switch up to developer mode using this button in top right corner:

Let’s setup the collection with 2 fields:

title: string

completed: boolean

Let's create a collection named list. Mind not to start your field name from underscore (like _name) because it’s reserved for system purposes.

Now get to database “SETTINGS” tab -> API

In Web page API keys (CORS) set up methods and find the Key (access token) necessary for sending requests. As a result your settings will look something like that:

Now we’re ready to install and set the ng2-restangular

npm install ng2-restangular

There is no need to put the whole source code here, demo will be available on the Plunkr and Github. Just let me outline a few key pieces:

we will need a model of todos and we can place todo.model.ts in “models” folder in the root dir of our app.

Obviously we need service to communicate with remote db. Let’s place it in services folder and call it rest.service.ts. The functionality is really simple and is really close to most existing similar apps.

Please refer to live Demo on Plunkr, Todo App based on Angular CLI on Github

]]>Restangular and Angular 2

Every Angular 2 developer who came from AngularJS is missing some favourite open source projects which were available for 1.xx version. One of them is amazing Martin Gontovnikas restangular which suggests a high-level approach to consuming REST data compared to built-in $resource.

Last update: April

Every Angular 2 developer who came from AngularJS is missing some favourite open source projects which were available for 1.xx version. One of them is amazing Martin Gontovnikas restangular which suggests a high-level approach to consuming REST data compared to built-in $resource.

Last update: April 19, 2017

Also there’re no built-in alternatives such as $resource in Angular 2 except of Http module. This gives enough freedom to those guys who love to do everything from scratch and build their own solution for this.

To write your own models, interceptors, modules for handling errors, methods for writing needed headers and a lot of things - that’s really exciting, but… It's not so fun, when you're building it a third time in 2 months, right? That’s the reason why we decided to port Restangular on Angular 2/TypeScript. Click here to check it out on Github.

This project required a lot of modifications because there are so many significant features in which Angular 2 differs from its predecessor, e.g. an ability to use Observables instead of Promises.

To make it short, the main idea of this project is to give Angular 2 community a powerful but yet simple tool with all Restangular features, such as:

Building chain from methods one, all, several

Support of self-linking elements

Support of nested RESTful resources

Creating your own methods

How to add ng2-restangular to your awesome project:

Go to your project directory and install it with npm: npm install ng2-restangular

Import RestangularModule to your application root module.

Let's config it quickly and start using it

This is all you need to start using all the basic Restangular features.

Why and where you should use ng2-restangular

This project can be an overkill if you're trying to implement POC or something simple, but when we're talking about complex web app with multiple requests to REST API, you should use it without hesitation.

]]>I think every Angular 2 developer has faced the situation when there are too many subscriptions in the component. If you unsubscribe manually - you waist too much time and litter the code. If you forgot to do that - your application uses too many resources.

I think every Angular 2 developer has faced the situation when there are too many subscriptions in the component. If you unsubscribe manually - you waist too much time and litter the code. If you forgot to do that - your application uses too many resources.

To simulate this situation let's create the simple router, component and service:

After these changes, we'll get what we expected in console - every time when getting to url '/test' the name will be typed-out once.

But what will happen if we have 20 subscribes in the component? It's really annoying - to unsubscribe from each Observables in every component.
To forget about unsubscribing - we can make a decorator. The main thing here is to save subscription in the variable this.subscribers, while the other job will be performed by decorator.

If your Angular2 application has many subscribers or you're tired of wasting time to make a lot of same code - you can use this decorator.

]]>On my long way as an AngularJS developer I’ve learned that when making a complicated application, there always was an ui-router I could rely on. It could meet most of the requirements of any frontend developer.

Let’s imagine that you have a component which behaviour highly depends on

On my long way as an AngularJS developer I’ve learned that when making a complicated application, there always was an ui-router I could rely on. It could meet most of the requirements of any frontend developer.

Let’s imagine that you have a component which behaviour highly depends on the current route. In AngularJS we are using amazing $state with its functionality, while in Angular 2 we have to recreate this tool by ourselves.

Then we should check if the needed part of the URL matches the <routePath>.
As you can see, now in the url variable we have the list of Observables. In order to be able to work easily with this data, we need to use combineLatest.
Once combineLatest transfers the data to map, we will be able to check that the routePath matches one of the URL parts whereafter true/false is returned.