Question

如何正确地将角度引导注入angularjs应用程序？

当我在index.html中使用以下代码手动包含远程版本的库时，角度引导程序：

<!-- start manual dependencies for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="angularjs@1.5.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-cookies.js"></script>
<link data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js"></script>
<!-- end manual dependencies for testing purposes -->

然而，该应用程序停止编译（意味着JavaScript根本不起作用，只有html被提供给浏览器）当我尝试自动管理依赖项时 。

我读了this other posting on the same topic并尝试了如下建议，所以这不是重复的帖子：

[user@localhost client]$ bower install angular-bootstrap
bower cached        git://github.com/angular-ui/bootstrap-bower.git#1.2.5
bower validate      1.2.5 against git://github.com/angular-ui/bootstrap-bower.git#*
[user@localhost client]$

Bower然后在index.html中生成以下包含列表，替换上面显示的手册包含：

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->

bower.json包含以下内容：

{
  "name": "client",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.4.0",
    "angular-aria": "^1.4.0",
    "angular-cookies": "^1.4.0",
    "angular-messages": "^1.4.0",
    "angular-resource": "^1.4.0",
    "angular-route": "^1.4.0",
    "angular-sanitize": "^1.4.0",
    "angular-touch": "^1.4.0",
    "angular-bootstrap": "^1.2.5"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "clientApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  }
}

由于应用程序在使用顶部的http包含时正确编译并运行JavaScript，因此您实际上不需要知道我是如何将ui.bootstrap注入到应用程序模块中的，但我包括如下的彻底性：

angular
  .module('app', ['ngAnimate', 'ngRoute', 'ngTouch', 
      'auth', 'home', 'secure', 'public1', 'navigation',
      'ui.bootstrap' ])

为了从本地bower文件夹成功将角度引导注入应用程序，需要对上述内容进行哪些具体更改？

Answer 1

我不知道您使用什么来自动化文件路径，但它缺少angular-bootstrap主js文件。您需要和模板（您已经包含），如下所示：

<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

为什么没有注入角度自举？

1 个答案: