Question

我对Angular很新，我现在已经坚持了几天:( 我有一个Web应用程序（有几种可用的Web工具的门户网站）。我想在最初访问应用程序时从数据库加载一些数据并使用某些控制器中的数据（.i.e。加载数据仅一次）。

这就是我现在所拥有的：

主要应用

 var myApp= angular.module('MyApp',['ngRoute','ngTable','mpcApp','registerApp','forgotPasswordApp','tool1App','loginApp','userManagementApp','init']);

 myApp.config(['$routeProvider','$locationProvider',function($routeProvider) {
  $routeProvider.
    when('/...', {
      templateUrl: 'js/....html',
      controller: 'tool1Ctrl'
    })....

我也有myApp.run - 但我稍后会对其进行描述。

我为我的工厂创建了不同的模块：

    (function (angular) {    

    var initApp = angular.module('init',[]);

    initApp.factory('EndPoints', ['$http', function($http) {
        var EndPointsList="";
        return{
            getList: function(){
                $http.post("/getEndPoints", {
                    transformRequest : angular.identity,
                    headers : {'Content-Type' : undefined}
                }).

                success(function(data, status, headers, config) {               
                EndPointsList = data;
                    console.log(EndPointsList);
                    return EndPointsList;

                }).error(function(data, status, headers, config) {
                    console.log("Failed to load end-points list");                      

                                });
                return EndPointsList;
            }
        };

    }]);
})(angular);

我接下来要做的是将这个工厂注入myApp.run：

myApp.run(['$rootScope', '$location', 'SessionIdService','EndPoints', function($rootScope, $location, SessionIdService,EndPoints) {

    $rootScope.EndPoint= EndPoints.getList();
    console.log("Current end-point: " + $rootScope.appEnv);
...

这只是不起作用！我根本没有在控制台中看到打印，当我尝试在另一个模块中的另一个控制器中使用$ scope.EndPoint时，它看起来是空的。

控制器代码：

    var Tool1Controllers= angular.module('tool1App',[]);
    Tool1Controllers.controller('toolCtrl', ['$scope', '$http','$rootScope', function ($scope, $http,$rootScope) {

console.log("Test: Controller end-point: " + $scope.EndPoint);

请帮忙！：（

Answer 1

问题似乎是你在$ http promise完成之前返回一个字符串。您需要在返回数据之前等待http响应，或者返回promise并让使用者实现结果处理程序。

尝试更新initApp.factory('EndPoints', ['$http', function($http) { return{ getList: function(){ return $http.post("/getEndPoints", { transformRequest : angular.identity, headers : {'Content-Type' : undefined} }); } }; }]);，如下所示：

run

您的EndPoints.getList() .success(function(data, status, headers, config) { $rootScope.EndPoint= data; }).error(function(data, status, headers, config) { console.log("Failed to load end-points list"); });作业为：

initApp.factory('EndPoints', ['$http', '$q', function($http, $q) {
    var endpoints = null;

    return{
        getList: function() {
            return endpoints ?
                // if data is already cached, return it
                $q(function(resolve, reject) { resolve(endpoints); }) :
                // otherwise fetch it from the service, cache it and return it
                $http.post("/getEndPoints", {
                    transformRequest : angular.identity,
                    headers : {'Content-Type' : undefined}
                }).then(function(data) { endpoints = data; return data; });
        }
    };

}]);

更新：将数据附加到$ rootScope的替代方法是让工厂缓存数据，并提供一种从缓存或远程端点返回数据的方法（如果尚未缓存）：

.controller ...

EndPoints.getList()
    .then(function(data) {               
        $scope.someVariable = data;
    }, function(error) {
        console.log("Failed to load end-points list");                      
    });

...

现在在您的控制器中，您可以注入服务并为getList promise定义结果处理程序：

ShowDialog()

由于工厂是单件，您可以将端点服务注入任意数量的控制器，并且应返回相同的缓存数据，以便最多调用1个远程端点。

Angular - 在app启动时加载数据并在不同模块的控制器中使用

1 个答案: