How can I incorporate Angular Bootstrap into my AngularJS application correctly?
By manually including external versions of the libraries in the index.html file, everything works perfectly with Angular Bootstrap:
<!-- 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2849464f5d44495a425b6819061d0618">[email protected]</a>"></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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5844004f4242595e595f4c5d6d1d031c1e031c">[email protected]</a>" 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabfa3e7a8a5a5beb9beb8abba8afae4fbf9e4fb">[email protected]</a>" 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 -->
Yet, things take a turn for the worse when attempting to manage the dependencies automatically, resulting in the app failing to compile (leaving only HTML content for the browser).
After exploring a similar query on Stack Overflow, I followed the advice and tried the following steps:
[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]$
This led to Bower generating a new set of includes in the index.html to replace the manual ones:
<!-- 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 -->
Also, within bower.json, the following dependencies were specified:
{
"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"
]
}
}
}
Although the traditional method of including HTTP links works fine, I've included my way of injecting ui.bootstrap into the app modules as an extra reminder:
angular
.module('app', ['ngAnimate', 'ngRoute', 'ngTouch',
'auth', 'home', 'secure', 'public1', 'navigation',
'ui.bootstrap' ])
In what particular ways should the above configurations be modified to seamlessly integrate Angular Bootstrap from the local Bower directories?