a basic angular rest client app.

angularjs-sample.md

Simple Angularjs app

This is a basic rest client app, very useful for creating demo page.

Backend

First, set up node.js as interface backend.
Dependencies:

  "dependencies": {
    "express": "*",
    "LiveScript": "*",
    "jade": "*",
    "body-parser": "*"
  }

app.livescript
Use express, but express is a bit weird when comes to path parameters.
I have to parse via regex and assign parsed result myself. :/

require! express
bodyParser = require 'body-parser'
app = express!

# interfaces
resType = 'application/json'

app.get('/', (req, res) ->
    res.type resType
    res.json {message: "Hello Rest!"}
)

app.get('/apis/members', (req, res) ->
    res.type resType
    res.json [
        {name: "Frank", age: 31, desc: "hacker"},
        {name: "Don", age: 28, desc: "traveler"},
        {name: "Fann", age: 31, desc: "artist"}
    ]
)

# get '/apis/member/:id' using regex
app.get(/^\/apis\/member\/(\d+)\/?$/, (req, res) ->
    res.type resType
    req.params.id = Number(req.params[0])
    res.json {id: req.params.id, name: "Dummy", age: 1}
)

app.use(bodyParser.json!)

app.post(/^\/apis\/member\/?$/, (req, res) ->
    res.type resType
    body = req.body
    res.json {id: 9989, name: body.name, age: body.age}
)

# static files
app.use express.static(__dirname + '/public')

# start
app.listen 3000

Frontend

index.jade

doctype html
html(ng-app="myApp")
    head
        title 'A Typical Rest App'
        script(src="https://code.jquery.com/jquery-2.1.3.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-resource.js")
        link(rel="stylesheet", href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css")
        script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js")
        script(src="js/angularapp.js")

    body(ng-controller="MyController")
        div(class='container')
            h1 Welcome to my rest place
            ul
                li(ng-repeat="member in members") Name: {{member.name}}, Age: {{member.age}}, Desc: {{member.desc}}
            button(ng-click="listMembers()") list members

            p {{newMember}}
            button(ng-click="createMember()") new member
            button(ng-click="getMember()") get member

angularjs app
Use ngResource greatly simplifies the request code.

'use strict'

# app
myApp = angular.module 'myApp', ['myServices']
myServices = angular.module 'myServices', ['ngResource']

myServices.factory 'Resources', ['$resource', ($resource) ->
        base = '/apis'
        members = $resource base + '/members', {}, {
            list: {method: 'GET', params: {}, isArray: true}
        }

        member = $resource base + '/member/:userId', {}, {
            getOne: {method: 'GET', params: {}},
            newOne: {method: 'POST', params: {}}
        }

        # return
        {
            members: members,
            member: member
        }
]

myApp.controller 'MyController', ['$scope', 'Resources', ($scope, Resources) !->
        # list members
        $scope.listMembers = -> $scope.members = Resources.members.list!
        # get one member
        $scope.getMember = -> $scope.newMember = Resources.member.getOne({userId: 123})
        # create one member
        $scope.createMember = ->
            member = new Resources.member()
            member.name = "John"
            member.age = 31
            member.$newOne!
            $scope.newMember = member
]