A short tutorial on how to connect AngularJS (v1.3) to a server. Three options are shown:

• $http service
• $resource service
• JSONP

The example code lists topics and votes, representing a basic CRUD (Create, Read, Update and Delete) application. The same functionality is implemented with $http and $resource services. The JSONP conterpart only reads the list of topics.

A NodeJS web server simulates a RESTful service, accessing to a Mongo database.

The PDF used in the Meetup presentation is also included. The Meetup event took place in Zürich on 8.sept.2014

In order to execute the code a Node webserver and a database needs to be installed. Follow installation instructions based on your system for [NodeJS download] 1 and [MongoDB download] 2. Together with NodeJS, the Node Package Modules (npm) is installed.

Then download the code and install dependencies with npm, including those managed by bower:

git clone https://github.com/carlos-/ajs-connectserver.git
cd ajs-connectserver
npm install

Run the web server by typing in the command line:

node bin/server.js

Some Linux distributions may need to rename node with nodejs.

You are ready to go. Type in your favorite browser [http://localhost:3000] 3

Happy learning!!

In order to apply Cross-origin resource sharing (CORS) used in JSONP, a second NodeJS web sever will be available at port 3001, execute this in a second command line:

node bin/alternative-server.js 

Following this URL [http://localhost:3001] 4, $http and $resource won't work because the port is different, and the browser considers it violates the same-origin policy. You could prevent this uncommenting in the file bin/server.js the line:

// app.use(cors());

You can include some dummy data, not required but useful:

mongoimport --db simple --collection topics --jsonArray data.js 

This tutorial uses a number of open source projects to work properly:

• AngularJS - Superheroic JavaScript MVW Framework
• NodeJS - evented I/O for the backend
• npm - package manager for node
• Express - fast node.js network app framework
• MongoDB - NoSQL open-source document database
• mongoose - elegant mongodb object modeling for node.js
• Twitter Bootstrap - great UI boilerplate for modern web apps
• Bower - package manager for the web

MIT

Free Software, Hell Yeah!