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

[Shawn Dowler]

I never came back here and responded to this after I learned the answer. I recommend following the lab guide at AngularJS: Developing Modern User Interfaces for the entire answer. The short version of the answer is to create UI Macros for the snippets you want to reference using templateUrl.

Create a global UI script called service.uiMacroTemplate

angular.module('sn.uiMacro', []);
angular.module('sn.uiMacro').service('uiMacroTemplate', function() {
   return function(templateName) {
       return 'AJAXJellyRunner.do?template=' + templateName;
   }
});

Now you can add

<script></script>

to the top of your UI page with the other script tags. Then add sn.uiMacro to the app dependencies in the angular.module list in your UI script that defines your app. Finally you can create a directive to use templateUrl: and the URL should be uiMacroTemplate('name_of_ui_macro_with_partial_code').

Hopefully that's enough to get you started.

[jeremyg]

Shawn, your response helped very much. Thanks! Since I want to access templateUrl from the angular app's config (because I am using templateUrls in routes) I created a factory (which creates a provider automatically, though I could also just use a provider directly). I wonder if there are plans by ServiceNow to better support this (and general use of URLs in an Angular app hosted on ServiceNow in general), and to support hosting files in a hierarchy in general (as a complex Angular app can have many files). Do you have any other tips for working on a more complex Angular app on ServiceNow as far as developer workflow? Do you do development locally and then copy your files to service now (UI Scripts & UI Pages), or work on ServiceNow directly via the flat file structures for UI Scripts & UI Pages?

[Shawn Dowler]

I haven't deployed any AngluarJS apps to production yet, but the proof of concept apps I've just use the app creator for managing the files. I have done the development in ServiceNow, but I agree that there is a lot of bouncing around necessary. I try to use a prefixed naming convention for the files, too, so I can keep them all straight. All of the files for a certain app all have the same prefix.

Geneva has some nice features that makes bouncing between UI Pages, UI Macros, UI Scripts and Script Includes a little bit easier, but I suspect we will see better support once the new Service Portal is released (currently it's only available as a "preview" plugin from ServiceNow Support.

[xiaix]

Ben, thanks for the great video.   I was able to download the Accelerator App and get it integrated to our ServiceNow Dev environment (currently running "Fuji").

Only one issue so far.   All my {{   }} are getting shown as just that, brackets instead of parsed AngularJS data.

Here are some screen shots explaining.   I'm sure I'm missing something simple:

[greg54]

David,

Taking a shot in the dark here because I am not sure of all of the ways to declare a module, but should your code be:

angular.module('testing', []);

instead of angular.modular('testing', []);