Salesforce + AngularJS + Bootstrap

can also be divided into three steps:

1. Add CSS and JS references:

    <Apex:stylesheetvalue= "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></Apex:stylesheet>    <Scriptsrc= "Https://code.angularjs.org/1.4.9/angular.min.js"></Script>    <Scriptsrc= "{! $Resource. forcetk4ng}"></Script>   

2. Add HTML code:

        <DivNg-app= "Ngapp">            <DivNg-controller= "Positionctl">                <ButtonNg-click= "getpositions ()"class= ' btnbtn-primary '>Retrieve Data</Button>                <Tableclass= ' Tabletable-bordered table-hover table-striped '>                    <thead>                        <TR>                            <TD>Id</TD>                            <TD>Name</TD>                            <TD>Isallow</TD>                                                    </TR>                    </thead>                    <tbody>                        <TRng-repeat= "record in Position.records">                            <TD>{{record. ID}}</TD>                            <TD>{{record. Name}}</TD>                            <TD>{{record. Isallow__c}}</TD>                        </TR>                    </tbody>                </Table>            </Div>        </Div>

3. Add JS code and use Forcetk4ng to get the data:

Angular.module (' Ngapp ', [' Forcetk4ng ']). Controller (' Positionctl ',function($scope, Force) {Force.setaccesstoken (' {! $Api. session_id} '); $scope. Position= {}; $scope. Getpositions=function(){                    varSOQL = "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 (); });

Example: Https://c.ap1.visual.force.com/apex/TestApexPage (this address is a personal test address)

Note: You can add some attributes to Apex:page, removing the Salesforce styles and menus, just like normal HTML pages.

<standardstylesheets= "false"  showheader= "false"  Applyhtmltag= "false"  applybodytag= "false"  docType= "html-5.0"  >

Salesforce + AngularJS + Bootstrap