Page

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.

Demo

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

Markup

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

<script type="text/ng-template" id="demo/page/notfound.html">
    <bb-error bb-error-type="notFound">
        <bb-error-action>
            <button type="button" class="btn-primary btn" ng-click="pageCtrl.returnHome()">Return to another page</button>    
        </bb-error-action>
    </bb-error>
</script>
<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>
</script>

JavaScript

/*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() {
            simulateLoading();
            $location.path('/').replace();
        }

        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';

        $stateProvider
            .state('default', {
                url: '/',
                templateUrl: 'demo/page/buttons.html'
            })
            .state('notFoundState', {
                url: '/notfound',
                templateUrl: 'demo/page/notfound.html'
            });

        $urlRouterProvider.otherwise('/');
    }

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

    angular.module('stache')
        .controller('PageTestController', PageTestController)
        .config(bbPageSetup);
}());