Building AngularJS application with MongoDB and database data sources

Introduction

Ladies & Gents, let’s continue our previous example AngularJS application with Spring MVC Rest server. We will modify existing application to support both database data source, as well as new one: MongoDB data source.

The goal

Goal is to build the exactly the same screens as in our base example, with only differences are that on each page, at the page header, we will have drop down menu, where we can switch between two data sources: Database / MongoDB, and the second difference is that initially, on page load we will have ‘Mode choose’ screen, where we initially pick the one of the 2 modes. All the other screens are exactly the same as in previous, base application. Mode selection screen looks like the one below:

Continue reading

AngularJS with Spring MVC – REST way

Introduction

Ladies & Gents, let’s get started!

Goal is to build AngularJS powered CRUD application that communicates with Spring MVC Rest server. Demo is based on very simple model, including simple user data. App has just basing CSS styling (design is not intention here). We’ll build the following screens:

Angular part

 We have shell HTML page (index.html), such as the one below. This page is ‘shell page’, being loaded only initially. It contains multiple javascript imports (AngularJS required libraries, as well as some custom javascript files. Mostly, it is enough to just import angular.js library. But, since we’re using routing (navigation related) and resources (REST related), we needed to include appropriate libraries: angular-route.js and angular-resource.js. During development, we should use uncompressed versions, and switch them with compressed ones when production ready (non-compressed provide us better logging). Continue reading