AngularJS and VisualForce/SFDC

Question

I am curious how people handle the angular templating engine while using visualforce.

The issue is that if you have a static resource and you use a templateUrl for a directive, or even a route. Everything essentially gets evaluated on the page, however the URL is not used with respect to the static resource, instead is used with respect to your current domain/url.

Of course you can get around this by using VisualForce pages as templates, or just throwing the html directly into the directives instead of a templateUrl.

However this has started becoming a real issue while trying to use existing Angular Modules (such as ui.bootstrap).

Are there any known solutions to this?

Answer 1

I have a hard time understanding what you are struggling with absent a concrete example.

The pattern I followed when using templates was to pass in merge values from the VisualForce Page, where I can still perform a merge, to my Static Resource within which I define directives.

VisualForce Page

(function (a) {
    "use strict";
    a.module('myApp', [])
        .constant('mergeValues', {
            template1Url: '{!URLFOR($Resource.Template1)}',
            template2Url: '{!URLFOR($Resource.Template2)}'
        );
})(angular);

Static Resource

(function (a) {
    "use strict";
    a.module('myApp')
        .directive('template1', function(mergeValues) {
            restrict: "E", templateUrl: mergeValues.template1Url
        })
        .directive('template2', function(mergeValues) {
            restrict: "E", templateUrl: mergeValues.template2Url
        })
})(angular);