使用Ng-Repeat和Ng-Factory显示Json数据

时间：2022-11-25 16:24:02

I am a beginner at Javascript and Angular, and I'm trying to implement AngularJS on my website. I have watching tutorials on CodeSchool, Egghead etc. But I am stack at very beginning.

我是Javascript和角度的初学者，我正在尝试在我的网站上实现AngularJS。我看过CodeSchool, Egghead等教程，但我一开始就在stack。

Getting JSON data from my server and displaying it on my website. Here is my code;

从我的服务器获取JSON数据并在我的网站上显示。这是我的代码;

JS:

JS:

angular.module('nasuh',[])
.factory('MY', function($http){
     return  {
          isimler: function() {
          var alHemen;
          var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
          $http.get(url).success(function(data) {
          alHemen = data;
          });
          return alHemen;
        }
      };
    })
.controller('nbgCtrl', function($scope, $http, MY) {
         $scope.mangas = MY.isimler();  
     })

HTML:

HTML:

<html ng-app = "nasuh">
<body ng-controller = "nbgCtrl">
<div class="col s12 m6 l4" ng-repeat = "manga in mangas"> -----> Want to repeat
        <div class="row">
        <div class="col s5">
            <a href="#" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
           <p>{{manga.ad}}</p>

           <a href="" class="waves-effect waves-light btn"></a>

</div>
</div>
</div>

JSON:

JSON:

 [{"id":"1","ad":"Naruto","yazar":"Masashi KISHIMOTO","kapak":"naruto.jpg"},
 {"id":"2","ad":"One Piece","yazar":"Eiichiro ODA","kapak":"one_piece.jpg"}]

Edit-1: Thank you all for your responses but I think I need calling data at the controller like;

编辑-1:谢谢你们的回复，但是我想我需要像控制器那样调用数据;

  .factory('MY',
  return {
  isimler: function() {

.................................

.................................

$scope.mangas=isimler();

Because I need to use this data more than once and using it at ui-router extension.

因为我需要多次使用这些数据并在ui-router扩展中使用。

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html"
   controller: $scope.mangas = isimler();
})

2 个解决方案

#1

2  

I would do your factory this way :

我会这样做你的工厂:

angular.module('nasuh',[])
.factory('MY', function($http){
     var factory = {};
     var url = '/uzak/remote.php?callback=JSON_CALLBACK';
     //I return the $http promise directly when you use MY.isimler
     factory.isimler = $http.get(url);
     return factory;
    })
.controller('nbgCtrl', function($scope, MY) {
         //I handle here the success of the $http call
         MY.isimler.success(function(alHemen){
              $scope.mangas = alHemen;
         });  
     })

Your error :

你的错误:

You can't do this

你不能这么做

      $http.get(url).success(function(data) {
          alHemen = data;
      });
      return alHemen;

$http.get() is an asynchronous call. It mean that the content of your success function will be executed later without stopping the JS execution. Your return alHemen is finaly invoked before the alHemen = data

$http.get()是一个异步调用。这意味着您的success函数的内容将在稍后执行，而不会停止JS执行。在alHemen = data之前最终调用您的返回alHemen

In my humble opinion handling the call is the responsibility of the controller. the factory just exposes the methods to do the calls. I prefer to directly return the promise and let the controller do the job of handling it.

在我的拙见下，处理电话是控制器的责任。工厂只公开执行调用的方法。我宁愿直接返回承诺，让控制器来处理它。

EDIT

With ui router you can use a promise into the resolve part to get it into your controller.

有了ui路由器，你就可以在解决部分使用一个承诺，将它放入你的控制器。

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html",
  controller: "nbgCtrl",
  resolve: {
     isimler : function(MY){
        return MY.isimler;
     }
  }
})

You will be able to access it like this into your controller (just inject it) :

您将能够像这样访问它到您的控制器(只需注入它):

.controller('nbgCtrl', function($scope, isimler) {
     $scope.mangas = isimler;  
 })

Here is some documentation about resolve.

下面是一些关于解决方案的文档。

#2

0  

Problem is that http call is asynchronous.

问题是http调用是异步的。

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              isimler: function() {
              var alHemen;
              var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              alHemen = data;
              });
              return alHemen; // this line run before you get response.
            }
          };
        })

Angularjs has different way of dealing with this. You need to return promise from factory. For example-

Angularjs有不同的处理方式。你需要从工厂退回承诺。例如,

 .factory('MY', function($http,$q){
           var myFactory;
             myFactory.getJson= function(){
                var promise = $http
                .get('URLURLURL')
                .then(function (response) {
                    return response.data;
                },function (response) {
                    return $q.reject(response);
                });
            return promise;
    };
    return myFactory;
            });

For using this in controller. Use like this

用于在控制器中使用。使用这样的

.controller('nbgCtrl', function($scope, MY) {
MY.getJson().then(function(data){
                      $scope.mangas = data;
                    });

     });

#1

2  

I would do your factory this way :

我会这样做你的工厂:

angular.module('nasuh',[])
.factory('MY', function($http){
     var factory = {};
     var url = '/uzak/remote.php?callback=JSON_CALLBACK';
     //I return the $http promise directly when you use MY.isimler
     factory.isimler = $http.get(url);
     return factory;
    })
.controller('nbgCtrl', function($scope, MY) {
         //I handle here the success of the $http call
         MY.isimler.success(function(alHemen){
              $scope.mangas = alHemen;
         });  
     })

Your error :

你的错误:

You can't do this

你不能这么做

      $http.get(url).success(function(data) {
          alHemen = data;
      });
      return alHemen;

$http.get() is an asynchronous call. It mean that the content of your success function will be executed later without stopping the JS execution. Your return alHemen is finaly invoked before the alHemen = data

$http.get()是一个异步调用。这意味着您的success函数的内容将在稍后执行，而不会停止JS执行。在alHemen = data之前最终调用您的返回alHemen

In my humble opinion handling the call is the responsibility of the controller. the factory just exposes the methods to do the calls. I prefer to directly return the promise and let the controller do the job of handling it.

在我的拙见下，处理电话是控制器的责任。工厂只公开执行调用的方法。我宁愿直接返回承诺，让控制器来处理它。

EDIT

With ui router you can use a promise into the resolve part to get it into your controller.

有了ui路由器，你就可以在解决部分使用一个承诺，将它放入你的控制器。

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html",
  controller: "nbgCtrl",
  resolve: {
     isimler : function(MY){
        return MY.isimler;
     }
  }
})

You will be able to access it like this into your controller (just inject it) :

您将能够像这样访问它到您的控制器(只需注入它):

.controller('nbgCtrl', function($scope, isimler) {
     $scope.mangas = isimler;  
 })

Here is some documentation about resolve.

下面是一些关于解决方案的文档。

#2

0  

Problem is that http call is asynchronous.

问题是http调用是异步的。

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              isimler: function() {
              var alHemen;
              var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              alHemen = data;
              });
              return alHemen; // this line run before you get response.
            }
          };
        })

Angularjs has different way of dealing with this. You need to return promise from factory. For example-

Angularjs有不同的处理方式。你需要从工厂退回承诺。例如,

 .factory('MY', function($http,$q){
           var myFactory;
             myFactory.getJson= function(){
                var promise = $http
                .get('URLURLURL')
                .then(function (response) {
                    return response.data;
                },function (response) {
                    return $q.reject(response);
                });
            return promise;
    };
    return myFactory;
            });

For using this in controller. Use like this

用于在控制器中使用。使用这样的

.controller('nbgCtrl', function($scope, MY) {
MY.getJson().then(function(data){
                      $scope.mangas = data;
                    });

     });
标签：

相关文章