Question

我想在获取初始数据后才能显示我的视图，并且我试图通过路径解析来完成此操作，但我无法让它工作。我究竟做错了什么？此外，我的角度技巧有点破旧，所以如果我的问题是愚蠢的话，我会事先提出异议。

Application.js：

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

Application.config(['$routeProvider', '$interpolateProvider',

    function($routeProvider, $interpolateProvider) {

        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');

        $routeProvider

            .when('/packing/scan.html', {
                templateUrl: 'packing/scan.html',
                controller: 'PackingScanController',
                resolve: {
                    initData : Application.PackingScanInit()
                }
            })

            .when('/packing/stats.html', {
                templateUrl: 'packing/stats.html',
                controller: 'PackingStatisticsController'
            })

            etc

这是我的Scan.js文件：

Application.PackingScanInit = function ($q,$timeout,$http) {

    var serverData = "";

    $http.get('/packing/scan.action')
        .success(function(data){
            serverData = data;
        })
        .error(function(data){
            serverData = data;
        });

    return serverData;

}

Application.controller('PackingScanController', ['initData', '$scope', '$http', function(initData, $scope, $http) {

    var packer = this;

    // Message log model
    packer.messageLog = [{
        status : "",
        message : null      
    }];

文件包含在此订单中。

Answer 1

试试这个：

Application.PackingScanInit = function ($q,$timeout,$http) {

    return $http.get('/packing/scan.action')
        .success(function(data){
            return data;
        })
        .error(function(data){
            return data;
        });

}

此外，你必须调整你的决心：

   resolve: {
                initData : Application.PackingScanInit
            }

这是一个具体的工作示例：

(function() {

  angular.module('app',['ngRoute']);

  function TestCtrl($scope, initData) {
    $scope.value = initData;
  }

  angular.module('app').config(function($routeProvider) {
    $routeProvider.otherwise({
      template: '`<p>Dude {{value}}</p>`',
      controller: TestCtrl,
      resolve: {
        initData: function($http) {

          return $http.get('test.json')  //change to test-e.json to test error case
            .then(function(resp) {
              return resp.data.value;  //success response
            }, function() {
              return 'Not Found';  // error response
            });

        }
      }
    });
  });

})();

http://plnkr.co/edit/SPR3jLshcpafrALr4qZN?p=preview

Answer 2

服务是单件意味着只有一个但只有时间但是如果你只是从服务返回它将被调用一次，但如果你从服务返回一个函数，它将被一次又一次地调用。见下面的样本工作。< / p>

var app = angular.module('ajay.singhApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/view1', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        resolve: {
            myVar: function (repoService) {
                return repoService.getItems().then(function (response) {
                    return response.data;
                });
            }
        }
      })
        .when('/view2', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
      .otherwise({
        redirectTo: '/view1'
      });
  }]);


app.factory('repoService', function ($http) {
    return {
        getItems: function () {
            return $http.get('TextFile.txt');
        }
    };
});

为什么我不能在路由解析中使用$ http服务？

2 个答案: