在angularJS中页面加载之前获取数据答案

【问题标题】：Get data before page load in angularJS在angularJS中页面加载之前获取数据
【发布时间】：2015-07-29 15:49:14
【问题描述】：

我正在尝试使用 Angular $http 在页面加载之前获取下拉列表。我尝试了几种组合，但它继续给出同样的错误：

错误：[$injector:unpr] 未知提供者：officeListProvider http://errors.angularjs.org/1.4.3/$injector/unpr?p0=officeListProvider%20%3C-%20officeList%20%3C-%20myController

我在 Angular 方面已经几周大了，所以如果有任何愚蠢的错误，请原谅。

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../home/goEeUpdateAngular.obj', {
        templateUrl: '/employee_update_angular.jsp', 
        controller: 'myController',
        resolve: {
            officeList: function(officeListFactory) {
                return officeListFactory.getOfficeList();
            }
        }
    });   
}]);

myApp.factory('officeListFactory', function($http, $window) {
    $window.alert("Hi");
    var factoryResult = {
        getOfficeList: function() {
            var promise = $http({
                method: 'GET', 
                url: '../../home/goOfficesList.obj' 
            }).success(function(data, status, headers, config) {
                console.log (data);
                return data;
            });

            return promise;
        }
    }; 

    console.log (factoryResult.getOfficeList());
    return factoryResult;
});

myApp.controller('myController',function ($scope,officeList) {
    $scope.officeListFactory = officeListFactory.data;
});

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

错误提示“officeListProvider”不存在或不可见，您需要将其添加为依赖项。

请尝试以下更改：

var ctrl = angular.module('myApp.controllers', []);

到

var ctrl = angular.module('myApp.controllers', ['myApp.services']);

另外请使用相同的服务名称，即 srvOfficeList 或 officeList，并检查您的服务工厂，这是不对的 - 例如：AngularJS : factory $http service

希望它能解决问题。

请在发布问题时尝试创建 CodePen（或类似工具），以便可以在其中尝试/修复答案并与您分享。

【讨论】：

感谢 Surya，根据您的建议，我更新了代码。现在 console.log (data) [见上文]，按预期打印 1850 条记录，但我应该如何将它连接到 $routeProvider.resolve() 方法。我想在页面初始化之前加载下拉菜单。
在页面初始化之前加载下拉菜单？你是什么意思？数据在客户端 javascript 中，您需要使用 AngularJS 控制器将其导入 html - 如何将数据从解析加载到控制器，请检查：odetocode.com/blogs/scott/archive/2014/05/20/…
我想在页面加载角度之前从数据库中获取数据。请参阅下面的网址。 tech-blog.maddyzone.com/javascript/get-data-page-load-angular.
我使用了你提到的 URL，他们使用 like - resolve: { message:................................ ............而不是在控制器中注入相同的 app.controller("newsController", function (message). See here name "message" is the same in controller and routerProvider function but when I do the同样[查看我刚刚更新的代码]注入器服务无法识别提供者。这是我得到的错误：错误：[$injector:unpr]未知提供者：officeListProvider

【解决方案2】：

在控制器中你应该只调用 officeList。这是工作的JSFIDDLE。我也采样 webapi 而不是你的 url

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../home/goEeUpdateAngular.obj', {
        templateUrl: '/employee_update_angular.jsp', 
        controller: 'myController',
        resolve: {
            officeList: function(officeListFactory) {
                return officeListFactory.getOfficeList();
            }
        }
    });   
}]);

myApp.factory('officeListFactory', function($http, $window) {
    $window.alert("Hi");
    var factoryResult = {
        getOfficeList: function() {
            var promise = $http({
                method: 'GET', 
                url: '../../home/goOfficesList.obj' 
            }).success(function(data, status, headers, config) {
                console.log (data);
                return data;
            });

            return promise;
        }
    }; 

    console.log (factoryResult.getOfficeList());
    return factoryResult;
});

myApp.controller('myController',function ($scope,officeList) {
    $scope.officeListFactory = officeList.data; //changes are made here
});

【讨论】：

乐于助人。