Complete Guide to Angular Strap for beginners

I guess you have already taken a look at the huge number of components that Bootstrap offers, but we’ve yet to look at how we can utilize the JavaScript plugins available to us. We could create our own directives for each of the plugins we wish to use, but the Angular community already has a module full of them called AngularStrap.

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.

Installing AngularStrap

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.min.js and 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:

<script type="text/javascript" src="/assets/js/angular-strap.min.js"></script>
<script type="text/javascript" src="/assets/js/angular-strap.tpl.min.js"></script>

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 contactsMgr module:

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:

<script type="text/javascript" src="/assets/js/angular-animate.min.js"></script>

The 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 ngShow and 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 ngAnimate module.

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.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)