This is the Angular directive for WebODF. Demo page is available here.

1. Get Angular
2. Get WebODF by running:

gulp webodf

You will have webodf.js in vendor/webodf/ directory. You can specify the WebODF version in gulpfiles.js. Otherwise you can download it manually from it's site.

1. Get Angular WebODF directive:

bower install angular-webodf

Copy dist/angular-webodf.js to your working directory.

1. Put together an HTML file:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="webodf.js"></script>
<script type="text/javascript" src="angular-webodf.js"></script>

...
<webodf url="file.odt" name="odf"></webodf>

url: This contains the url of the ODF document you're opening using the directive.

name: This specifies the name of the directive. You should use different name if you have more than one directives.

readonly: This specifies that the document you're loading is read only. No editor is going to be present.

If you're missing something in this directive, you're free to help out. By having a basic bower and gulp skill, you can easily build the project.

npm install
bower install

gulp src

You will get the dist directory containing ready to use angular-webodf.js.

gulp demo

You will get the demo directory which you can try by running it in a web server in demo directory.

MIT (c) 2014, Mohammad Anwari

"But WebODF is AGPL!", yes it is, but it has an exception to the license:

As a special exception to the AGPL, any HTML file which merely makes function calls to this code, and for that purpose includes it in unmodified form by reference or in-line shall be deemed a separate work for copyright law purposes.