How to use the material-components-web.topAppBar function in material-components-web

var _ = require('underscore')
  , $ = require('jquery')
  , moment = require('moment')
  , MDCRipple = require('material-components-web').ripple.MDCRipple
  , MDCTopAppBar = require('material-components-web').topAppBar.MDCTopAppBar
  , MDCTextField = require('material-components-web').textField.MDCTextField;

module.exports = function observationView() {
  var directive = {
    restrict: "E",
    template:  require('./observation-view.directive.html'),
    scope: {
      observation: '=observation',
      event: '=event'
    },
    controller: ObservationViewController
  };

  return directive;
};
ObservationViewController.$inject = ['$scope', '$element', '$uibModal', 'EventService', 'UserService', 'LocalStorageService', '$timeout', 'MapService'];

var _ = require('underscore')
  , MDCTopAppBar = require('material-components-web').topAppBar.MDCTopAppBar;

module.exports = function userView() {
  var directive = {
    restrict: "E",
    template:  require('./user-view.directive.html'),
    scope: {
      user: '=user',
      event: '=event',
      observations: '=observations'
    },
    controller: UserViewController
  };

  return directive;
};
UserViewController.$inject = ['$scope', '$element', 'MapService'];

var angular = require('angular')
  , _ = require('underscore')
  , MDCTopAppBar = require('material-components-web').topAppBar.MDCTopAppBar;

module.exports = function formDirective() {
  var directive = {
    template: require('./form.directive.html'),
    restrict: 'E',
    transclude: true,
    scope: {
      form: '=',
      observation: '=formObservation',
      preview: '=formPreview'
    },
    controller: FormDirectiveController
  };

  return directive;
};