--@angularJS--$http服务与后台数据交互

时间:2024-07-29 20:33:38

1、httpBasic.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>$http与后台数据交互</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/angular.js"></script>
</head>
<body>
<div ng-controller="loadDataCtrl">
    <ul>
        <li ng-repeat="user in users">
            {{user.name}}
        </li>
    </ul>
</div>
<script src="httpBasic.js"></script>
</body>
</html>

2、httpBasic.js:

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

myModule.controller('loadDataCtrl', ['$scope', '$http',
    function($scope,$http){
    $http({
        method:'GET',
        url:'data.json'
    }).success(function(data,status,header,config){
        console.log(data);
        $scope.users = data;//直接为ng-repeat里面的users赋值了
    }).error(function(data,status,header,config){
        console.log("错误......");
    });
}]);

3、后台数据文件——data.json

[{
    "name": "《用AngularJS开发下一代WEB应用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《AngularJS权威指南》"
}]