angular.js 使用来自 mysql db 的数据答案

【问题标题】：angular.js consume data from mysql dbangular.js 使用来自 mysql db 的数据
【发布时间】：2016-03-09 09:25:00
【问题描述】：

我正在尝试在 angular.js 应用程序中使用 mysql 数据库中的数据。我已经阅读了几个教程，但没有一个对我有用。

我有一个返回 JSON 数组的 php 脚本。示例结果：

[{"id":"1","name":"Fran","text":"21-15-9 Reps for Time:\r\nThruster (95lbs\/ 44kg)\r\nPull-Ups","wodtype":"Benchmark"},{"id":"2","name":"Angie","text":"1 Round for Time:\r\n100 Pull-Ups\r\n100 Push-Ups\r\n100 Sit-Ups\r\n100 Air Squats","wodtype":"Benchmark"},{"id":"3","name":"Barbara","text":"5 Rounds for Time:\r\n20 Pull-Ups\r\n30 Push-Ups\r\n40 Sit-Ups\r\n50 Air Squats\r\n\r\n3 Minute Rest","wodtype":"Benchmark"},{"id":"4","name":"Chelsea","text":"30 Minutes EMOM\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"},{"id":"5","name":"Cindy","text":"20 Minute AMRAP\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"}]

我的应用程序如下所示：

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<body>
    <div ng-controller="GetWodList"> 
                <div ng-repeat="x in wodList">
                    {{x.id}}<br />
                    {{x.name}}<br />
                    {{x.text}}<br />
                    {{x.wodtype}}<br />
                </div>
        </div>

    </body>

<script>
    function GetWodList($scope, $http) {
    $http.get('https://foo.com/getList.php').
        success(function(data) {
            $scope.wodList = data;
        });
    }
</script>

结果是一个空页面。我遵循了这个教程：http://www.phpro.org/tutorials/Consume-Json-Results-From-PHP-MySQL-API-With-Angularjs-And-PDO.html#5

【问题讨论】：

GetWodList 未被声明为控制器 docs.angularjs.org/guide/controller github.com/johnpapa/angular-styleguide/blob/master/a1/… 检查此链接以了解如何声明它们

标签： javascript php mysql angularjs

【解决方案1】：

声明应用模块
注册GetWodList为控制器

var appname = angular.module('appname', []);
appname.controller('GetWodList', ['$scope', '$http', function($scope, $http) {
    $http.get('https://foo.com/getList.php')
         .success(function(data) {
             $scope.wordList = data;
          });
    }]);

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>

  <body>
    <div ng-controller="GetWodList">
      <div ng-repeat="x in wordList">
        {{x.id}}<br />
        {{x.name}}<br />
        {{x.text}}<br />
        {{x.wodtype}}<br />
      </div>
    </div>
  </body>

</html>

【讨论】：

谢谢。这有帮助！