Question

只要我没有使用解析，UI路由器就可以正常工作。我不明白这些伎俩。我很感激你帮助我理解这个问题。以下是代码。

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

操作系统中的UI路由器 [不工作] - 控制台不会打印任何内容。

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/',
        resolve: {
            param1: function (RandomFactory) {
                console.log('test');
                return RandomFactory();
            }
        },
        controller: 'RandomController',
        });
    $urlRouterProvider.otherwise("/");
}]);

UI路由器 [工作] - 控制台打印。

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/',
        resolve: {
            param1: function () {
                console.log('test');
                return "hello";
            }
        },
        controller: 'RandomController',
        });
    $urlRouterProvider.otherwise("/");
}]);

厂

myApp.factory('RandomFactory', ['', function () {
    return "Hello there";
}])

控制器

myApp.controller('RandomController', ['$scope', function ($scope, param1) {
    $scope.param = param1;
}]);

我已经阅读了以下帖子。

angular-ui router -- inherited resolved dependencies for NAMED dependencies
Angular ui-router fails to resolve named dependencies
Angular-ui-router: managing dependencies with resolve
Promise dependency resolution order in angular ui-router

可能是我错过了一些东西，但我已经花了5个多小时。

这是一个小提琴 - http://jsfiddle.net/kshitij/NPN7T/8/

解决方案

工厂定义中的空字符串是个问题。虽然框架应该为这种情况定义一个错误，因为它会帮助新来的人。

Answer 1

请参见此处：http://plnkr.co/edit/cyZPh5h1lIYykqrh8Igh?p=preview

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

myApp.factory('RandomFactory', function () {
    return "Hello there";
});

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/state1',
        template:"<p>{{param1}}</p>",
        controller: function($scope,param1) {

            $scope.param1 = param1;

       },
        resolve: {
            param1: function (RandomFactory) {
                return RandomFactory;
            }
        }
    });
    $urlRouterProvider.otherwise("/state1");
}]);

你在工厂定义中的错误应该是（删除空字符串）

myApp.factory('RandomFactory', [function () {
    return "Hello there";
}])

你应该返回RandomFactory而不是在解析时执行它

resolve: {
            param1: function (RandomFactory) {
                return RandomFactory;
            }
        }

Answer 2

在我看来，resolve中的state1函数没有被调用，因为你已经为它注入了一个不存在的注入（RandomFactory）。

为什么不存在？您使用['', function() {...}]以不正确的方式声明了它。如果您不想注入任何依赖项，只需省略数组的第一项而不是使用空字符串。像这样：[function() {...}]。这太糟糕了，没有一个很好的错误信息，但这似乎是它无法正常工作的原因。

请看这里适用于我：

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

Angular ui-router无法加载，更不用说解决工厂依赖关系了

2 个答案: