Angular JS two way binding

[Harshit18]

Hi 

I am referring to following link to test Angular JS code in ServiceNow :

https://developer.servicenow.com/app.do#!/training/article/app_store_learnv2_angularjs_madrid_introd...

but I am unable to implement two way binding using UI script and UI page. Instead of displaying the string entered in placeholder, it is displaying {{myVar}}. Also, the function on button Clear Text is also not getting triggered. 

I am sharing my code for UI Page & UI Script. If someone can debug my code and help me out to get the expected display as it is displaying in the link mentioned above, it will be a great help. 

UI Page: 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </link>
<script src="x_116068_angular_a.angular_app_client_logic.jsdbx"></script> 
<div ng-app ="angularapp" ng-controller = "AngularAppCtrl as appctrl">

<input type = "text" ng-model = "myVar" placeholder = "Enter some text here"> </input>
<p></p>
<div class ="jumbotron">
<h1 class = "display-1">Hello World!</h1>
<hr class = "m-y-2"/>
<p> </p>
</div>
<button ng-click = "clearTxt()" type = "btn" class = "btn btn-primary"> Clear Text </button>
</div>

</j:jelly>

UI Script :

angular.module('angularapp',[]);
angular.module('angularapp').controller('AngularAppCtrl', function($scope) {

$scope.myVar = '';
$scope.i = 0;

$scope.clearTxt = function() {
alert("Entering the function");
$scope.myVar = '';
$scope.i++;
alert("The myVar value was cleared " + $scope.i + "times by" + g_user.userName + ".");
};
});

[Matthew Glenn]

Is the UI Page code you provided the complete code?

The script tag in line 3 of your UI Page, where you'd normally point to your JS libraries, is empty. That should point to an instance-hosted UI Script or a CDN hosted library. 

Start there and see if that helps.

[Harshit18]

Hey Mathew, 

I have updated the code for UI Page but still it is throwing error. 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </link>
<script src="x_116068_angular_a.angular_app_client_logic.jsdbx"></script>
<div ng-app ="angularapp" ng-controller = "AngularAppCtrl as appctrl">

<input type = "text" ng-model = "myVar" placeholder = "Enter some text here"> </input>
<p></p>
<div class ="jumbotron">
<h1 class = "display-1">Hello World!</h1>
<hr class = "m-y-2"/>
<p>{{myVar}} </p>
</div>
<button ng-click = "clearTxt()" type = "btn" class = "btn btn-primary"> Clear Text </button>
</div>

</j:jelly>

[Omkar Mone]

Hi 

I guess you are missing this line from the above docs link - 

In there put your UI Page API name i.e - 

Hope this helps.

Regards

Omkar Mone

[Harshit18]

I have updated the code. Still not working.