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

Question

I am a beginner at Javascript and Angular, and I'm trying to implement AngularJS on my website.我是 Javascript 和 Angular 的初学者，我正在尝试在我的网站上实现 AngularJS。 I have watching tutorials on CodeSchool, Egghead etc. But I am stack at very beginning.我在 CodeSchool、Egghead 等上看过教程。但我一开始就很忙。

Getting JSON data from my server and displaying it on my website.从我的服务器获取 JSON 数据并将其显示在我的网站上。 Here is my code;这是我的代码；

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; Edit-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();
})

Answer 1

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. $http.get()是一个异步调用。 It mean that the content of your success function will be executed later without stopping the JS execution.这意味着您的成功函数的内容将在不停止 JS 执行的情况下稍后执行。 Your return alHemen is finaly invoked before the alHemen = data您的return alHemen在alHemen = data之前return 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.这里有一些关于解析的文档。

Answer 2

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. Angularjs 有不同的处理方式。 You need to return promise from factory.您需要从工厂返回承诺。 For example-例如-

 .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;
                    });

     });

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-06-10 10:10:12

EDIT编辑

解决方案2
0 2015-06-10 10:20:59

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-06-10 10:10:12

EDIT编辑

解决方案2 0 2015-06-10 10:20:59

解决方案1
2 已采纳 2015-06-10 10:10:12

解决方案2
0 2015-06-10 10:20:59