Skip to content

JSDemos/fast-prototyping-with-ng-and-json-server

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

fast prototyping with AngularJs Restangular against JSON-server

Installation:

// global tools
sudo npm install -g json-server
// this project's dependencies
cd public
bower install

Create sample data JSON file (or use issues.json)

{
  "issues": [
    {
      "id": 101,
      "text": "something is not right"
    },
    {
      "id": 102,
      "text": "crash on login"
    }
  ]
}

Start the JSON REST server

json-server issues.json

Test returned values

curl http://localhost:3000/issues
curl http://localhost:3000/issues/101

you can try different verbs: PUT, DELETE, POST, GET - the data is updated

curl -X DELETE http://localhost:3000/issues/102
[
  {
    "id": 101,
    "text": "something is not right"
  }
]

Point restangular at JSON server's base url

angular.module('project', ['restangular']).
    config(function(RestangularProvider) {
        RestangularProvider.setBaseUrl('http://localhost:3000/');
    });
...

// fetch all issues
$scope.issues = Restangular.all('issues').getList().$object;

Map new / edit / delete actions implicitly via Restangular. In each case, redirect back to the index page to show updated list.

function redirect() {
    $location.path('/list');
}

// add new issue
$scope.add = function() {
    // $scope.issue is copied from first one, see app.js
    Restangular.all('issues')
        .post($scope.issue)
        .then(redirect);
}

$scope.destroy = function() {
    original.remove().then(redirect);
};

// edit
$scope.save = function() {
    $scope.issue.put().then(redirect);
};

Open index.html in the browser and enjoy!

About

Sample project showing Restangular and Json server prototyping

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 67.0%
  • JavaScript 33.0%