也可以分成三步:

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">

Salesforce + AngularJS + Bootstrap的更多相关文章

  1. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  2. Play1+angularjs+bootstrap ++ (idea + livereload)

    我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26  Freewind.me原文   ...

  3. AngularJS -- Bootstrap(启动器)(转载)

    AngularJS -- Bootstrap(启动器)   点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...

  4. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  5. 【17】AngularJS Bootstrap

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...

  6. 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  7. AngularJs+bootstrap搭载前台框架——准备工作

    1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...

  8. 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  9. AngularJS -- Bootstrap(启动器)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...

随机推荐

  1. Android进程间的通信之AIDL

    Android服务被设计用来执行很多操作,比如说,可以执行运行时间长的耗时操作,比较耗时的网络操作,甚至是在一个单独进程中的永不会结束的操作.实现这些操作之一是通过Android接口定义语言(AIDL ...

  2. Spring Framework 笔记(一):IoC

    一:Spring中重要的概念 1. 容器( container ) : spring容器( ApplicationContext )的工作原则是创建容器中的组件( instance ),处理组件之间的 ...

  3. php单独编译扩展模块

    以pdo_mysql为例: 1.下载 文件 或者 进入 在PHP源码包中进入ext/pdo_mysql http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.解压 ...

  4. Asp.Net MVC4入门指南(5):从控制器访问数据模型

    在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里. 在开始下一步前,先Build一下应用程序(生 ...

  5. Linux内核【链表】整理笔记(1)

    我们都知道Linux内核里的双向链表和学校里教给我们的那种数据结构还是些不一样.Linux采用了一种更通用的设计,将链表以及其相关操作函数从数据本身进行剥离,这样我们在使用链表的时候就不用自己去实现诸 ...

  6. shell常用命令

    wget wget -P /root url -O rename 实现文件下载指定目录和重命名

  7. break continue.

    1.break与continue.这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. 2.while循环 //初始条件 while( ...

  8. photo shop替换颜色(自己指定的颜色)

    点开"选择"-"色彩范围",在选择下拉菜单里选"取样颜色",吸取图片上的要改的颜色,"确定",左下角拾色器前景色用你希望 ...

  9. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  10. 编辑器sublime text3和插件package control、Sidebar Enhancements插件安装

    (1)编辑器sublime text3的安装:选择自己需要的版本下载安装:http://www.sublimetext.com/3 (2)package control插件安装:https://pac ...