Внедрение заставки для AngularJS для загрузки большого текстового содержимого

Question

Я хотел реализовать файловый менеджер, где захотел загрузить очень большие данные текста. Я видел, есть некоторые библиотеки уже доступны такие как

Angular JS File Saver

<div class="wrapper" ng-controller="ExampleCtrl as vm"> 
    <textarea 
    ng-model="vm.val.text" 
    name="textarea" rows="5" cols="20"> 
     Hey ho let's go! 
    </textarea> 
    <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)"> 
    Download 
    </a> 
</div> 

Но я не в состоянии под стендом, Как я должен реализовать в моем AngularJS приложении. Ниже приведена демонстрация My App

Здесь я использую файл data.json для размещения данных в пользовательском интерфейсе. И я хотел бы держать кнопку загрузки, где пользователь щелкает что buttong пользователи должны иметь возможность загружать контент, присутствующий в data.json

Demo

Answer 1

Вы должны сначала установить FileSaver с помощью менеджера пакетов (т.е. Бауэр) в проект, а затем вы можете использовать его в приложении.

1) Установите FileSaver с помощью беседки установки FileSaver в проект

2) Определить модуль FileSaver

3) Инъекция FileSaver в целевом контроллере

После успешной установки библиотеки в вашем app.js обновите свои коды, как указано ниже:

// Define module here 
var app = angular.module('studentApp', ['FileSaver']); 

// Inject FileSaver into target controller 
app.controller('StudentCntrl', function($scope,$http, FileSaver) {  
    $scope.vm.download = function (data) { 
     if (!data) { 
     console.error('No data'); 
     return; 
     } 

     var newData = new Blob([data], { type: 'text/plain;charset=utf-8' }); 
     FileSaver.saveAs(newData, 'text.txt'); 
    }; 

    $http.get('data.json').then(function (response){ 
        console.log(response.data.pages); 
       $scope.data = response.data.PersonEvent.Body; 
       $scope.vm.download($scope.data); 
     }); 
});