Very quick tutorial on how to integrate Bootstrap UI with AngularJS in a just few minutes. I’ve added some notes to answer common questions which you might be thinking when your installing and trying to get custom directives to work.
Prerequisites
Note: Only Bootstrap css is required for Bootstrap UI.
Step1
Step2
Include it in your app:
Manually
|
1 2 3 |
<script type="text/javascript" src="/js/vendor/ui-bootstrap.min.js"></script> |
Or using Grunt (I’m using Lineman and add it to my config/files.js) then it gets auto compiled by Grunt into app.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
js: { vendor: [ "vendor/js/core/jquery.min.js", "vendor/js/core/bootstrap.js", "vendor/js/core/angular.js", "vendor/js/core/ui-bootstrap.min.js", "vendor/js/core/*.js", "vendor/js/plugins/*.js", "vendor/js/*.js" ], app: [ "app/js/app.js", "app/js/**/*.js" ] } |
Note: Inclusion of jQuery is optional.
Step3
Inject it into your main app module.
|
1 2 3 4 5 |
angular.module("app", ["ngResource", "ngRoute", "ui.bootstrap"]).run(function($rootScope) { ... }); |
Step4
Add this to your CSS to fix a known bug to do with removing hrefs.
|
1 2 3 |
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; } |
That’s it now you can start using the bootstrap directives in your ngTemplates.
Step5
If you want to reuse your components you may need to create controllers so each directive gets it’s own controller injected.
For example, you want to include multiple collapse elements on a page.
ngHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!-- collapse 1 --> <div ng-controller="CollapseCtrl"> <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Interests</button> <div collapse="isCollapsed"> <div class="well well-lg"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <!-- collapse 2 --> <div ng-controller="CollapseCtrl"> <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Change Password</button> <div collapse="isCollapsed"> <div class="well well-lg"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> |
collapse_controller.js
|
1 2 3 4 5 |
function CollapseCtrl($scope) { $scope.isCollapsed = false; } |
Output
Now each bootstrap collapse has a controller and uses it’s own isCollapsed variable.
Nice write-up but actually it can be done even simpler – since doesn’t have dependency on Bootstrap’s JavaScript, you don’t need to include jQuery nor Bootstrap’s JavaScript. In practice it means that you don’t need to include “vendor/js/core/jquery.min.js” nor
“vendor/js/core/bootstrap.js”. Maybe it would be good to correct your article?
Thanks Pawal, yes your right here however, I should add that they are optional depending on your app requirements.
Sam