如何在电子角度样板中使用$ routeProvider的解析?

时间:2016-05-24 09:23:29

标签: javascript angularjs resolve

我在进入主控制器之前遇到加载JSON数据的问题。

我正在使用this项目作为我项目的模板。我基本上只更改了dist / app / home / home.js,并且有更改的内容:

angular.module('WellJournal', ['uiGmapgoogle-maps', 'ngRoute'])
    .config(function (uiGmapGoogleMapApiProvider, $routeProvider) {
        uiGmapGoogleMapApiProvider.configure({
            libraries: 'geometry,visualization,places'
        });

        $routeProvider.when('/', {
            templateUrl: 'index.html',
            controller: 'MainController',
            resolve:  {
                markers: ['$http', function ($http) {
                    return $http.get('http://address/api/markers/').then(function (result) {
                        console.log(result.data);
                        return result.data;
                    });
                }]
            }
        });

        $routeProvider.otherwise({ redirectTo: '/' });
    })
    .controller('MainController', function ($scope, $uibModal) {
    //trying to access $scope.markers here
    }

事情是markers: ['$http', function ($http) {...}]没有被触发。所以我检查了正在加载的默认页面的地址(window.location.href),结果是file:///home/myuser/path/to/project/dir/views/index.html(您可以看到相应的代码here)。

所以它并没有真正设置服务器而只是打开本地文件(我猜?)。

如何触发此$routeProvider.when(...)子句?我可以这样做吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

如果其他人遇到同样的问题 - 我最终会使用下一个方法:

angular.module('WellJournal', ['uiGmapgoogle-maps'])
        .run(function($http, $rootScope){
            $http.get('http://address/api/markers/').
            success(function(data, status, headers, config) {
                $rootScope.markers = data;
                $rootScope.$broadcast('markers-loaded');
            }).
            error(function(data, status, headers, config) {
                // log error
                alert('error');
            });
        })
        .factory('markers', function ($rootScope) {
            var markers;
            $rootScope.$on('markers-loaded', function(){
                markers = $rootScope.markers;
            });
            return {
                data: markers
            }
        })
        .config(function (uiGmapGoogleMapApiProvider) {
            uiGmapGoogleMapApiProvider.configure({
                libraries: 'weather,geometry,visualization,places'
            });
        })
        .controller('MainController', function ($scope, $uibModal, $http, $rootScope, markers) {
        // use data through markers argument
        //Warning! This doesn't assure that the data is loaded before page
        //I'm experiencing small visual lag while loading but this is the best I could do 
        }