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

Question

I'm having an issue with loading JSON data before entering main controller.

I'm using this project as a template for my project. I basically altered only dist/app/home/home.js and there are the altered contents:

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
    }

And the thing is markers: ['$http', function ($http) {...}] doesn't get triggered. So I checked the address of the default page being loaded ( window.location.href ) and it turned out to be file:///home/myuser/path/to/project/dir/views/index.html (you can see the corresponding code here ).

So it doesn't really set up a server and just opens local file (I guess?).

How can I get this $routeProvider.when(...) clause triggered? Can I do it at all?

Thank you.

Answer 1

If someone else is experiencing the same issue - I end up using next method:

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 
        }