Skip navigation

Developer Community

1 Post authored by: Ben Phillips

angularjs servicenow.jpegAngularJS is a powerful framework developed to make HTML more usable for web applications. It can be used in ServiceNow instances to build powerful and dynamic single-page apps in the CMS, in scoped applications, or just as a standalone UI page. It is also a great alternative to building Jelly templates, a trait many SN developers cheer heartily.


JohnAndersonMX42 has written a few very useful blog posts about AngularJS in ServiceNow as well, such as Adding AngularJS and other Javascript Libraries to your Instance and a mini-series on his personal site http://www.john-james-andersen.com. Be sure to check those out if interested.


I'm a firm believer in baby steps, so our goal in this tutorial will be very simple: to install the AngularJS framework and create a single-UI-page Angular app that returns a message "Hello from Angular!" from your Angular controller.


At the end of this tutorial you will:

  • Have the AngularJS library installed on your instance
  • Know the right syntax to include Angular in a UI page or application
  • Know how to declare an Angular module and controller, and get it to successfully update your view (your HTML).

 

1. Install the AngularJS Library

 

The AngularJS library does not come pre-installed in ServiceNow. To develop with AngularJS, we will need to install it manually as a UI Script.

  1. Go to https://angularjs.org/ and click the blue Download button. 
  2. For branch, pick the latest, then copy the link for the CDN. Paste this url into your browser's address bar.
  3. Select the entire contents of that script and copy it to your clipboard. 
  4. Now go to your instance, and go to UI Scripts.
  5. Click "New". Name it "angular.min", set to Global, set to Active, and click Submit.
  6. Now that you are back in the list view on the UI Scripts table, make sure you can view the "Script" column on your view. Double-click the Script cell on your angular.min row and paste the contents of your clipboard into it.
  7. Hit enter.

 

The library is now installed on your instance!

Screen Shot 2015-08-27 at 3.47.19 PM.png

 

2. Create a new UI page


Now that the AngularJS library is installed on your instance, create a new UI page by going to System UI > UI Pages. Name it “Angular Hello World.” On line 3, under the jelly start tag, we are going to include the Angular library with a g:requires tag. Put this code on line 3 to require our Angular library when the UI page loads:

 

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



















 

 

3. Define your Angular module


Now that we are including AngularJS in our UI page, we are going to declare our angular module. You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

 

At line 4, add this code to declare your Angular module. We are going to call our module angularHelloWorldApp.

 

<!-- angular modules -->
<script type="text/javascript">var app = angular.module("angularHelloWorldApp",[]);</script>



















 

And save. Our Angular module is now defined.


Now we need to link our module to our DOM. We do this by putting "ng-app" into an HTML element. The "ng-app" is a directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags. (more)

 

Insert a body tag on line 4 just under your <g:requires> tag, and link the app to it like this:

 

<body ng-app="angularHelloWorldApp">
</body>



















 

 

4. Define the Controller


The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern. (more) We will be using our controller as a place to store properties with values that we will later send into our view (our HTML). On line 8, just above your </j:jelly> closing tag and below your module, put:

 

<!-- angular controllers -->
<script type="text/javascript">
  app.controller('MainController', ['$scope', function($scope) {
      $scope.greeting = "Hello from Angular!";
  }]);
</script>



















 

Our $scope data property will allow us to access data from Angular in our DOM. We will be able to access our greeting property in our HTML soon. Now, we'll tie the controller to our DOM. On line 4, insert these on new lines inside of the <body></body> tags:

 

  <div ng-controller="MainController">
      <h1>{{ greeting }}</h1>
  </div>



















 

We just tied our controller to this div, then inside of an h1 tag we used an Angular expression which will query our Angular scope data for a property named greeting, and should return the value of it, rendering it as HTML.

Now that we have defined our Angular module, bound it to our HTML body element, defined our controller, bound that to a div tag, and included an expression, it's time to try it out! Click Try It.


If you see Hello from Angular! then congratulations! You just used Angular to populate and manipulate your HTML document.


Here is what my final markup looks like on the UI Page:

<?xml version="1.0" encoding="utf-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null" trim="false">
  <g:requires name="angular.min.jsdbx"/>
    <body ng-app="angularHelloWorldApp">
        <div ng-controller="MainController">
            <h1>{{ greeting }}</h1>
        </div>
    </body>
    <!-- angular modules -->
    <script type="text/javascript">var app = angular.module("angularHelloWorldApp",[]);</script>
    <!-- angular controllers -->
    <script type="text/javascript">
      app.controller('MainController', ['$scope', function($scope) {
            $scope.greeting = "Hello from Angular!";
      }]);
  </script>
</j:jelly>





 

For more information, review:

Filter Blog

By date: By tag: