https://github.com/amweiss/angular-diff-match-patch
An AngularJS wrapper for google-diff-match-patch
https://github.com/amweiss/angular-diff-match-patch
angular diff javascript wrapper
Last synced: 11 months ago
JSON representation
An AngularJS wrapper for google-diff-match-patch
- Host: GitHub
- URL: https://github.com/amweiss/angular-diff-match-patch
- Owner: amweiss
- License: mit
- Created: 2014-08-29T18:49:34.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2025-05-05T07:16:55.000Z (11 months ago)
- Last Synced: 2025-05-05T08:26:43.148Z (11 months ago)
- Topics: angular, diff, javascript, wrapper
- Language: JavaScript
- Homepage: https://amweiss.github.io/angular-diff-match-patch/
- Size: 3.05 MB
- Stars: 138
- Watchers: 7
- Forks: 34
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
angular-diff-match-patch
========================
[](https://www.npmjs.com/package/angular-diff-match-patch)
[](https://circleci.com/gh/amweiss/angular-diff-match-patch/tree/master) [](https://codecov.io/gh/amweiss/angular-diff-match-patch)
This library is simply a wrapper around [google-diff-match-patch](https://code.google.com/p/google-diff-match-patch/).
(Shown here with some custom styles)
Angular 2 Port
---------------
Should you wish to use this in an Angular 2+ project, take a look at this port: [elliotforbes/ng-diff-match-patch](https://github.com/elliotforbes/ng-diff-match-patch)
Setup
-----
Install from [NPM](https://npmjs.com)
`npm install amweiss/angular-diff-match-patch`
Install from [Bower](https://bower.io/)
`bower install angular-diff-match-patch`
Usage with webpack
```javascript
config.plugins = [
new webpack.ProvidePlugin({
diff_match_patch: 'diff-match-patch'
}),
];
```
Usage
-----
See [the included demo](https://amweiss.github.io/angular-diff-match-patch/) for reference or view a sample on [Codepen](https://codepen.io/amweiss/pen/grXNPm).
```html
```
Where `left` and `right` are defined on your scope. The `options` attribute can be used as well, but it's optional.
```javascript
$scope.options = {
editCost: 4,
attrs: {
insert: {
'data-attr': 'insert',
'class': 'insertion'
},
delete: {
'data-attr': 'delete'
},
equal: {
'data-attr': 'equal'
}
}
};
```
`editCost` is specific to `processingDiff` and controls the tolerence for hunk separation. `attrs` can contain any/all/none of the following: `insert`, `delete`, and `equal` where the properties in those objects represent attributes that get added to the tags.
Another option is to skip angular processing the diff, it's useful when you want to show a diff of a code pre-compiled by angular. The attribute you need to add is called: `skipAngularCompilingOnDiff`. If set to `true`, would skip compiling, otherwise it would compile the diff.
Add some style
```css
.match{
color: gray;
}
.ins{
color: black;
background: #bbffbb;
}
.del{
color: black;
background: #ffbbbb;
}
```
Development
-----
Development work requires npm from [Node.js](https://nodejs.org/)
Begin with:
`npm install`
Then you can use:
`npm start` To host the directory so you can see the demo
`npm test` To run the Jasmine tests once
`npm test-watch` To run the Jasmine tests with change detection