<div class="bs-docs-section">

<div class="page-header">

<h1 id="getting-started">Getting started <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/README.md" target="_blank">readme.md</a>

</h1>

<code>mgcrea.ngStrap</code>

</div>

<div class="callout callout-info">

<h4 id="project-history">About the project</h4>

<p>AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application.</p>

<p>With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!</p>

</div>

<h2 id="project-quickstart">Quick Start</h2>

<p>Install and manage AngularStrap with <a href="http://bower.io">Bower</a>. <small>You can also use <a href="https://www.nuget.org/packages/angular-strap">NuGet</a>.</small> A <a href="http://cdnjs.com/libraries/angular-strap">CDN</a> is also provided by cdnjs.com.</p>

<div class="highlight">

<pre>

<code class="bash" highlight-block>

$ bower install angular-strap --save

</code>

</pre>

</div>

<p>Load the required javascript libraries (Bootstrap scripts files are not needed).</p>

<div class="highlight">

<pre>

<code class="html" highlight-block>

&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"&gt;&lt;/script&gt;

&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"&gt;&lt;/script&gt;

&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"&gt;&lt;/script&gt;

</code>

</pre>

</div>

<p>Inject the

<code>mgcrea.ngStrap</code>module into your application.</p>

<div class="highlight">

<pre>

<code class="javascript" highlight-block>

angular.module('myApp', ['mgcrea.ngStrap']);

</code>

</pre>

</div>

<div class="callout callout-info">

<h4>Why are there two angular-strap files?</h4>

<p>AngularStrap provides two different files:</p>

<ul>

<li>angular-strap.js: library javascript code</li>

<li>angular-strap.tpl.js: default HTML inline templates used by the directives</li>

</ul>

<p>By keeping the HTML template definitions in a separate file, it makes it easier to customize the templates used by the directives by creating a custom copy of the file or by overriding some of the templates.</p>

</div>

<div class="callout callout-info">

<h4>Custom builds</h4>

<p>AngularStrap provides independently built modules that can be loaded separately</p>

<div class="highlight">

<pre>

<code class="javascript" highlight-block>

angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'mgcrea.ngStrap.tooltip' ]);

</code>

</pre>

</div>

</div>

<h2 id="project-contribute">Contribute</h2>

<p>Build and work on AngularStrap with <a href="http://gulpjs.com">Gulp</a>.</p>

<div class="highlight">

<pre>

<code class="bash" highlight-block>

// Serve and watch docs, ideal to hack!

$ gulp serve

// Continuous integration

$ gulp karma:server

// Build AngularStrap

$ gulp build

</code>

</pre>

</div>

<h2 id="project-animations">Animations</h2>

<p>AngularStrap leverages AngularJS

<code>ngAnimate</code>module to provide animations to the directives. Therefore, it requires to load custom CSS code as

<code>ngAnimate</code>comes with a very specific markup.</p>

<div class="callout callout-info">

<h4>AngularMotion</h4>

<p>Theses docs rely on the

<code>angular-motion.css</code>stylesheet from the <a href="//github.com/mgcrea/angular-motion" target="_blank">AngularMotion</a> project.</p>

<div class="highlight">

<pre>

<code class="bash" highlight-block>

$ bower install angular-motion --save

</code>

</pre>

</div>

</div>

</div>