how to get records with angularJS

[Goran WitchDoc]

Hi,

Just to clear out the conditions 😃 I'm pretty new to servicenow and developing. Coding has always been there in the background all life, but it has never been my main work.

I'm trying to learn how to get angularJS to work like I want and I've been through a lot of tutorials of AngularJS but I havnt found anyone that covers really how to get the information from ServiceNow. all these always put the data in the controller manually.

And when it comes to REST, Im totally new 😃

I've played around abit with the info from Angular in ServiceNow: Tutorial #3 - REST Calls-John Andersen

and I get it to work. But since that one requires a input for the tickets to show, I want to know how to make a ui page that shows the records without any manually input calling for the function to get it.. but show all the records that my query is. Im trying this out on my personal dev-instance.

In my dream world I would just take away the function part and use the get right up, but I guess Im missing something.

This is what I got.

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">

  <!-- Import AngularJS Library -->

  <g:requires name="angular.min.jsdbx" />  

  <!-- Import my UI Script - get updated timestamp to invalidate cache if script changes -->

  <g2:evaluate var="jvar_stamp">

      var gr = new GlideRecord('sys_ui_script');  

      gr.get("e608a7e94fc41600028f7ab28110c748");

      gr.getValue('sys_updated_on');

  </g2:evaluate>  

  <g:requires name="driftinformation.jsdbx" params="cache=$[jvar_stamp]" />  

  <!-- The User Interface -->

  <div ng-app="descEditor" style='padding:40px;'>

      <div ng-controller="DescriptionText">

          <table><tr>

<!--               <td style='width: 300px; vertical-align: top;'>

                  <p>NUMBER</p>

                  <input ng-model="incnum" ng-change="updateRecordList(incnum);"/>

              </td> -->

              <td style='vertical-align: top; padding: 20px;

                                                                        background-color: #B2B2B2; width: 200px;'>

                  <div ng-repeat="num in numbers">{{num.number}}</div>

              </td>

          </tr></table>

      </div>

  </div>

</j:jelly>

UI Script:

var myApp = angular.module('descEditor', []);

myApp.controller('DescriptionText', [

  '$scope',

  '$http',

  function($scope, $http) {

      $scope.incnum = "INC010";

      $scope.url = '/api/now/table/incident';

      $http.defaults.headers.common.Accept = "application/json";

      $http({

              method: 'GET',

              url: $scope.url + "?sysparm_query=numberSTARTSWITH"+incnum+

                                                  "^ORDERBYDESCnumber"+

                                                  "&sysparm_fields=number&sysparm_limit=25",

          }).

          success( function(data, status) {

              $scope.numbers = data.result;

          }).

          error ( function(data, status) {

              $scope.numbers = [{"number": "Error fetching list"}];

          });

  }

] );

I'm hoping someone in the community can point me in the right direction 😃

[Rushit Patel2]

ahhh...i SEE it.

i guess u need to replace line 19 with

$scope.$apply(function () {

    $scope.numbers= angular.fromJson(answer);

    alert($scope.ex2Output3);

  });

reason behing using $scope.apply is that glideAjax   and its callback is not part of Angular. so when u try to use somthing angular(for exp like $scope.something = zuzu;) u need to explicity tell it using $scope.apply. so that it can update the view.

perhaps, this post will explain it better. this is why Angular 1 is nightmare for begginers. Angular 2 is going to be much better

i havnt tried your code..let me know if it works.

[Goran WitchDoc]

you're good rossipatel

You made my day again!

I skipped the Alert($scope.ex2Output3); thou.. It seems   kind of weird.. the ex2Output3 thingie

Now Im going to put it all together again with the rest and see if it goes like I want 😃

[Rushit Patel2]

goranlundqvist...yeah..Happy to Help

[Goran WitchDoc]

Im back )

Thanks for the help. Now its working like a charm in my persona dev that are in Geneva.

Then ofcourse another problem.

I now did it in our company dev now with fuji and it doesnt seem like the angular wants to work in the portal. I get the tabs, but the angular isnt showing.

If I put the same code on a UI Page its working.

And what I find the most strange thing. If I inspect the element with firefox, all the html code is there when the correct data from angular, but it aint rendering on the page... Any clue what I can look for?

[Rushit Patel2]

so where you have used that code? in dynamic content block?

and when u say angular is not working..so somting like this {name}   is displayed?

and are you getting any error in console of browser?