Interface-first-development. Create your Angular app without a API backend first. Implement AJAX calls as you would as usual, but when you append 'offline=true' to the URL it will get JSON-files from your defined offline data path. So a GET call to '/api/people/pikachu' will turn into '/offline_data/people/pikachu.get.json'. This also works as a…

app.js

// Your file
 
angular.module('app', ['offlineMode'])
 
	.run(function (httpInterceptor) {
 
		httpInterceptor.config.OFFLINE_DATA_PATH = '/offline_data';
		httpInterceptor.config.API_PATH = '/api';
	})

	.controller('MainCtrl', function ($scope, $http) {
 
		$scope.name = 'unknown';
		$scope.command = 'null';
 
		$http.get('/api/people/pikachu').success(function(data) {
			$scope.name = data.name;
			$scope.command = data.command;
		});
	});

offlineMode.js

// Our file, that you include
 
angular.module('offlineMode', [])
 
	.config(function ($httpProvider) {
 
		$httpProvider.interceptors.push('httpInterceptor');
	})
 
	.factory('httpInterceptor', function ($q) {
 
		var OFFLINE = location.search.indexOf('offline=true') > -1,
			_config = {
			OFFLINE_DATA_PATH: '/offline_data',
			API_PATH: '/api'
		};
 
		return {
			request: function(config) {
				if (OFFLINE && config) {
					if (config.url.indexOf(_config.API_PATH) === 0) {
						var path = config.url.substring(_config.API_PATH.length);
						config.url = _config.OFFLINE_DATA_PATH + path + '.' + config.method.toLowerCase() + '.json';
					}
				}
 
				return config || $q.when(config);
			},
			config: _config
		};
	}
);

pikachu.get.json

{
	"name": "Pikachu",
	"command": "pika"
}