JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.4/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://rawgithub.com/mgonto/restangular/master/dist/restangular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="WithObjectCtrl">
<h1>Using .$object</h1>
<h2>Hello, {{model.name}}!</h2>
<button ng-click="update()">Update</button>
</div>
<hr>
<div ng-controller="WithPromiseCtrl">
<h1>Using Promise</h1>
<h2>Hello, {{model.name}}!</h2>
<button ng-click="update()">Update</button>
</div>
</div>
JavaScript
var app = angular.module('MyApp', ['restangular']);
app.config(function(RestangularProvider){
RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url) {
if (operation == 'put') {
alert('Sending: '+JSON.stringify(element));
}
});
});
// Using .get().$object
app.factory('modelObject',function(Restangular){
return Restangular.oneUrl('foo', 'http://danharper.me/restangulartest.php').get().$object;
});
app.controller('WithObjectCtrl', function($scope, modelObject) {
$scope.model = modelObject;
$scope.update = function() {
alert('Name is currently: '+$scope.model.name);
$scope.model.name = 'Bob';
alert('Name is now: '+$scope.model.name);
$scope.model.save();
}
});
// Using .get().then(...)
app.factory('modelPromise',function(Restangular){
return Restangular.oneUrl('foo', 'http://danharper.me/restangulartest.php').get();
});
app.controller('WithPromiseCtrl', function($scope, modelPromise) {
$scope.model = {}
modelPromise.then(function(model) {
$scope.model = model;
})
$scope.update = function() {
alert('Name is currently: '+$scope.model.name);
$scope.model.name = 'Bob';
alert('Name is now: '+$scope.model.name);
$scope.model.save();
}
});