BOOTSTRAP+ANGULAR+VISUALFORCE

Mohith Shrivastava

Twitter: @msrivastav13Blog: cloudyworlds.blogspot.in

Agenda

Need for Bootstrapping Visualforce pagesBasics of BootstrapBootstrap component library Need for JavaScript framework for

Enterprise SPA applicationsAngular basicsDemo application and Code walkthrough

Need for Bootstrapping visualforce pages

Normal Visualforce components like apex:pageblock,apex:pageblock table carry lot of viewstate that introduces server lag in applications

Need for design that works seamlessly on all form factors(ipads,tablets ,desktop) and device orientation

Basics of Bootstrap

• Fixed Width Container

• Fluid Container

Concept of Grid

Bootstrap component library

Available glyphsTabsPillsNavbarsPagination JumbotronsProgress barMedia ObjectsCarousel, Model ,Popover,Tooltips,Accordian

Need for JavaScript Framework

JQuery is a library. While frameworks are tool boxes

Data-binding becomes lot simpler Encourage good programming practicesEase of maintenance

Angular Basics

Controllers

Custom Directive

Attribute and Element Directive

Attribute Directive

Two way Data binding

DEMO SAMPLE APPLICATION

Code Apendix• Initial set up

Code Apendix• HTML Template with bindings

Code Apendix• Angular Scripts

References• http://getbootstrap.com/components/• https://docs.angularjs.org/guide• https://

www.salesforce.com/docs/developer/pages/Content/pages_js_remoting_example.htm

• https://www.salesforce.com/docs/developer/pages/Content/pages_remote_objects.htm

• http://reidcarlberg.com/2014/07/30/angularjs-remote-actions-the-simplest-possible-visualforce-page/

• https://www.codeschool.com/courses/shaping-up-with-angular-js

More resources• https://developer.salesforce.com/mobile/getting-started/html

5/#angularjs

• https://github.com/noeticpenguin/ngForce