I am making a slide panel .So I googled it and found angrular stap library .I study that library try to make slide panel . http://mgcrea.github.io/angular-strap/##asides .I import all js required for that but my side panel not slide as given on site.I don't know where I am wrong . Here is my code with plunker. http://plnkr.co/edit/GIFyFSdyJI8tHq5nlBBn?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>
<script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>
<script src="https://dl.dropboxusercontent.com/s/8km0nfoc9noz9ns/modal.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/40vdgl5hglimwfi/aside.js?m="></script>
</head>
<body class="container">
<button type="button" class="btn btn-lg btn-danger" data-template="aside.html" data-placement="left" data-animation="am-slide-left" bs-aside="aside" data-container="body">Custom aside
<br>
<small>(using data-template)</small>
</button>
<script>
var myapp = angular.module('myApp', ['mgcrea.ngStrap','mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside']);
</script>
</body>
</html>
According to their documentation:
1) You should include angular-animate module:
<script src="//code.angularjs.org/1.3.0-beta.5/angular-animate.min.js"></script>
2) You have to include additional CSS animation styles from AngularMotion project:
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">
3) You also have to include another additional CSS file for asides:
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css">
4) What is not mentioned in documentation - you have to add 'ngAnimate' module to dependencies:
var myapp = angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
Plunker example