|
9 years ago | |
---|---|---|
src | 9 years ago | |
tests | 10 years ago | |
.gitignore | 10 years ago | |
.jshintrc | 10 years ago | |
LICENSE | 10 years ago | |
README.md | 10 years ago | |
angular-diff.js | 9 years ago | |
angular-diff.min.js | 9 years ago | |
bower.json | 9 years ago | |
gulpfile.js | 10 years ago | |
karma.conf.js | 10 years ago | |
package.json | 9 years ago |
README.md
angular-diff
Diff filter for angular.js. Show inline text diff in your page
I took the idea and the algorithm (and the code) from http://ejohn.org/projects/javascript-diff-algorithm/
Install
To use angular-diff you have to:
-
install angular-diff with bower:
bower install angular-diff
-
In your
index.html
, include the angular-diff file
In your module declaration you have to include the diff module
var module = angular.module('yourModule', [
...
'diff',
]);
USAGE
It's a filter, you use it in your html like this:
<div ng-bind-html="oldText|diff:newText"></div>
This will show the diff between oldText
and newText
Note that the filter returns html with <ins>
and <del>
tags, so in order to
display it you have to use ng-bind-html.
Here's a demo, that's worth more than a thousand words:
http://plnkr.co/edit/nfhA5g?p=preview
DEVELOPMENT
Remember to install all dependencies:
$ npm install -g gulp // It's like grunt but cooler
$ npm install
$ bower install
To launch tests simply run
gulp karma
To build and minify simply run
gulp build