在AngularJS中注入ng-bootstrap时出现错误的技术咨询

看起来你在给AngularJS项目集成Bootstrap组件库时踩了几个常见的坑——先说明下：AngularJS对应的Bootstrap组件库其实叫ui-bootstrap，现在的ng-bootstrap是给Angular 2+框架用的，这一点别搞混。我帮你梳理下问题和解决办法：

先排查当前引入的核心问题 #

你现在的脚本加载有两个明显错误：

• 重复引入AngularJS：同时加载了本地的angular.min.js和CDN的1.4.8版本angular.js，这会导致AngularJS的全局上下文冲突，直接引发模块注入失败。
• 缺少ui-bootstrap核心脚本：完全没引入对应的组件库文件，自然没法向Angular模块注入它。

修复步骤 #

1. 清理并调整脚本引入顺序 #

先删掉重复的AngularJS脚本，然后添加对应版本的ui-bootstrap，注意脚本加载顺序必须严格遵循：jQuery → AngularJS → Angular路由 → ui-bootstrap。修改后的代码如下：

<script type="text/javascript" src="js/lib/jsapi.js"></script>
<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<!-- 保留统一版本的AngularJS（这里用1.4.8） -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<!-- 引入和AngularJS 1.4.8兼容的ui-bootstrap版本（2.5.6是适配的稳定版） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.6/ui-bootstrap-tpls.min.js"></script>

小提示：带tpls的版本包含了组件默认的模板文件，新手直接用这个版本可以省掉自定义模板的麻烦。

2. 正确注入ui-bootstrap模块到你的应用 #

在定义AngularJS模块时，把ui.bootstrap作为依赖项添加进去，示例代码：

// 替换成你自己的应用名称
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);

3. 测试组件是否正常工作 #

比如你可以用一个简单的模态框来验证，在控制器中注入$uibModal：

myApp.controller('DemoController', function($scope, $uibModal) {
  $scope.openModal = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'modal-template.html', // 你需要创建这个模板文件
      controller: function($scope, $uibModalInstance) {
        $scope.close = function() {
          $uibModalInstance.dismiss('cancel');
        };
      }
    });
  };
});

额外注意事项 #

• 确保jQuery版本在1.9以上，才能适配ui-bootstrap 2.x版本。
• 如果还是报错，打开浏览器控制台（F12）看具体信息：比如有没有脚本加载404，或者模块名称拼写错误（比如把ui.bootstrap写成ng-bootstrap）。

内容的提问来源于stack exchange，提问作者sathish kumar