Naming conventions for angular objects

Namespacing helps you to organize the objects of your Digital Service application so that they can be identified uniquely when shared and collisions with other objects or variables in the global namespace are avoided.  

To ensure global uniqueness of angular object names in the shared JavaScript code of your application, you must ensure that you follow the following naming conventions:

• All angular object names in shared code (services, factories, providers, controllers, directives, constants, filters) must be prefixed with bundle ID and converted to camelCase (for example, comExampleTaskmanagerTmsServiceOne).
  Following sample code shows how to apply namespacing for angular objects:

  /**
  * The code BEFORE applying the namespacing changes
  */
    
  angular.module('com.example.taskmanager.services')
      .service('tmsServiceOne', function (tmsServiceTwo) {});
     
  angular.module('com.example.taskmanager.services')
      .service('tmsServiceTwo', function () {});
    
  angular.module('com.example.taskmanager.filters')
      .filter('tmsFilter', function (...) {});
   
  angular.module('com.example.taskmanager.view-components')
      .directive('tmsViewComponent', function (...) {});
    
  /**
  * The code AFTER applying the namespacing changes
  */
    
  // NOTE: DI annotations can be added explicitly as shown below in order to keep the short names for the function parameters
  angular.module('com.example.taskmanager.services')
      .service('comExampleTaskmanagerTmsServiceOne', ['comExampleTaskmanagerTmsServiceTwo', function (tmsServiceTwo) {}]);
    
  angular.module('com.example.taskmanager.services')
      .service('comExampleTaskmanagerTmsServiceTwo', function () {});
   
  angular.module('com.example.taskmanager.filters')
      .filter('comExampleTaskmanagerTmsFilter', function (...) {});
   
  angular.module('com.example.taskmanager.view-components')
      .directive('comExampleTaskmanagerTmsViewComponent', function (...) {});

• All HTML filenames in shared code (for example, view and directive templates) must be prefixed with the bundle ID.
  Following sample code shows how to apply namespacing for HTML files:

  angular.module('com.example.taskmanager.view-components')
      .directive('comExampleTaskmanagerTmsViewComponent', function () {
          return {
              templateUrl: 'scripts/view-components/com-example-taskmanager-tms-view-component.directive.html',
              ...
          };
      });

Related topics

Creating custom view components

Example of creating a custom view component

Creating custom view components for record editor

Creating custom actions