Getting Started with AngularJS in ServiceNow

[Rick Mann]

At the K14 conference I heard of a few customers starting to use AngularJS within ServiceNow, so I started doing some reading on Angular.   Are there any good articles, tips/tricks for getting started with AngularJS in ServiceNow?  

Thanks

Rick

[xiaix]

I use Angular 2 without issue.

[ChrisBurks]

Here is a basic example of using angularjs in ServiceNow:

Basic Example

That example uses a UI page with everything in the HTML section of the form. However, if you would like to separate things you could place any javascript in the Client Script section as well as leverage the Process Script section.

Or to go further and try to mimic the MVC like structure of AngularJS you can separate your directives, controllers, or services as either UI Scripts or Macros and call those in using the corresponding jelly tags <g:include_script /> or <g:invoke_macro />.

Chris Burks

P.S. For me the tutorial found here is the best so far at a clean explanation of AngularJS and the use of the directives, controllers, services etc. Although it doesn't mention anything about using it in ServiceNow, it helped me understand how I could break the necessary pieces apart and implement those pieces into ServiceNow whether it be in the CMS section or default UI of ServiceNow instance.

[grosch]

Thanks, Chris.   I'm still a little lost how ISMP is tying it together though.   If I look at the example in Application Definition, it points at ng-example-header as the main UI Macro to run.   What is it that tell ISMP that this should be included in the ng-app-template for example?   It seems like that's what I nee dto modify...i.e. using my own template instead of this one.

[ChrisBurks]

Hi Scott,

I'm not certain that we have that ISMP application in our instance. I can't find it or maybe I don't have permissions to access it. Anyway, from your earlier reply it looks like you're trying to add a directive. I'm not sure how you tried to add the directive but you should be able to call the variable (if applicable) the module was stuffed in and then dot your directive to it.

i.e. - app.directive('myDirective', function(){ });

or call the module directly

i.e. - angular.module('nameOfModule').directive('myDirective', function(){});

you could add either of those at the beginning of it's own UI Script and as long as all the correlating pieces to the app is accessible together then it should all work.

I apologize if that's vague but again I couldn't find any reference to your example and how it's set up.

[Rick Mann]

Chris - Thanks for the great info.   In the basic example, do you know how I would go about applying a query to the http.get?   For example, I would only like to return active user accounts in the search results.   Would I construct this in the URL?  

Thanks again for the help.

<?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> </script>

  <div id='container' ng-app='myApp'>

      <h4> All Users </h4>

      <label for='doSearch'> Search </label>

      <input type='text' name='doSearch' ng-model='searchText'/>

      <ul id='users' ng-controller='UserController'>

          <li id='user' ng-repeat='user in users | filter:searchText'>

              {{user.user_name}}, {{user.first_name}} {{user.last_name}} - {{user.active}}

          </li>

      </ul>

  </div>

  <script>

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

      function UserController($scope, $http) {

          $http.get('/sys_user_list.do?JSONv2&amp;active=true')

              .success(function(data, status, headers, config) {

                  $scope.users = data.records;

              });

      }

  </script>

</j:jelly>