Angular TODO Application with ng2-restangular and

Jan 5, 2017 · 4 min read

04 JANUARY 2017 on angular, angular2, it’sjustangular,, 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 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:

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:

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store