How can I reference angularjs template files within a visualforce page?

Question

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?

Frelseren · Accepted Answer · 2016-07-29 12:02:48Z

I recently wrote a post reference AngularJS templates within VisualForce.

I've mention three ways to do so:

1. Use templates as an individual VisualForce Page (VFP).

Then you can reference then as templateUrl: "/apex/MyDirective",. This method allows you to use apex tags inside your templates, but rendering might be slow.

2. Use templates as VisualForce components.

Create an apex:component with <script type="text/ng-template" id="myDirective">...</script> code inside. Then, add your component to the apex:page, e.g. <c:Template />. Now you can reference it by id: templateUrl: "myDirective",.

3. Use templates as static resources.

Create a static resource, which will contain your HTML templates, e.g. Templates. Now you have two options: either use <base> element or global javascript variable.

1) Define base as: <base href="{!URLFOR($Resource.Templates, '')}" /> and reference your template files: template: '/myDirective.html',

2) Create global variable:

<script>
  window.RESOURCE_ROOT = "{!URLFOR($Resource.Templates, '')}";
</script>

and use it as: templateUrl: RESOURCE_ROOT + '/MyDirective.html'

I'm using the Static Resource approach, but notice that you won't be able to use apex tags inside these templates.

geekymartian · Accepted Answer · 2014-03-26 13:51:27Z

0

Not sure how you tried to implement a partial but I would suggest to use apex:include tag to include a visualforce page with the content that you want to replicate.

Other option would be to create an apex:component that contain the templates and can receive parameters to load selective content for example.

answered Mar 26, 2014 at 13:51

geekymartian

6745 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I reference angularjs template files within a visualforce page?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related