An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
npm install angular-timelineAn Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story,
show history or describe a sequence of events.

Original Implementation (HTML / Javascript)
1. Install the plugin into your Angular.js project, manually or via
bower install angular-timeline --save
1. Include angular-timeline.css in your app:
1. Include angular-timeline.js in your app:
1. Add angular-timeline as a new module dependency in your angular app.
var myapp = angular.module('myapp', ['angular-timeline']);
1. To define a timeline, do the following (either manually or using ng-repeat on a dataset):
``javascript`
// in controller
$scope.events = [{
badgeClass: 'info',
badgeIconClass: 'glyphicon-check',
title: 'First heading',
content: 'Some awesome content.'
}, {
badgeClass: 'warning',
badgeIconClass: 'glyphicon-credit-card',
title: 'Second heading',
content: 'More awesome content.'
}];
` {{event.content}}html`
{{event.title}}
There is a bit of markup here but is optional. is for the centre line between the two sides, and should represent the event type that occured.
- The demo uses angular-scroll-animate to trigger CSS animations when timeline events scroll into view. It's totally optional to include this or not and is just there for effect.
- Panels are now designed to float left, then right, side to side. Float right is forced on smaller (eg. mobile) devices.
- If you define the events in an array and have HTML content to output, use ng-bind-html={{event.attribute}} and require the ngSanitize module.
- You can use either the SASS styles directly file under /dist or the compiled CSS files, up to you :)
- If you are using Bootstrap 3 it affects the timeline CSS, so include angular-timeline-bootstrap.[css|scss]} to re-adjust the offsets e.g:
`html`
1. Checkout git repository locally: git clone git@github.com:rpocklin/angular-timeline.gitnpm install
1. bower install
1. grunt serve
1. http://localhost:9000/example/
1. View in your browser to see the example.
1. Fork it
1. Create your feature branch (git checkout -b my-new-feature)grunt beautify
1. Beautify ()grunt
1. Ensure it passes code-checks / tests ()git commit -am 'Added some feature'
1. Commit your changes ()git push origin my-new-feature
1. Push to the branch ()
1. Create a new Pull Request
* 1.7.0 Changed CSS classes to fix animations in and out (in example).
* 1.6.2 Fixed missing logic in passing side attribute declaration (was watching parent scope)side=left
* 1.6.1 Added attribute for or side=right to force left or right-handed columns for timeline events.hidden
* 1.6.0 Changed to timeline-hidden class in example an angular-timeline-animations.css.angular-scroll-animate
* 1.5.2 Updated dependency used in example from 0.8.0 to 0.9.1.timeline-node
* 1.5.0 Updated dependencies, simplified nested components and improved example. Changed to timeline-event. Removed replace = true` in directives.
* 1.2.1 Cleaned up dependencies and build steps.
* 1.2.0 Updated example and styling to be more responsive.
* 1.0.0 Initial release
- Add some tests
Released under the MIT License. See the [LICENSE][license] file for further details.
[license]: https://github.com/rpocklin/angular-timeline/blob/master/LICENSE