In this Tutorial, we’ll take a look at AngularStrap, the Bootstrap plugins it allows us to use, and how we can utilize these in our application.
First of all, you need to download AngularStrap. You can fetch it from http://mgcrea.github.io/angular-strap/. Click on the download button on the top right and download the latest version as a ZIP file.
Within the ZIP file are all of the single modules, as well as everything in a handy minified file. You’ll find the two files we’re looking for inside the
dist directory. Copy
angular-strap.tpl.min.js into your project’s
js directory. Once you’ve done that, include them in your root
index.html file after Angular and before your project module:
As with every module, we need to inject this into our application. Our declaration is located in the first line of
controller.js; the name of the AngularStrap module is
mgcrea.ngStrap. Below we’ve added AngularStrap as a dependency on our
angular.module('contactsMgr', ['ngRoute', 'ngSanitize', 'mgcrea.ngStrap'])
That’s not all we need to do here, unfortunately. AngularStrap depends on the
ngAnimate module that we’re yet to include in our project. We can find this under the Extras link in the download modal window at https://angularjs.org/.
Add the minified version to your project’s
js directory and include it before AngularStrap:
ngAnimate module doesn’t need to be injected into our project unless we want to use it outside of the Bootstrap directives. It allows us to use CSS animations on things such as
ngHide so that we can fade things rather than having them just appear.
If we wanted, we could build our own animations to use alongside AngularStrap. However, the AngularStrap creator also maintains AngularMotion as a perfect companion. AngularMotion is simply a style sheet that contains pre-made animation ready for use with the
We can download the latest release from http://mgcrea.github.io/angular-motion/ using the download button at the top right. Again, the ZIP file we’re provided gives us the source files as well as the minified production-ready version, which we can find in the
dist directory. Copy this over to your project and include it as a secondary style sheet on the page:
<link rel="stylesheet" href="/assets/css/angular-motion.min.css">
We’ll now be able to use the fade, slide, scale, and flip animations provided by AngularMotion in tandem with the AngularStrap directives.
You may find it strange that we don’t need to include Bootstrap’s plugins script at all. This is because the directives we’ve included with AngularStrap aren’t just wrapper functions that execute jQuery, but instead complete rewrites that fully take advantage of Angular.