Salesforce + AngularJS + Bootstrap
也可以分成三步:
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的更多相关文章
- AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
- Play1+angularjs+bootstrap ++ (idea + livereload)
我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26 Freewind.me原文 ...
- AngularJS -- Bootstrap(启动器)(转载)
AngularJS -- Bootstrap(启动器) 点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- 【17】AngularJS Bootstrap
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...
- 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...
- 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- AngularJS -- Bootstrap(启动器)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...
随机推荐
- [技巧.Dotnet]轻松实现“强制.net程序以管理员身份运行”。
使用场景: 程序中不少操作都需要特殊权限,有时为了方便,直接让程序以管理员方式运行. (在商业软件中,其实应该尽量避免以管理员身份运行.在安装或配置时,提前授予将相应权限.) 做法: 以C#项目为例: ...
- javascript一些方法兼容
javascript一些方法兼容 标签(空格分隔): javascript 方法收集 [TOC] Object.keys 参考地址 if (!Object.keys) Object.keys = fu ...
- 关于读取txt文件中文乱码问题
在处理文件的过程中,读取txt文件出现中文乱码.这种情况是由于编码字符不一致导致. public static string ReadFile(string path, string fileName ...
- XAF学习笔记1
写软件很多年了.看过的框架用过的框架非常多.一直想要一种框架,说不出的心烦重复的数据库设计,重复的Model生成,重复的界面设计 一直寻寻觅觅,终于找到一个框架,DEV的XAF,DEV控件用了N年了, ...
- Excel中添加并使用宏实现批量更新数据
一.状况描述 当我们需要后台更新大量数据的时候,可以使用该功能.二.解決方案 (1)新建一个Excel文件,并另存为启用宏的Excel工作簿,扩展名为.xlsm. (2)在Excel ...
- Sprint3(12.18)总结
Sprint3第三阶段 1.类名:软件工程-第三阶段 2.时间:至12.18 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/queenju ...
- ios页面弹出方式《笔记》
1.presentViewController 方式,动画效果是从底部弹出,主要用在除导航类页面的弹出 let anotherVC = UIStoryboard(name: "Main&qu ...
- html中的标签
1.<big></big>定义大字体的文字 2.<blockquote>标记长的引用:</blockquote>请注意,浏览器在 blockquote ...
- action func用法记记
public partial class Form1 : Form { public Form1() { InitializeComponent(); } public delegate void s ...
- Ubuntu上安装Minecraft服务器
Minecraft由于其独特的魅力吸引了很多玩家.不过游戏的乐趣只有在和朋友一起玩的时候才最有意思,所以很早以前我就想建设自己的服务器.但由于专业知识欠缺,没有实现. 最近接触了Linux服务器,所以 ...