[SalesForce] How to reference angularjs template files within a visualforce page

I am creating a Visualforce plugin that allows me to add data to the Account and Opportunity pages. The data I am adding easily follows the model of a SPA, so I decided to use AngularJS within my Visualforce plugin.

So far, everything worked fine when I was only using the Account page — I was able to just add text/ng-template scripts to render my particular views in the application, and edit just one file.

Now, I am extending the plugin to work on the Opportunity Page, too; the front-facing portion of plugin literally requires the exact same code to render on both the opportunity and account page.

I attempted first to find some way to render a partial view in Apex so that I could just have all my display logic in one file; it wasn't ideal, and there didn't seem to be a way to do that.

Then, I tried using linking to StaticResource html files that contain my angular page templates, but for some reason (despite getting a url for them), I cannot link to them; I think Salesforce simply does not let me link to static resources in this manner.

How exactly can I use template files in order to not have to copy/paste all my code, once in a visualforce page for the AccountController, and once in my visualforce page for the OpportunityController?

Best Answer

I do alot of salesforce angular work.

I take it you're using a Router of some sort, be it the built in $router or Ui-Router.

Regardless of which one you use, when you're given a choice to include a template via url do this:

{
  templateURL: '/apex/NameOfTemplateVFPage'
}

In your template partial, make sure to turn the sidebar, headers, and standard css OFF. And set the doctype to html-5.0

Lastly, if you're utilizing ngForce (shameless plug) when the lawyers get done pissing at each other, there will be an update that enables you to strip off the excess JS that Salesforce inserts into all vf pages when you're loading partials.

Related Topic