Quickstart

To start viewing files in Angular, follow these simple steps to get started. Once you're up and running, visit the API documentation to learn how to get the most out of it.

1. Download view-file-ng.js (minified version) and put it with your other scripts. Alternatively, you can use Bower to install it automatically:

   bower install [--save] view-file-ng

   Or if you prefer bleeding edge:

   bower install [--save] git@github.com:grtjn/view-file-ng.git

   If not using Bower, you'll also need to fetch yourself:

   • angular-x2js (*)
   • bootstrap (~3.3.5)
   • font-awesome (^4.6.3)
   • highlightjs (~8.7.0)
   • ng-json-explorer (8c2a0f9104)
   • vkbeautify-wrapper (*)
   • angular-sanitize (>1.3.1)
   • videogular (^1.4.4)
   • videogular-controls (^1.4.4)
   • videogular-themes-default (^1.4.4)
   • angular-recursion (^1.0.5)

2. Load view-file-ng.js and dependencies into your HTML page (typically in the end of the BODY of your HTML):

   <script src="/bower_components/highlightjs/highlight.pack.js"></script>
   <script src="/bower_components/angular-highlightjs/build/angular-highlightjs.js"></script>
   <script src="/bower_components/x2js/xml2json.min.js"></script>
   <script src="/bower_components/angular-x2js/dist/x2js.min.js"></script>
   <script src="/bower_components/ng-json-explorer/dist/angular-json-explorer.js"></script>
   <script src="/bower_components/vkbeautify-wrapper/dist/vkbeautify.0.99.00.beta.js"></script>
   <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
   <script src="/bower_components/angular-recursion/angular-recursion.js"></script>
   <script src="/bower_components/videogular/videogular.js"></script>
   <script src="/bower_components/videogular-controls/vg-controls.js"></script>
   <script src='/bower_components/view-file-ng/dist/view-file-ng[.min].js'></script>

   Note: You can simplify this by making use of wiredep, optionally together with gulp-useref.

3. Load view-file-ng.css into your HTML page (typically in the end of the HEAD of your HTML):

   <link rel="stylesheet" href="/bower_components/highlightjs/styles/github.css" />
   <link rel="stylesheet" href="/bower_components/ng-json-explorer/dist/angular-json-explorer.css" />
   <link rel="stylesheet" href="/bower_components/videogular-themes-default/videogular.css" />
   <link rel="stylesheet" href="/bower_components/view-file-ng/dist/view-file-ng[.min].css">

   Note: You can simplify this by making use of wiredep, optionally together with gulp-useref.

4. Make your application module depend on the view-file-ng module:

   angular.module('myApplicationModule', ['view.file']);

5. Expose files configuration in your Angular controller:

   MyCtrl.$inject = ['$scope'];
   
   function MyCtrl($scope) {
     var ctrl = this;
   
     ctrl.files = [{
       uri: 'https://grtjn.github.io/view-file-ng/data/sample-music.mp3',
       type: 'audio/mpeg'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/quickstart.html',
       type: 'text/html'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/bower.json',
       type: 'application/json'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/installation-guide.pdf',
       type: 'application/pdf'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/install.txt',
       type: 'text/plain'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/Video%20Sample%201%20%28Small%29.m4v',
       type: 'video/mpeg'
     },{
       uri: 'https://grtjn.github.io/view-file-ng/data/Atom_Example.xml',
       type: 'application/atom+xml'
     }];
   
   }
   

6. Add a <view-file> element in your template like so:

   <div ng-repeat="file in ctrl.files">
     <view-file uri="file.uri" type="file.type"></view-file>

   </div>