serviceNow widgets with angular provider

 mainly used for reusing a directive/component over and over again in side of a component or other component, note templateUrl has to be bind to a widget so if you wana re-use the same angular provider for different widgets, maybe considering using tempalte strings.

widgets: angular provider :

https://www.youtube.com/watch?v=vnDklla7Vsc

https://www.google.com/search?sca_esv=559894069&rlz=1C1GCEA_enCA1031CA1031&sxsrf=AB5stBiCN4FCXOyBUHXvLt6hdaQf9aMrpA:1692925333942&q=servicenow+can+you+add+a+widget+in+service+catalog&tbm=vid&source=lnms&sa=X&ved=2ahUKEwi7naSpzvaAAxUqGDQIHYH1BeMQ0pQJegQIDhAB&biw=1920&bih=963&dpr=1#fpstate=ive&vld=cid:380b8a22,vid:xgWLAnHoPcA

https://serviceportal.io/creating-angular-directive-service-portal/

function(){

 return {

 link: function($scope){

 $scope.displayMessage = function() {

 alert('Hello World');

 };

 },

 restrict: 'A', // use 'A' for attribute or 'E' for element 

 replace: 'true',

 template: '<div ng-click="displayMessage()" class="btn btn-primary">This is a Directive</div>'

 };

}

To use your Angular Provider you will need to associate it with a widget by linking the two together using the “Angular Providers” related list on the widget form.

Now you can use the directive within any of the HTML of that widget. For example:

<div sp-button></div> <!-- for Attribute -->

 

<sp-button></sp-button> <!-- for Element -->

// replace entire <sp-button></sp-button> withe provided tempalteUrl

replace: true. 

templateUrl -> sp_ng_template.list

scope : {

// input all must be lower cases 

field : '=', (pass in object)

input2 : '@', (pass in text)

}

css formatted by global or outer

can use $rootscope as well to pass events 

    $rootScope.$on('test', function (event, data) {

        console.log(LOG_TAG, ' - event - ', event);

        console.log(LOG_TAG, ' - data - ', data);

    });

only problem is templateUrl is bind to widget, for useability, need to use string literals