How we can use Angular JS in UI page in San Diego release?

chand1
Tera Contributor

‎07-21-2022 01:35 AM

Please let me know how we  can use Angular JS in UI page in San Diego release?

 

0 Helpfuls
  • 1,239 Views
4 REPLIES 4

chand1
Tera Contributor
In response to Maik Skoddow

‎07-21-2022 02:56 AM

Hi Maik

Yes we were previously using this approach only. But from San Diego release its unable to parse the 

/* */

commented section 

 

Preview file
16 KB
0 Helpfuls

chand1
Tera Contributor
In response to chand1

‎07-25-2022 09:06 PM

Hi Maik,

Please advise for the same.

 

0 Helpfuls

christophermart
Tera Contributor

‎10-25-2022 05:16 AM - edited ‎10-25-2022 05:20 AM

I also ran into an issue with using angular in a UI page after the San Diego upgrade and enabling the Next UI/Polaris theme. I was able to get something working that I thought I would share. I'm hoping the experts will be able to provide a better solution.

 

UI Page HTML: (Removed the angular template)

<html>
<!-- necessary for pages that do not contain angular yet:
<sript src="/scripts/angular_includes_no_min.1.5.11.js"></sript>-->

<!-- The HTML tag that will contain the inserted code -->
<div id="angular-app"></div>
</html>

 

UI Page Client Script: (Added template to script instead. Also added an ng-if to example.)

var angularApp = angular.module('myApp', []);
angularApp.controller('angularController', function($scope) {
$scope.name = 'Blue';
});

var appElement = angular.element('#angular-app');

var html_template = "<div ng-controller=\"angularController\">Type a color: <input ng-model=\"name\"/><div ng-if=\"name=='Blue'\"><h2 style=\"color: {{name}}\">You entered: {{name}}</div></h2></div>";
var escapedText = html_template.replace(/^\s*\/\/\s*\/\*\s*|\s*\*\/\s*\/\/\s*$/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
var app = angular.element(escapedText);
angular.bootstrap(app, ['myApp']);
appElement.append(app);

 

This seems to work on my end, but I'm sure there is a better way of doing this. 

0 Helpfuls