<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contacts HTML Client</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
margin-top: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Contacts</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
<li><a class="btn btn-link" ng-hide=" userInfo.isAuthenticated" ng-click="login()">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- contacts ui here -->
<table class="table table-striped" ng-app="myApp" ng-controller="contactListCtrl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="con in contacts">
<td>{{con.Id}}</td>
<td>{{con.Name}}</td>
<td>{{con.EmailAddress}}</td>
<td><button class="btn btn-sm btn-warning" ng-click="delete(con.Id)">Delete</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Create a new Contact</th>
<th colspan="2">API Status: {{status}}</th>
<th><button class="btn btn-sm btn-info" ng-click="refresh()">Refresh</button></th>
</tr>
<tr>
<td><input type="text" placeholder="ID" ng-model="newId" /></td>
<td><input type="text" placeholder="Name" ng-model="newName" /></td>
<td><input type="text" placeholder="Email Address" ng-model="newEmail" /></td>
<td><button class="btn btn-sm btn-success" ng-click="create()">Create</button></td>
</tr>
<tr>
<td colspan="4">API URL: {{baseUrl}}</td>
</tr>
</tfoot>
</table>
</div>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script type="text/javascript">
/* client javascript code here */
angular.module('myApp', []).controller('contactListCtrl', function ($scope, $http) {
//$scope.baseUrl = 'http://{api app name}.azurewebsites.net';
$scope.baseUrl = 'http://localhost:51864';
$scope.refresh = function () {
$scope.status = "Refreshing Contacts...";
$http({
method: 'GET',
url: $scope.baseUrl + '/api/contacts',
headers: {
'Content-Type': 'application/json'
}
}).then(function (results) {
$scope.contacts = results.data;
$scope.status = "Contacts loaded";
}, function (err) {
$scope.status = "Error loading contacts";
});
};
$scope.create = function () {
$scope.status = "Creating a new contact";
$http({
method: 'POST',
url: $scope.baseUrl + '/api/contacts',
headers: {
'Content-Type': 'application/json'
},
data: {
'Id': $scope.newId,
'Name': $scope.newName,
'EmailAddress': $scope.newEmail
}
}).success(function (data) {
$scope.status = "Contact created";
$scope.refresh();
$scope.newId = 0;
$scope.newName = '';
$scope.newEmail = '';
});
};
$scope.delete = function (id) {
$scope.status = "Deleting contact";
$http({
method: 'DELETE',
url: $scope.baseUrl + '/api/contacts/' + id
}).success(function (data) {
$scope.status = "Contact deleted";
$scope.refresh();
});
};
$scope.refresh();
});
</script>
</body>
</html>
REST API 在Azure上应用的简单通讯录 源码 （875个子文件） 
Global.asax 110B Global.asax 107B Web.config 4KB Web.config 3KB packages.config 2KB packages.config 2KB Web.config 2KB Web.Release.config 1KB Web.Release.config 1KB Web.Release.config 1KB Web.Debug.config 1KB Web.Debug.config 1KB Web.Debug.config 1KB Web.config 1KB packages.config 288B Contacts.cs 19KB SwaggerConfig.cs 15KB ContactsListAPI.cs 10KB ContactsExtensions.cs 5KB ContactsController.cs 5KB ContactsController.cs 4KB Contact.cs 4KB ServicePrincipal.cs 2KB IContacts.cs 2KB ContactsListAPIExtensions.cs 2KB GenericStorage.cs 1KB AssemblyInfo.cs 1KB AssemblyInfo.cs 1KB AssemblyInfo.cs 1KB BundleConfig.cs 1KB IContactsListAPI.cs 1KB ContactsListAPIAppServiceExtensions.cs 1KB ContactCollection.cs 908B WebApiConfig.cs 723B RouteConfig.cs 586B HomeController.cs 585B Global.asax.cs 577B Global.asax.cs 374B FilterConfig.cs 271B Contact.cs 251B Edit.cshtml 2KB Create.cshtml 1KB _Layout.cshtml 1KB Index.cshtml 857B Delete.cshtml 828B Details.cshtml 637B Contact.cshtml 441B Error.cshtml 264B Index.cshtml 213B About.cshtml 145B _ViewStart.cshtml 54B ContactsList.Angular.csproj 55KB ContactsList.MVC.csproj 16KB ContactsList.API.csproj 13KB bootstrap.css 138KB bootstrap.css 118KB bootstrap.min.css 115KB bootstrap.min.css 96KB bootstrap-theme.css 22KB bootstrap-theme.min.css 19KB Site.css 513B angular-csp.css 263B glyphicons-halflings-regular.eot 14KB .gitignore 3KB
index.html 5KB Project_Readme.html 5KB favicon.ico 31KB angular-scenario.js 1.22MB angular.js 938KB jquery-1.10.2.js 268KB jquery-1.9.1.js 262KB jquery-1.10.2.intellisense.js 156KB jquery-1.9.1.intellisense.js 155KB angular.min.js 123KB angular-animate.js 102KB jquery-1.10.2.min.js 92KB jquery-1.9.1.min.js 90KB angular-mocks.js 81KB bootstrap.js 66KB bootstrap.js 58KB modernizr-2.6.2.js 50KB jquery.validate-vsdoc.js 42KB jquery.validate.js 39KB bootstrap.min.js 35KB angular-route.js 35KB bootstrap.min.js 28KB angular-resource.js 26KB angular-sanitize.js 24KB angular-touch.js 22KB jquery.validate.min.js 21KB jquery.validate.unobtrusive.js 19KB angular-messages.js 15KB angular-loader.js 14KB angular-animate.min.js 13KB angular-aria.js 12KB respond.js 10KB jquery.validate.unobtrusive.min.js 6KB angular-sanitize.min.js 6KB angular-cookies.js 6KB respond.min.js 5KB共 875 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
