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 + ".");
};
});

[Omkar Mone]

Would you post the latest version of your code?

[Harshit18]

Code :

Please find the screenshots of the code of UI Page and UI Script respectively in the attachment.

[Matthew Glenn]

At first glance, your code looks fine. Are there any errors in your browser console?

For what it's worth, I ran through the tutorial you're using and encountered the same issue. Looking into my own problem, I noticed a type in the angular controller name in my UI Script. I corrected my code, however, I needed to clear my cache to get the page to load properly. 

You may not be experiencing the same issue, but I felt it was worth noting.

[Harshit18]

Hey Matthew, 

Great effort made! Can you please tell me which line of code it is so that I can also correct and follows the above mentioned steps to resolve the error. 

If it is which is documented wrong in tutorials then it should be corrected asap. I wonder how no one till now did not reported something like this to ServiceNow. 

Regards

Harshit Chauhan

[phillipkeigley]

You are not loading the angularJS library.  AngularJS needs to be the first script loaded at all times.    Put the below line of code on line 3.  Only test in Incognito mode in Chrome, other wise you will have mixed results.  Also, you don't need to load bootstrap, its included in ServiceNow, so your actually loading it twice.  I would remove line 4.  Also, looks like your not loading your UI Script properly.

<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js" />

<g:requires name="the_API_NAME_OF_your_UI_Script.jsdbx" />