javascript - 如何在 Angular 上使用 Ajax

Question

我想在服务器上上传文件并有进度条。我是用ajax上传的。现在，我想将它们转换为 AngularJS。如何在 angularjs 上使用 ajax。我正在研究 ngularjs。请帮助我。谢谢 HTML:

<form action="uploadFile" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

和js文件:

<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
        //console.log(percentVal, position, total);
    },
    success: function(xhr) {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);

    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

Answer 1

使用$http .

该链接的示例:

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

至于显示进度，这个插件看起来很有前途:Angular Loading Bar .

即使只是包含它之后它仍然可以工作。

angular.module('myApp', ['angular-loading-bar'])