Skip to content

Instantly share code, notes, and snippets.

@mschmulen

mschmulen/README.md

Last active December 24, 2015 06:09
Show Gist options
  • Save mschmulen/6755421 to your computer and use it in GitHub Desktop.
Save mschmulen/6755421 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Standalone, Disconnected and Mocked inline html and javascript
Raw
README.md

Simple Angular App Example, Disconnected and Mocked inline html and javascript

simply clone the repo locally and

 git clone https://gist.github.com/6755421.git AngularStandalone
 cd AngularStandalone
 open index.html
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h4>Simplest Angular App - Standalone and Disconnected</h4>
<div ng-app="myApp">
<span ng-controller="UserCtrl">
<ul>
<li ng-repeat="user in users">{{user.userId}}: {{user.userName}}</li>
<button ng-click="addUser()">Add user (HTTP PUT)</button>
</ul>
</span>
</div>
<script src="http://code.angularjs.org/1.1.1/angular.js"></script>
<script src="http://code.angularjs.org/1.1.1/angular-mocks.js"></script>
<script>
'use strict';
// ' Backend '
var myApp = angular.module('myApp', []);
// You can use provide to blanket replace $httpBackend with the mock
myApp
.config(function($provide) {
// Decorate by passing in the constructor for mock $httpBackend
$provide.decorator('$httpBackend', createHttpBackendMock);
});
// Mark urls that match regexp as a match,
// you can pass this as the url argument to $httpBackend.[when|expect]
angular.module('myApp')
.run(function($httpBackend, $timeout) {
var regexpUrl = function(regexp) {
return {
test: function(url) {
this.matches = url.match(regexp);
return this.matches && this.matches.length > 0;
}
};
};
//*******************************************
// Allow JSONP to pass to external services (ie Solr)
$httpBackend.when('JSONP', regexpUrl(/http:\/\/.*/))
.passThrough();
// Some statefullness
var users = {};
var userId = 0;
$httpBackend.when('PUT', '/users')
.respond(function(method, url, data) {
data = angular.fromJson(data);
users[userId] = {userName: data.userName, userId: userId};
userId++;
return [200, users[data.userId]];
});
$httpBackend.when('GET', regexpUrl(/users\/(\d+)/))
.respond(function(method, url, data) {
data = angular.fromJson(data);
return [200, users[data.userId]];
});
$httpBackend.when('GET', '/users')
.respond(function(method, url, data) {
return [200, users];
});
// A "run loop" of sorts to get httpBackend to
// issue responses and trigger the client code's callbacks
var flushBackend = function() {
try {
$httpBackend.flush();
} catch (err) {
// ignore that there's nothing to flush
}
$timeout(flushBackend, 500);
};
$timeout(flushBackend, 500);
});
// Angular APP,
// An actual angular app you might write using standard $http service
myApp
.controller("UserCtrl", function($scope, $http) {
$scope.users = {}
var addedUsers = 0;
// Add a user
$scope.addUser = function() {
var names = ["Matt", "Jeff", "Mark", "Shivai", "James", "Vicki"];
var sentData = {userName: names[addedUsers++ % 9]};
$http.put('/users', sentData).success(function(data) {
$scope.users[data.userId] = data.userName;
});
};
// Get a list of all the users
$http.get('/users').success(function(data) {
console.log("GOT: " + data);
$scope.users = data;
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment