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＆gt; 1.6的语法已更改。这里接受的答案有新的语法：$http.get(...).success is not a function

使用AngularJS

3 个答案: