mschmulen/README.md

## README.md

      
    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

  
## 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>
	<!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>