The page directive handles functionality around loading pages.

Page settings

  • bb-page
    • bb-page-status — Indicates the status of the page.
      • LOADING — Denotes that the page is loading.
      • LOADED — Denotes that the page loaded successfully.
      • NOT_AUTHORIZED — Denotes that the page loaded and displays a message that the user does not have right to view the content on the page.
      • NOT_FOUND — Denotes that the page was not found and redirects to the not-found URL specified in bb-page-config.
    • bb-page-uses-load-manager — Allows the page to use the bb-data load manager to detect when components within bb-page are loading.
  • bb-page-config — A global configuration object that applies options to pages throughout an application.
    • redirectUrl(Optional.) Provides a URL for the NOT_AUTHORIZED redirect button. If you do not specify a URL, the NOT_AUTHORIZED redirect button sends users to the website root.
    • notFoundUrl(Optional.) Provides a URL to set $location.path to when bb-page-status is NOT_FOUND.


This text represents the content on a page, and the buttons simulate loading the page.


<div ng-controller="PageTestController as pageCtrl">
    <bb-page bb-page-status="pageCtrl.pageStatus">   
       This text represents the content on a page, and the buttons simulate loading the page.

<script type="text/ng-template" id="demo/page/notfound.html">
    <bb-error bb-error-type="notFound">
            <button type="button" class="btn-primary btn" ng-click="pageCtrl.returnHome()">Return to another page</button>    
<script type="text/ng-template" id="demo/page/buttons.html">
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateLoading()">Simulate loading</button>
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateNotAuthorized()">Simulate not authorized</button>
    <button type="button" class="btn bb-btn-secondary" ng-click="pageCtrl.simulateNotFound()">Simulate not found</button>


/*global angular */
(function () {
    'use strict';

    function PageTestController($scope, $timeout, bbPage, $location) {
        var self = this;

        function simulateLoading() {
            self.pageStatus = bbPage.pageStatuses.LOADING;

            $timeout(function () {
                self.pageStatus = bbPage.pageStatuses.LOADED;
            }, 1500);

        function simulateNotAuthorized() {
            self.pageStatus = bbPage.pageStatuses.NOT_AUTHORIZED;

        function simulateNotFound() {
            self.pageStatus = bbPage.pageStatuses.NOT_FOUND;

        function returnHome() {

        self.pageStatus = bbPage.pageStatuses.LOADED;
        self.simulateLoading = simulateLoading;
        self.simulateNotAuthorized = simulateNotAuthorized;
        self.simulateNotFound = simulateNotFound;
        self.returnHome = returnHome;

    PageTestController.$inject = ['$scope', '$timeout', 'bbPage', '$location'];

    function bbPageSetup(bbPageConfig, $stateProvider, $urlRouterProvider) {
        bbPageConfig.redirectUrl = '/components';
        bbPageConfig.notFoundUrl = '/notfound';

            .state('default', {
                url: '/',
                templateUrl: 'demo/page/buttons.html'
            .state('notFoundState', {
                url: '/notfound',
                templateUrl: 'demo/page/notfound.html'


    bbPageSetup.$inject = ['bbPageConfig', '$stateProvider', '$urlRouterProvider'];

        .controller('PageTestController', PageTestController)