Providers

• 1: $anchorScrollProvider
• 2: $cookieProvider
• 3: $eventBusProvider
• 4: $exceptionHandlerProvider
• 5: $locationProvider
• 6: $logProvider
• 7: $sceProvider
• 8: $templateCacheProvider
• 9: $templateRequestProvider

1 - $anchorScrollProvider

Description

Instance of AnchorScrollProvider for configuring the $anchorScroll service.

Used to enable or disable automatic scrolling when URL hash is changed by $location service.

Properties

$anchorScrollProvider.autoScrollingEnabled

Enable or disable automatic scrolling on URL hash change

• Type: Boolean

• Default: true

• Example:

  angular.module('demo', [])
    .config([
      "$anchorScrollProvider",
      /** @param {ng.AnchorScrollProvider} $anchorScrollProvider */
      ($anchorScrollProvider) => {
        anchorScrollProvider.autoScrollingEnabled = false;
      }
    ]);
  

For service description, see $anchorScroll.

2 - $cookieProvider

Description

Instance of CookieProvider for configuring the $cookie service.

It allows you to set global default options that will apply to all cookies created, updated, or removed using the $cookie service.

Properties

$cookieProvider.defaults

The defaults property defines global cookie settings. These values are applied to the $cookie service at initialization, and every cookie created through $cookie.put() or $cookie.putObject() will automatically inherit these defaults, unless overridden per-cookie.

• Type: CookieOptions
• Default: {}
• Options:

  Property	Type	Description
  path	string	URL path the cookie belongs to. Defaults to the current path. Commonly set to '/' to make cookies accessible across the entire site.
  domain	string	The domain the cookie is visible to. Useful for subdomains (e.g., .example.com).
  expires	Date	Expiration date. If omitted, the cookie becomes a session cookie (deleted on browser close).
  secure	boolean	If true, the cookie is only sent over HTTPS.
  samesite	"Strict" | "Lax" | "None"	Controls cross-site cookie behavior. Required when secure: true and cross-site use is intended.
  httponly	Not supported.	Browser JS cannot set HttpOnly cookies. This must be done on the server.

• Example:

  angular
    .module('demo', [])
    .config([
      '$cookieProvider',
      /** @param {ng.CookieProvider} $cookieProvider */
      ($cookieProvider) => {
        $cookieProvider.defaults = {
          path: '/',
          secure: true,
          samesite: 'Lax'
        };
      }
    ]);
  

For service description, see $cookie.

3 - $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",
      /** @param {ng.PubSubProvider} $eventBusProvider */
      ($eventBusProvider) => {
        eventBusProvider.eventBus = new MyCustomPubsub();
      }
    ]);
  

For service description, see $eventBus.

4 - $exceptionHandlerProvider

Description

Instance of ng.ExceptionHandlerProvider for configuring the $exceptionHandler service.

The default implementation returns ng.ExceptionHandler function, which simply rethrows the exception.

NOTE: custom implementations should always rethrow the error as the framework assumes that $exceptionHandler always does the throwing.

Properties

$exceptionHandler.handler

Customize the exceptionHandler function.

• Type: ng.ExceptionHandler
• Default: Function that rethrows the exception.
• Example:

  angular.module('demo', [])
    .config([
      "$exceptionHandlerProvider",
      /** @param {ng.ExceptionHandlerProvider} $exceptionHandlerProvider */
      ($exceptionHandlerProvider) => {
        exceptionHandlerProvider.handler = (error) => {
          myLogger.capture(error);
          // Rethrow to preserve fail-fast behavior:
          throw error;
        };
      }
    ]);
  

For service description, see $exceptionHandler.

5 - $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;
  });
  

6 - $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.

7 - $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);
});

8 - $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.

9 - $templateRequestProvider