AngularJS Http

1.　　$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

2.　　使用$http获取json文件的数据，这里遇到了一个超级大坑，不知道是什么原因，以前代码写好后没有效果，然后使用浏览器调试的时候报错，说success不是一个方法，然后我就十分纳闷，觉得很不现实，感觉不会报这样的错，于是在网上找答案，找了半天没有找到，然后我就试着引用了网上面的AngularJS库，发现可以正常显示，我发现往上面的AngularJS库的版本跟我的不一样，我是最新的1.6版本的，然后我又一次的在网上搜索，发现别人也有这样的问题，于是我就知道了这个原因是AngularJS库的问题，不是我代码写得有问题，所以大家要是跟我写一样的代码的话，最好还是不要只用1.6版本的AngularJS库。

{
    "sites": [
        {
            "Name": "菜鸟教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular-1.3.15.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行-->
            <ul>
                <li ng-repeat="x in names">
                    {{x.Name + ", " +x.Country}}
                </li>
            </ul>
        </div>
    
        <script>
            var app = angular.module("myApp", []);
            app.controller('myCtrl', function($scope,$http) { /*myCtrl是一个JavaScript函数*/
                $http({
                    url:'file/sites.json',
                    method:'GET',
                    dataType:'json'
                }).success(function(data){
                    $scope.names = data.sites;
                }).error(function(){
                    alert('请就失败!');
                });
            });
        </script>
    </body>
</html>

 

posted @ 2017-01-09 14:37  王甘林  阅读(464)  评论(0)  编辑  收藏  举报