title: How to use angular-filemanager addon in Ember
body: <p>I installed <code>angular-filemanager</code> with <code>bower install angular-filemanager --save</code> and imported the necessary dependencies in <code>ember-cli-build.js</code>.</p>
  
  <pre><code>  app.import('bower_components/angular/angular.js');
    app.import('bower_components/angular-translate/angular-translate.min.js');
    app.import('bower_components/jquery/dist/jquery.min.js');
    app.import('bower_components/ng-file-upload/ng-file-upload.min.js');
    app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
    app.import('bower_components/angular-filemanager/dist/angular-filemanager.min.css');
    app.import('bower_components/angular-filemanager/dist/angular-filemanager.min.js');
  </code></pre>
  
  <p>Then I created a component, but I am not sure how to use the <code>angular-filemanager</code> directive.</p>
  
  <p>component.js:</p>
  
  <pre><code>didInsertElement: function() {
      let model = this.get('model');
      angular.module('angular-filemanager', []).directive('somedirective', function() {
          return { template: 'test {{ model[0] }} test' };
      }).run(function($rootScope){ $rootScope.model = model; });
      angular.bootstrap(this.element, ['angular-filemanager']);
  }
  </code></pre>
  
  <p>template.hbs:</p>
  
  <pre><code>&lt;div somedirective="model"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I don't know much about angular and I just started learning ember a few months ago. All I have been able to do for this is run that function directive.</p>
  
  <h1>---Edit---</h1>
  
  <p>Since I am using mirage, I just made methods with path <code>admin/file</code> that returns nothing meaningful for both <code>get</code> and <code>post</code> requests.</p>
  
  <p>And I changed the component.js's <code>didInsertElement</code> to</p>
  
  <pre><code> didInsertElement: function() {
      angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
        config.set({
          appName: 'angular-filemanager',
  
          listUrl: 'api/admin/file',
          uploadUrl: 'api/admin/file',
          renameUrl: 'api/admin/file',
          copyUrl: 'api/admin/file',
          moveUrl: 'api/admin/file',
          removeUrl: 'api/admin/file',
          editUrl: 'api/admin/file',
          getContentUrl: 'api/admin/file',
          createFolderUrl: 'api/admin/file',
          downloadFileUrl: 'api/admin/file',
          downloadMultipleUrl: 'api/admin/file',
          compressUrl: 'api/admin/file',
          extractUrl: 'api/admin/file',
          permissionsUrl: 'api/admin/file',
        });
      }]);
  
      angular.bootstrap(this.element, ['FileManagerApp']);
  });
  </code></pre>
  
  <p>and the template.hbs to</p>
  
  <pre><code>&lt;angular-filemanager&gt;&lt;/angular-filemanager&gt;
  </code></pre>
  
  <p>I still do not see anything displaying on the screen, but there is an error on the console:</p>
  
  <pre><code>vendor.js: 144343 TypeError: e.post(...).success is not a function
      at o.list (vendor.js:163007)
      at i.list (vendor.js:163007)
      at i.list (vendor.js:163007)
      at i.refresh (vendor.js:163007)
      at new &lt;anonymous&gt; (vendor.js:163007)
      at Object.invoke (vendor.js:134857)
      at $controllerInit (vendor.js:140710)
      at nodeLinkFn (vendor.js:139587)
      at compositeLinkFn (vendor.js:138896)
      at nodeLinkFn (vendor.js:139650)
  </code></pre>