如何使用Angular調用ajax並從返回中填充內容（頁面已經渲染之后）

Question

我是后端API開發人員，是AngularJS（ 版本1 ）的新手，這是我當前的工作所編寫的內容。

該頁面在<html>標記中具有ng-app="app" ，並且ng-controller="BaseController as baseCtrl" ，並且呈現得很好。

從這里開始，有一部分（當前是服務器端）內容需要由ajax進行后期渲染來調用，因為其來源不可靠，有時甚至很慢。 我已經編寫了API URL來返回內容，例如

{"status":"OK","id":"feed-whatsnew","content":"Unreliable source!"}

我的問題是，如何使用Angular將上面的“內容”填充到<div id="feed-whatsnew"> .. <div class="content"></div>..</div>位置，並且不隱藏feed-whatsnew ？

到目前為止，角度渲染對我來說還是有意義的，但是像這樣的任何輔助過程仍然是不透明的。 我知道我將如何在jQuery中處理它，但是想要避免嘗試簡單地“模仿”一個庫而不是真正實現Angular框架。

Answer 1

在angular中，您可以使用$http -provider通過ajax調用外部API。 這是您將如何做的一個例子

app.controller('BaseController',['$http', function($http){
    var vm = this;
    vm.content = {};

    vm.fetchContent = function(){
        return $http.get('/my-api-endpoint').then(function(response){
            vm.content = response.data;
        }, function(response){
            console.error('Failed calling /my-api-endpoint ', response);
        });
    };

    // Initiallly load content
    vm.fetchContent();
}]);

調用$http.get(..)開始是對給定外部URL的異步調用，並返回稱為Promise的內容。 異步調用完成后，此Promise解析，該腳本使用then([callback])執行傳遞給Promise的then([callback]) 。 然后，此回調將在響應中傳遞的數據填充到控制器中的vm.content變量。

您可以在angular文檔中了解有關$http提供程序的更多信息。

當您想將內容呈現在某個地方時，可以執行以下操作：

<span>{{baseCtrl.content}}</span>

盡管那部分內容很大程度上取決於您要呈現的內容。

您可能應該將fetchContent()函數分成一個Angular服務，但這是一個完全不同的主題。

Answer 2

AngularJS附帶了功能強大的$http庫來執行ajax。 請瀏覽相對簡單的文檔，網址為https://www.w3schools.com/angular/angular_http.asp

這是合理的步驟

在控制器依賴項中注入$http
通過$ http撥打服務電話
成功后，將響應分配給$ scope變量以使其可用於UI / html標記。 如果您在標記中使用控制器as分配將有所不同。

 angular.module('app', []) .controller('BaseController', function($http) { var vm = this; vm.feed = null; _getDataFromServer(); function _getDataFromServer() { var req = { url: 'https://jsonplaceholder.typicode.com/posts/1', method: 'GET' //could be post/put etc //data: someJson -- if webservice need so }; $http(req) .then(function(response) { vm.feed = response.data; }).catch(function(err) { console.log('some error occured!', err); }); } });

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <div ng-app="app" ng-controller="BaseController as vm"> <p>Using $http</p> <div id="feed-whatsnew" ng-hide="!vm.feed"> <!-- use {{}} or ng-bind to bind the data --> <!-- use ng-hide to show/hide the content conditionally --> Title from Ajax Response: {{vm.feed.title}} <div class="content"> Content: <p ng-bind="vm.feed.body"></p> </div> </div> </div>

如何使用Angular調用ajax並從返回中填充內容（頁面已經渲染之后）

問題描述

2 個解決方案

解決方案1
3 2017-02-14 18:28:25

解決方案2
1 已采納 2017-02-14 18:38:18

如何使用Angular調用ajax並從返回中填充內容（頁面已經渲染之后）

問題描述

2 個解決方案

解決方案1 3 2017-02-14 18:28:25

解決方案2 1 已采納 2017-02-14 18:38:18

解決方案1
3 2017-02-14 18:28:25

解決方案2
1 已采納 2017-02-14 18:38:18