Angular TODO Application with ng2-restangular and restdb.io

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

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

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:

alt 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
alt

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:

alt

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