使用AngularJS加载JSON文件

Question

我刚刚开始学习Angular，我已经在SO上寻找使用angular加载JSON文件的解决方案，我已经完成了其他人发布的解决方案，但我无法从我的json文件中获取数据以显示某些原因。

我的json文件（test.json）很简单：

{
    "array": [
        {"thing": "thing1"},
        {"thing": "thing2"},
        {"thing": "thing3"}
    ],

    "name": "robert"
}

这是我的js文件：

var myMod = angular.module("myMod", []);

myMod.controller("myCont", function ($scope, $http) {
    $scope.thing = "hi";

    $http.get("/test.json")
            .success(function (data) {
                $scope.stuff = data.array;
                $scope.name = data.name;
            })
            .error(function (data) {
                console.log("there was an error");
            });
});

我试图只显示这样的名称，但只有{{name}}显示：

<html ng-app="myMod">
    <head>
        <script src="angular.js"></script>
        <script src="testing.js"></script>
    </head>

    <body ng-controller="myCont">
        {{stuff}}
    </body>
</html>

Answer 1

我认为你有拼写错误，你应该注入$http （负责制作一个ajax调用）依赖而不是$html （在角度中不存在）

你应该这样改变代码。

myMod.controller("myCont", function ($scope, $html) {

至

myMod.controller("myCont", function ($scope, $http) {

Answer 2

正如Pankaj Parkar所说，$ http就是你所需要的。

这是我用它创建的一个plunker： http ：//plnkr.co/edit/d0DDU29uitMcwK6qA7kx？p = preview

使用$ http而不是$ html的app.js文件：

var myMod = angular.module("myMod", []);

myMod.controller("myCont", function ($scope, $http) {
    $scope.thing = "hi";

    $http.get("test.json")
            .success(function (data) {
                $scope.stuff = data.array;
                $scope.name = data.name;
            })
            .error(function (data) {
                console.log("there was an error");
            });
});

Answer 3

如果有人试图这样做是错误的：

$http.get(…).success is not a function

显然，Angular> 1.6的语法已更改。 这里接受的答案有新的语法： $ http.get（...）。success不是一个函数

使用AngularJS加载JSON文件

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-06-24 18:49:58

解决方案2
0 2016-06-24 18:58:49

解决方案3
0 2017-07-25 22:06:32

使用AngularJS加载JSON文件

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-06-24 18:49:58

解决方案2 0 2016-06-24 18:58:49

解决方案3 0 2017-07-25 22:06:32

解决方案1
4 已采纳 2016-06-24 18:49:58

解决方案2
0 2016-06-24 18:58:49

解决方案3
0 2017-07-25 22:06:32