javascript - 将 Bootstrap UI 模块添加到 angularjs 项目

Question

我正在尝试将 bootstrap-ui 模块添加到我的 angular.js 项目中。该文档指出我只需添加

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

让这个工作。但我不知道如何以任何方式添加它。我已阅读 https://docs.angularjs.org/guide/module 的整章并阅读了很多有关它的帖子，但到目前为止我测试的所有内容都不起作用。

我的app.js:

angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
// followed by my routing

myCtrl

angular.module('MyApp')
    .controller('MyCtrl', ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService',
        function ($scope, $location, $rootScope, $routeParams, $resource, $alert, MyService) {

我尝试过:

• 在app.js中的'mgcrea.ngStrap'之后添加'ui.bootstrap'
• 在 myCtrl 中的 *'MyService' 之后添加 'ui.bootstrap'
• 还有更多类似的变体

我收到的错误消息取决于我所做的事情。因为我现在可能完全走在错误的道路上，所以我希望有人能告诉我如何正确地在 angular.js 中添加模块？

编辑我遇到的一些错误消息:

当我开始我的 Crtl 代码时:

angular.module('MyApp', ['ui.bootstrap'])

我明白

[ng:areq] Argument 'NavbarCtrl' is not a function, got undefined

(navbarctrl是一个完全不同的ctrl)

当我用

启动我的 app.js 时

angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap', 'ui.bootstrap'])

我明白了

TypeError: object is not a function

在我的 AuthService 中，我尝试使用 $alert (这无需 bootstrap-ui 即可工作)，例如

$alert({
    title: 'Success!', //...

**编辑2:**问题似乎是我只能使用 ngStrp 或 ui.bootstrap (两者都在下面使用 bootstrap)

Answer 1

您是否确保 Angular UI 特定的 JS 文件通过捆绑或直接引用从服务器发送到客户端？

你必须在你的应用程序中注入(inject)模块的依赖项:像这样的 angular.module('MyApp', ['ui.bootstrap']);