Angular TODO Application with ng2-restangular and restdb.io

4 min readJan 5, 2017

04 JANUARY 2017 on angular, angular2, it’sjustangular, restdb.io, todoapplication, restangular, ng2-restangular

This article is based on Angular v. >= 2.x unless explicitely stated differently.

Don’t forget It’sJustAngular!

Last update: April 20, 2017

ng2-restangular was renamed to ngx-restangular due to Angular Semantic Versioning (SemVer) changing. More can be found here.

Official ngx-restangular documentation was released. Great opportunity to use Angular Universal. Refer to ngx-restangular official site.

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.

You need a RestDB account to start.

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.

Here is the full content of todo.model.ts:

export class TodoModel {  
    completed: boolean;
    title: string;    constructor(title: string) {
        this.completed = false;
        this.title = title;
    }
}

Add the core folder to app folder in our project. In core folder create core.module.ts file. To config restangular please see the code below:

import { NgModule } from '@angular/core';  
import { AppComponent } from './app.component';  
import { RestangularModule } from 'ng2-restangular';// AppModule is the main entry point into Angular2 bootstrapping process
@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
  ],
  imports: [
    RestangularModule.forRoot((RestangularProvider) => {
        RestangularProvider.setBaseUrl('https://todos-d479.restdb.io/rest/');    // root
        RestangularProvider.setDefaultRequestParams({
            apikey: '585a543ccdc9f08103309c29'                  //key
        });
        RestangularProvider.setRestangularFields({
        id: "_id"   // duplicating id field to _id 
        });
      }
    ),
  ]
})
export class AppModule {  
}

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.

import {Injectable} from '@angular/core'  
import {Restangular} from "ng2-restangular";@Injectable()
export class RestService {  
    constructor(private restangular: Restangular) {}
    //methods
    getTodoList() {
        let list = this.restangular.all("list").getList();
        return list;
    }
    addTodo(todo) {
        return this.restangular.all("list").post(todo);
    }
    removeTodo(todo) {
        return todo.remove();
    }
}

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

You can read article here: http://blog.2muchcoffee.com/angular_todo_application_with_ng2-restangular_and_restdb-io/