使用angularJS进行RESTful JSON解析

时间:2015-03-03 16:55:41

标签: ajax angularjs

我正在一个宁静的网络应用程序中工作,它使用symfony2作为后端和angularjs在前端,我的问题是我应该收到带有ajax的json URL,这是我的代码:

 <script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'http://localhost/onlinefacturation/web/app_dev.php/clientapi/clients.json'}).success(function(data)
{
$scope.posts = data; // response data 
});
}
</script>
<div ng-repeat="post in posts" >
<ul>
  <li>{{post.id}}</li>
  <li>{{post.nom}}</li>
  <li>{{post.prenom}}</li>
</ul>
</div> 

这是我得到的控制台错误,另外,我没有在视图中获取任何数据:

 WARNING: Tried to load angular more than once.
angular.js:11383 Error: [ng:areq] Argument 'PostsCtrlAjax' is not a function, got undefined
http://errors.angularjs.org/1.3.2/ng/areq?p0=PostsCtrlAjax&p1=not%20aNaNunction%2C%20got%20undefined
    at REGEX_STRING_REGEXP (http://localhost/ProjetWeb/src/vendor/angular/angular.js:80:12)
    at assertArg (http://localhost/ProjetWeb/src/vendor/angular/angular.js:1577:11)
    at assertArgFn (http://localhost/ProjetWeb/src/vendor/angular/angular.js:1587:3)
    at http://localhost/ProjetWeb/src/vendor/angular/angular.js:8333:9
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:622:22
    at http://localhost/ProjetWeb/src/vendor/angular/angular.js:7507:34
    at forEach (http://localhost/ProjetWeb/src/vendor/angular/angular.js:347:20)
    at nodeLinkFn (http://localhost/ProjetWeb/src/vendor/angular/angular.js:7494:11)
    at compositeLinkFn (http://localhost/ProjetWeb/src/vendor/angular/angular.js:6993:13)
    at nodeLinkFn (http://localhost/ProjetWeb/src/vendor/angular/angular.js:7632:24)

感谢您的帮助

更新: 这是index.html:

html lang="en" data-ng-app="app" >
<head> ...... </head>
<body ng-controller="AppCtrl">
<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view></div>.........</body></html>

abd这是我想要从json文件URL获取数据的.html文件:

<script>function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'http://localhost/onlinefacturation/web/app_dev.php/clientapi/clients.json'}).success(function(data)
{
$scope.posts = data; // response data 
});
}
</script>
    <div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
        app.settings.asideFolded = false; 
        app.settings.asideDock = false;
      "  data-ng-app="app" ng-app>
    <div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
    <div ng-repeat="post in posts" >
        <ul>
          <li>{{post.id}}</li>
          <li>{{post.nom}}</li>
          <li>{{post.prenom}}</li>
        </ul>
        </div>  
        </div></div>

1 个答案:

答案 0 :(得分:1)

试试这样的控制器

app.controller('PostsCtrlAjax', ['$scope', '$http' ,function($scope,$http) {
   $http({method: 'POST', url: 'http://localhost/onlinefacturation/web/app_dev.php/clientapi/clients.json'})
   .success(function(data){
        $scope.posts = data; // response data 
   });
}]);