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

Question

Okey, please be patience. I only know jquery and I heard that use AngularJS is something that I should try.

So, what I need to to is visit a page on my local host "../asp/fases/fases-controler.asp" parse the json that this page shows me ( that is something like this: { "fasekind": [ "AAA", "BBB", "CCC" ] } ) and then mount on client side a list like this:

<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>

I do need a help with this. I only know the jQuery way. I have seen so many tutorials but I don't get it. I receive always Uncaught ReferenceError: $http is not defined and other erros messages.

I don't want someone to do that for me, I just need to figure out how it works.

js controller that I try... it does not work at all.

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

I found an answer here , it was missing the JSON parse I guess. This is what I did:

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>