Require JS with Bootstrap-ui

Question

I would like to know how I can incorporate boostrap-ui as a dependency(require JS) in order to work with angular.
Current Issue I face is that when injecting the dependency and when i do console log on bootstrapUi it returns undefined.

Current code for app config:

require.config({
  baseUrl: "../",
  paths: {
    "angular": "assets/libs/angular.min",
    "jquery": "assets/libs/jquery-2.2.2",
    "bootstrapUi": "assets/libs/ui-bootstrap-1.3.1.min"
  },
  "shim": {
      "angular": {
        deps: ["jquery"],
        exports: "angular"
      },
       "bootstrapUi": {
           deps: ["angular"],
           exports: "bootstrapUi"
       }
  }
});

require(["app.main", "app.controllers"], function(app) {
    app.init();
});

Current code for App controller:

define(["app.main", "bootstrapUi"], function (app, bootstrapUi) {
    app.controller("loginCtrl", function () {
        bootstrapUi.alert("Hello Wolrd!");
    });
});

When above is called I receive error "Cannot read property 'alert' of undefined"

What I'm trying to achieve is using the dependency in order to create a modal.

Answer 1

Angular-ui-boostrap creates a module called 'ui.bootstrap'. In order to use it with requireJS, you have to require the javascript and then add the module it creates as a dependency of your angular application.

define(['angular', 'bootstrapUi'], function(){

    angular.module('app', ['ui.bootstrap']);

});

To use the modal, follow de documentation: ui-bootstrap modal docs.