How to use AngularJS with Bootstrap 4

We are providing an example of AngularJS app with Bootstrap. To develop this app, we have used HTML, CSS and AngularJS.


tutorials - 22 July, 2019

How to use AngularJS with Bootstrap 4

Bootstrap and AngularJS are tools that a great number of people use. Often times, they are used together in projects. And why shouldn't they be? They are both incredible tools that have changed the way CSS and JS work on the frontend.

There is a problem when using them together though, specifically when you try to bring in the Bootstrap JavaScript components into an Angular project. When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary. This is an important concept to grasp since bringing jQuery into your Angular project will make it harder for you to fully grasp the power of Angular and its data-binding goodness.

If you want to change the view in some way, it is a good practice to change your views based on your Angular data. We'll examine exactly what this means in this article since the Bootstrap JS components provide an opportunity to learn the differences in how jQuery and Angular are used differently for the same goals (like an accordion).

Today, we'll be looking a bit at the problems of Bootstrap JS and Angular together, why you shouldn't use the Bootstrap JS library that relies on jQuery, and the best alternative to get the Bootstrap JS components we know and love into our Angular projects (UI Bootstrap).

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.4.x or higher, tested with 1.6.1). 0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
  • Angular-animate (the version should match with your angular's, tested with 1.6.1) if you plan in using animations, you need to load angular-animate as well.
  • Angular-touch (the version should match with your angular's, tested with 1.6.1) if you plan in using swipe actions, you need to load angular-touch as well.
  • Bootstrap CSS (tested with version 3.3.7). This version of the library (2.5.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is fairly small: 122K minified for all directives with templates and 98K without (~31kB with gzip compression, with templates, and 28K gzipped without)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module:

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

 

If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the ui-bootstrap-csp.css in your HTML manually.

You can fork one of the plunkers from this page to see a working example of what is described here.

Migration to prefixes

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

CSS

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

FAQ

Please check our FAQ section for common problems / solutions.

Reading the documentation

Each of the components provided in ui-bootstrap have documentation and interactive Plunker examples.

For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

  •  - This setting has an angular $watch listener applied to it.
  • B - This setting is a boolean. It doesn't need a parameter.
  • C - This setting can be configured globally in a constant service*.
  • $ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.
  • readonly - This setting is readonly.

For the services (you will recognize them with the $ prefix), we list all the possible parameters you can pass to them and their default values if any.

Conclusion

I'd encourage you to look through the UI Bootstrap Docs to see all the directives they provide to match the Bootstrap JS components.

Just keep in mind that this great tool exists when integrating Bootstrap JavaScript and Angular. The directives are there to make projects easier to deal with and create them in the Angular way.

Thanks for reading and sound off in the comments if you have any questions, know of any other tools, or just really like UI Bootstrap.

Our Sponsors

NodeJS Experts
React Experts
PHP Experts
AngularJS Experts
Aws Experts
Firebase Experts

Top Applications in TutorialStuff

Top Experts In TutorialStuff

Trending On TutorialStuff

04.

Develop a Vue SPA With Laravel Part 6

tutorials - 17 July, 2019

05.

Develop a Vue SPA with Laravel Part 5

tutorials - 17 July, 2019

06.

Develop a Vue SPA with Laravel Part 4

tutorials - 17 July, 2019

07.

Develop a Vue SPA with Laravel part 3

tutorials - 17 July, 2019

08.

Develop a Vue SPA with Laravel part 2

tutorials - 17 July, 2019

09.

Develop a Vue SPA with Laravel

tutorials - 17 July, 2019