angularjs - 当 AngularJS 中返回 JSON 时,使用 Resolve 显示模板

标签 angularjs angularjs-scope

我有一个被点击的 URL, Controller 的模型是来自 API 调用的数据。目前,当模板呈现时,数据还没有返回,所以我得到一个空白页面。

我研究了并发现 Resolve 是可以采取的方法,但我运气不佳。下面是我所拥有的,但我对 Angular 还很陌生,所以这可能完全是错误的方法。

//app.js    
(function () {
    'use strict';

    var app = angular.module('barbato', []).
           config(function ($routeProvider) {
               $routeProvider.
                   when('/', {
                       controller: 'ReposController',
                       templateUrl: '/Content/templates/repos.html',
                       resolve: {
                           myVar: function(repoService) {
                               return repoService.getItems();
                           }
                       }
                   }).
                   otherwise({ redirectTo: '/' });
           });

    app.factory('repoService', function ($http) {

        return {
            getItems: function () {
                $http.get('http://localhost:12008/getrepodata/jchannon').then(function (response) {
                    return response.data;
                });
            },
        };
    });

})();




//repo.js    
(function () {
    'use strict';

    var app = angular.module('barbato');

    var repooController = app.controller(
        'ReposController', ['$scope','myVar', function ($scope, myVar) {
            $scope.items = myVar;
        }
    ]);

})();

最佳答案

您应该对代码进行一些修改

resolve: {
            myVar: function (repoService) {
                return repoService.getItems().then(function (response) {
                    return response.data;
                });
            }
        }


app.factory('repoService', function ($http) {
    return {
        getItems: function () {
            return $http.get('http://localhost:12008/getrepodata/jchannon');
        }
    };
});

关于angularjs - 当 AngularJS 中返回 JSON 时,使用 Resolve 显示模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16692793/

相关文章:

javascript - AngularJS:在 View 更新时运行函数

javascript - 使用 'alert' 时出现意外的 Angular 行为

javascript - 单击函数之间的 Angular ,共享指令模板

javascript - Angular $http get 在浏览器中有效,但在设备上无效 - Ionic

javascript - AngularJS:嵌入创建新范围

node.js - Angular 错误的原因 : "Error: No module: ngCookies"?

javascript - 如何在外部站点上创建 Angular 应用程序的登录

javascript - AngularJS - $注入(inject)器 :modulerr Module Error in angular. js:36

html - 使用angular修改css类属性

javascript - 如何在 $http body angularjs 中调用方法