[SalesForce] AngularJS 4 on Visualforce Pages (or in Lightning Components)

Some time ago we used Angular 1.x on Visualforce pages for several apps. Now some of these Apps are aged and more or less in need of redesign. This redesign is not because of any actual shortcomings of Angular 1.x, but for other internal reasons and requirement changes.

This made me look closer on the current versions of Angular. Now there is Angular 4.x and the old version 1.x seems to be totally outdated…

They skipped Angular 3 and starting with Angular 2.x very fundamental design changes are introduced by the Angular developers, which makes it harder to use Angular by a simple <script> inclusion of one or many static resources like it was possible with Angular 1.x

Also the usage of TypeScript might be more difficult on Visualforce.

Searching the web, I came up with these links addressing Angular 2 – but this might still be valid and true even for Angular 4.x:

The concept in Chris W's answer here Feasability of Angular2 in Salesforce (through VF page) seems not very easy, since I would not like to develop locally and use REST and SOAP. Instead, I'm looking for a way to include some js-files (as done in good old Angular 1.x days) in a VF-page an write some pure JS for my app (not TS, no TypeScript). I did not dive into Angular 4.x deeply enough to see all implications and concepts yet. So this approach might be totally stupid – but I'd like to ask here before spending a long time research on Angular 4 concepts just to find out Visualforce and Angular 4 simply do not match at all…

Is there in the meantime any meaningful approach to use Angular 4 on Visualforce?

Has anyone found an meaningful usage of Angular 4 in Lightning Components? My assumption is, that it's not meaningful at all to combine Lightning Components with Angular 4 because the concepts do not match.

Best Answer

On using Angular within Lightning Components, the real gotcha is mentioned at the end of Christophe Coenraets's blog post Creating Lightning Components with React and taken from the security Requirements Checklist):

Any Lightning package that uses Angular or React or other third party DOM-based templating frameworks will automatically fail the security review until such time as we provide custom lightning components to properly encapsulate these frameworks. This is to avoid template injection attacks resulting from double interpolation. In order to use another framework as part of a package that uses Lightning, please use an iframe or Visualforce container until approved Lightning containers are published.

On the feasibility, mixing a framework that manipulates the DOM (Angular) with a framework that injects a virtual DOM layer (Locker Service) to enforce security policy is not likely to end well (until Salesforce have the time/inclination to make them work together). As TypeScript is translated to JavaScript to run, I assume that language problem could be overcome by tweaking the tooling (or maybe existing tooling is already suitable).

With Angular 1 and Angular 2 being significantly different, going from Angular 1 to native Lightning Components instead might make sense.

Related Solutions

[SalesForce] Feasibility of Angularjs in visualforce pages

Yes it is feasible. Just think of Salesforce as a (quirky) web server where you have to wrap your Angular index web page in:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false">
    <html lang="en" ng-app="myApp" ng-controller="MyAppController">
        ....
    </html>
</apex:page>

And you can use static resources (including the zip format ones) to hold other resources. Note that it is possible with Angular to put many templates in a single file so you don't have to have a Visualforce page per template.

The natural way to connect your Angular app with data is through REST APIs. On the Angular (client) side you have $http and $resource for this. And on the Apex (server) side you have @RestResource annotated classes. So Visualforce's data binding is not used. The model is held in the client (as JSON) and bound to the HTML templates at the client-side by Angular.

The reality though is that Salesforce gets in the way more than it helps. So it is probably best to learn about Angular first using a simple web server and then take on combining Angular and Salesforce.

This IssuesInGitHub sample application makes uses a single Visualforce page for the index page but keeps all its partial templates in individual static resources for ease of editing - looks like a good pattern to adopt.

[SalesForce] Table in Visualforce page using AngularJs

If you look in the JavaScript console - when working on code like this you must use the techniques described in How do I start to debug my own Visualforce/JavaScript? - you will see these errors:

GET https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css net::ERR_INSECURE_RESPONSE ang:31
GET https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js net::ERR_INSECURE_RESPONSE ang:29

letting you know that these files are not being loaded for security reasons because they are not hosted appropriately.

I don't know of a reliable CDN location to load these from, so the simplest thing to do is to manually get hold of them and add them as static resources to your project so your can reference them from Salesforce's servers like this:

<script src="{!$Resource.NgTableJs}"></script>
<link rel="stylesheet" href="{!$Resource.NgTableCss}" />

There is also then the error that this:

var app = angular.module('main', ['ngTable']);

should be this:

var main = angular.module('main', ['ngTable']);

With these two changes the table is rendered.

Note that there are other approaches to client-side paginated and sorted tables in Visualforce, such as adding DataTables to a normal Visualforce table.

Best Answer

Related Solutions

[SalesForce] Feasibility of Angularjs in visualforce pages

[SalesForce] Table in Visualforce page using AngularJs

Related Topic