也可以分成三步：
1. 添加css和js引用：
<apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></apex:stylesheet>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="{!$Resource.forcetk4ng}"></script>
2. 添加html代码：
<div ng-app="ngapp">
<div ng-controller="positionCtl">
<button ng-click="getPositions()" class='btn btn-primary'>Retrieve Data</button>
<table class='table table-bordered table-hover table-striped '>
<thead>
<tr>
<td>Id</td>
<td>Name</td>
<td>IsAllow</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in position.records">
<td>{{record.Id}}</td>
<td>{{record.Name}}</td>
<td>{{record.IsAllow__c}}</td>
</tr>
</tbody>
</table>
</div>
</div>
3. 添加js代码，使用forcetk4ng获取数据：
angular.module('ngapp', ['forcetk4ng'])
.controller('positionCtl', function($scope, force){
force.setAccessToken('{!$Api.Session_ID}');
$scope.position = {};
$scope.getPositions = function(){
var soql = "select Id, Name, IsAllow__c from PositionTest__c";
force.query(soql)
.then(
function(records){
$scope.position.records = records;
},
function(event){
console.log(event);
}
);
};
$scope.getPositions();
});
示例: https://c.ap1.visual.force.com/apex/TestApexPage (此地址为个人测试地址)
注：可以给apex:page添加一些属性，去掉Salesforce样式和菜单，就和普通html页面一样了。
<apex:page standardStylesheets="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">