1.表结构
我在教程示例中使用users表。CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`fname` varchar(80) NOT NULL,
`lname` varchar(80) NOT NULL,
`username` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2.配置
创建新的config.php文件。
完整的代码<?php
$host ="localhost"; /* Host name */
$user ="root"; /* User */
$password =""; /* Password */
$dbname ="tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed:" . mysqli_connect_error());
}
3. HTML
你可以在页面中下载,并包含angular.min.js或者使用CDN。
定义
和用于显示数据创建
完整的代码
How to get data from MySQL with AngularJS - PHPFirst name | Last name | Username |
---|---|---|
{{user.fname}} | {{user.lname}} | {{user.username}} |
4. PHP
创建getData.php文件。
从这里返回JSON数组,其中包含用户详细信息(fname,lname和username )。
完整的代码include 'config.php';
$sel = mysqli_query($con,"select * from users");
$data = array();
while ($row = mysqli_fetch_array($sel)) {
$data[] = array("fname"=>$row['fname'],"lname"=>$row['lname'],"username"=>$row['username']);
}
echo json_encode($data);
5.脚本
在控制器(用户控制)中创建新模块,并设置AJAX请求。路径-传递文件名在url中,并将method设置为get,
成功reponse.data AJAX成功回调处理,其中将存储到$scope.users,
在HTML端使用ng-repeat指令显示数据。
完整的代码
var fetch = angular.module('myapp', []);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
$http({
method: 'get',
url: 'getData.php'
}).then(function successCallback(response) {
// Store response data
$scope.users = response.data;
});
}]);
6.结束语
Angular提供$http服务,可以对服务器进行AJAX调用。
和jQuery AJAX请求类似,你可以发送get或POST type请求,在教程示例中,我从$http发送get请求,以JSON格式从MySQL数据库获取数据。如果你认为本教程对你有所帮助,请不要忘记分享。