Providers

• 1: $eventBusProvider
• 2: $locationProvider
• 3: $logProvider
• 4: $sceProvider
• 5: $templateCacheProvider
• 6: $templateRequestProvider

1 - $eventBusProvider

Description

Instance of PubSubProvider for configuring the $eventBus service. The default implementation returns the global angular.EventBus instance, which is an async instance of PubSub class.

Properties

$eventBusProvider.eventBus

Customize event bus instance.

• Type: PubSub

• Default: angular.EventBus

• Example:

  angular.module('demo', []).config(($eventBusProvider) => {
    eventBusProvider.eventBus = new MyCustomPubsub();
  });
  

For service description, see $eventBus.

2 - $locationProvider

Description

Use the $locationProvider to configure how the application deep linking paths are stored.

Properties

$locationProvider.html5ModeConf

• Type: Html5Mode

• Default: { enabled: true, requireBase: false, rewriteLinks: true }

• Example:

  angular.module('demo', []).config(($locationProvider) => {
    $locationProvider.html5ModeConf.enabled = false;
  });
  

3 - $logProvider

Description

Instance of LogProvider for configuring how the application logs messages.

Properties

$logProvider.debug

Enable or disable debug-level logging. Also see debug property.

• Type: boolean

• Default: false

• Example:

  angular.module('demo', []).config(($logProvider) => {
    $logProvider.debug = true;
  });
  

Methods

$logProvider.setLogger()

Override the default logger with a custom implementation of the LogService interface.

• Parameter: LogServiceFactory

• Example:

  angular.module('demo', []).config(($logProvider) => {
    $logProvider.setLogger(() => ({
      log: () => {},
      info: () => {},
      warn: () => {},
      error: () => {},
      debug: () => {},
    }));
  });
  

For service description, see $log.

4 - $sceProvider

$sceProvider and $sce Documentation

$sceProvider

The $sceProvider provider allows developers to configure the $sce service.

• Enable/disable Strict Contextual Escaping (SCE) in a module
• Override the default implementation with a custom delegate

Read more about Strict Contextual Escaping (SCE).

$sce

$sce is a service that provides Strict Contextual Escaping (SCE) services to AngularTS.

Strict Contextual Escaping

Overview

Strict Contextual Escaping (SCE) is a mode in which AngularTS constrains bindings to only render trusted values. Its goal is to:

• Help you write secure-by-default code.
• Simplify auditing for vulnerabilities such as XSS and clickjacking.

By default, AngularTS treats all values as untrusted in HTML or sensitive URL bindings. When binding untrusted values, AngularTS will:

• Sanitize or validate them based on context.
• Or throw an error if it cannot guarantee safety.

Example — ng-bind-html renders its value directly as HTML (its “context”). If the input is untrusted, AngularTS will sanitize or reject it.

To bypass sanitization, you must mark a value as trusted before binding it.

Note: Since version 1.2, AngularTS ships with SCE enabled by default.

Example: Binding in a Privileged Context

<input ng-model="userHtml" aria-label="User input" />
<div ng-bind-html="userHtml"></div>

If SCE is disabled, this allows arbitrary HTML injection — a serious XSS risk.

To safely render user content, you should sanitize the HTML (on the server or client) before binding it.

SCE ensures that only trusted, validated, or sanitized values are rendered.

You can mark trusted values explicitly using:

$sce.trustAs(context, value);

or shorthand methods such as:

$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);

How It Works

Directives and Angular internals bind trusted values using:

$sce.getTrusted(context, value);

Example: the ngBindHtml directive uses $sce.parseAsHtml internally:

let ngBindHtmlDirective = [
  '$sce',
  function ($sce) {
    return function (scope, element, attr) {
      scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function (value) {
        element.html(value || '');
      });
    };
  },
];

Impact on Loading Templates

SCE affects both:

• The ng-include directive
• The templateUrl property in directives

By default, AngularTS loads templates only from the same domain and protocol as the main document.
It uses:

$sce.getTrustedResourceUrl(url);

To allow templates from other domains, use:

• $sceDelegateProvider.trustedResourceUrlList
• Or $sce.trustAsResourceUrl(url)

Note: Browser CORS and Same-Origin policies still apply.

Is This Too Much Overhead?

SCE applies only to interpolation expressions.

Constant literals are automatically trusted, e.g.:

<div ng-bind-html="'<b>implicitly trusted</b>'"></div>

If the ngSanitize module is included, $sceDelegate will use $sanitize to clean untrusted HTML automatically.

AngularTS’ default $sceDelegate allows loading from your app’s domain, blocking others unless explicitly whitelisted.

This small overhead provides major security benefits and simplifies auditing.

Supported Trusted Contexts

⚠️ Before AngularTS 1.7.0, a[href] and img[src] sanitized directly.
As of 1.7.0, these now use $sce.URL and $sce.MEDIA_URL respectively.

Resource URL List Patterns

Trusted and banned resource URL lists accept:

• 'self' → matches same domain & protocol
• Strings with wildcards:
  • * → matches within a single path segment
  • ** → matches across path segments (use carefully)
• Regular expressions (RegExp)

Caution: Regex patterns are powerful but harder to maintain — use only when necessary.

Disabling SCE (Not Recommended)

You can disable SCE globally — though this is strongly discouraged.

angular.module('myAppWithSceDisabled', []).config(function ($sceProvider) {
  // Completely disable SCE. For demonstration purposes only!
  // Do not use in new projects or libraries.
  $sceProvider.enabled(false);
});

5 - $templateCacheProvider

Description

Initializes cache instance for $templateCache service as an empty Map object.

An alternative caching implementation can be provided by implementing TemplateCache interface for web standard storage options like localStorage, sessionStorage, IndexedDB, or Cache API. You can also use third-party storage engines like pouch or SQLite. With WebAssembly (WASM), even more powerful and flexible storage backends become possible.

Below is an example implementation using localStorage:

class LocalStorageMap {
  constructor(prefix = '') {
    this.prefix = prefix;
  }

  _key(key) {
    return `${this.prefix}${key}`;
  }

  get(key) {
    const raw = localStorage.getItem(this._key(key));
    if (raw === null) return undefined;
    try {
      return JSON.parse(raw);
    } catch {
      return raw;
    }
  }

  set(key, value) {
    localStorage.setItem(this._key(key), value);
    return this;
  }

  has(key) {
    return localStorage.getItem(this._key(key)) !== null;
  }

  delete(key) {
    localStorage.removeItem(this._key(key));
    return true;
  }

  clear() {
    const toRemove = [];
    for (let i = 0; i < localStorage.length; i++) {
      const k = localStorage.key(i);
      if (k && k.startsWith(this.prefix)) {
        toRemove.push(k);
      }
    }
    toRemove.forEach((k) => localStorage.removeItem(k));
  }
}

Override during configuration phase:

angular.module('demo', []).config(($templateCacheProvider) => {
  templateCacheProvider.cache = new LocalStorageMap();
});

Properties

$templateCacheProvider.cache

Customize cache instance.

• Type: TemplateCache

• Default: Map

• Example:

  angular.module('demo', []).config(($templateCacheProvider) => {
    templateCacheProvider.cache.set('test.html', 'hello');
  });
  

For service description, see $templateCache.

6 - $templateRequestProvider