如何使用AngularJS从数据源获取数据？

Question

Okey，请耐心等待。 我只知道jquery，听说应该使用AngularJS。

因此，我需要访问本地主机"../asp/fases/fases-controler.asp"上的页面，以解析"../asp/fases/fases-controler.asp"我显示的json（即类似这样的内容： { "fasekind": [ "AAA", "BBB", "CCC" ] } ）），然后在客户端安装如下列表：

<ul>
   <li><input type="checkbox" /> <label>AAA</label></li>
   <li><input type="checkbox" /> <label>BBB</label></li>
   <li><input type="checkbox" /> <label>CCC</label></li>
</ul>

我确实需要帮助。 我只知道jQuery方式。 我看过太多教程，但我不明白。 我总是收到Uncaught ReferenceError: $http is not defined和其他错误消息。

我不希望有人为我这样做，我只需要弄清楚它是如何工作的。

我尝试的js控制器...根本不起作用。

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

app.controller("AppCtrl", function ($http) {
    var app = this;
    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            app.fases = data;
        })

})

Answer 1

CONTROLLER

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

app.controller("AppCtrl", function ($scope, $http) {

    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            $scope.fases = data;
        });
});

HTML

<div class="grid-12-12" ng-app='currentApp' ng-controller='ACtrl'>
    <label>Fases <em class="formee-req">*</em>
    </label>
    <ul class="formee-list">
        <li ng-repeat="list in fases">
            <input name="checkbox-01" type="checkbox" />
            <label>{{list}}</label>
        </li>
    </ul>
</div>

的jsfiddle

Answer 2

我在这里找到了答案，我想它没有JSON解析。 这是我所做的：

JSON

{
  "fasekind": [ 
              "AAA",
              "BBB",
              "CCC" 
              ]
}

CONTROLLER

function FetchCtrl($scope, $http) {
        $scope.url = 'fases/fases-controler.asp';

        $http.get($scope.url).success(function (data, status) {
            $scope.fasekind = data.fasekind;
        }).error(function (data, status) {
                $scope.response = 'Request failed';
            });
}

HTML

    <div class="grid-12-12" ng-controller='FetchCtrl'>
        <label>Fases <em class="formee-req">*</em>
        </label>
        <ul class="formee-list">
            <li ng-repeat="foo in fasekind">
                <input name="checkbox-01" type="checkbox" />
                <label>{{foo}}</label>
            </li>
        </ul>
    </div>