如何在 AngularJS 单页应用程序中显示 JSON 数据？ [复制]答案

【问题标题】：How do I display JSON data in an AngularJS single page app? [duplicate]如何在 AngularJS 单页应用程序中显示 JSON 数据？ [复制]
【发布时间】：2018-08-19 04:32:36
【问题描述】：

我是 AngularJS 和基于 JS 的 Web 开发的新手，我正在尝试将我的投资组合网站作为单页 AngularJS 应用程序。我想把我以前所有的项目数据都放在一个 JSON 文件中，并使用 JS 抓取数据并在 HTML 列表或表格中动态显示。我已经尝试对此进行大量研究，但它不起作用。我的代码发布在下面。

myApp.controller('portController', function($scope, $http){
    
    $scope.test = "TEST PHRASE";
    
    $http.get('../projects.json').success(function(data) {
       $scope.projects = data;
   });

});

<div class="jumbotron text-center">
	<h1>Portfolio Home</h1>
    
    <p>{{ test }}</p>
    
    <table>
        <tr ng-repeat="project in projects">
            <td>{{project.title}}</td>
            <td>{{project.date}}</td>
        </tr>
    </table>
    
</div>

[
{
    "title" : "Sample Title", 
    "date" : "01/01/2001"
},
{
    "title" : "Sample Title 2", 
    "date" : "02/02/2002"
}
]

注意：我有一个 JS 文件，它根据 URL 控制页面上显示的内容（它处理所有路由），并且我正在使用 ng-view 并将控制器更改为在某个页面上使用上面的 html .在我添加 http 请求之前，{{test}} 位工作正常。

【问题讨论】：

你得到的错误是什么？
我没有收到错误，它只是中断，好像整个控制器文件都被忽略了。
能否打开 JS 控制台（右键 -> 检查元素 -> 控制台）然后重试？我们需要该错误来了解发生了什么。
只有一个问题，你的 HTML 中的 ng-app 和 ng-controller 在哪里？？？
@AustinMcGlothlin，您是否将控制器添加到包含该 div 的标签中。codepen.io/nagasai/pen/dmPEGG

标签： html angularjs json

【解决方案1】：

实现以下选项的预期用途

将 .success 更改为 .then ，因为 .success 在 Angularjs 1.4 之前有效
要使用 ng-repeat 进行渲染，请使用 $scope.projects = response.data ，如下所示

    var myApp = angular.module('test',[]);
    
    myApp.controller('portController', function($scope, $http){
            $http({
                method: 'get', 
                url: '../projects.json'
            }).then(function (response) {
                $scope.projects= response.data;
            },function (error){
                console.log(error);
            });
    });

【讨论】：