Angular的ui-router无法加载，更不用说解析工厂依赖了

Angular ui-router fails to load let alone resolve factory dependencies

本文关键字：工厂 依赖 更不用说 ui-router 加载 Angular      更新时间：2023-09-26

只要我不使用resolve， UI路由器就可以正常工作。我不懂这些把戏。如果你能帮助我理解这个问题，我会很感激的。代码如下:

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

UI Router in action [Not Working] - Console不打印任何东西

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 Router [Working] - Console打印。

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;
}]);

我已经看了下面的帖子。

  1. angular-ui router——继承NAMED dependencies的解析依赖
  2. Angular ui-router解析命名依赖失败
  3. Angular-ui-router:用resolve管理依赖
  4. 在angular ui-router中承诺依赖解析顺序

也许我遗漏了什么，但我已经花了5个多小时在这上面了。

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

解决方案

工厂定义中的空字符串是问题所在。尽管框架应该为这种情况定义一个错误，因为它会帮助新手。

请看这里: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");
}]);

你在工厂定义中很少有错误，它应该像(remove empty string)

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

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

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

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

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

看这里哪个适合我:

http://plnkr.co/edit/QYfMSV6zdBC0Ra2HiF2Z?p =预览

相关文章：