AngularJS + 路由 + 解决

Question

我收到这个错误：

Error: Error: [$injector:unpr] http://errors.angularjs.org/1.3.7/$injector/unpr?p0=HttpResponseProvider%20%3C-%20HttpResponse%20%3C-%20DealerLeads

Injector Unknown provider

这是我的路由器 (ui.router)：

$stateProvider
        .state('main', {
            url: "/main",
            templateUrl: "views/main.html",
            data: { pageTitle: 'Main Page' }
        })
        .state('leads', {
            url: "/leads",
            templateUrl: "views/leads.html",
            data: { pageTitle: 'Dealer Leads' },
            controller: 'DealerLeads',
            resolve: DealerLeads.resolve
        })

这是我的控制器：

function DealerLeads($scope, HttpResponse) {
    alert(JSON.stringify(HttpResponse));
}

这是我的决心：

DealerLeads.resolve = {
    HttpResponse: function ($http) {
...
    }
}

数据正在到达控制器，我在警报中看到了。但是，在控制器完成后，在视图渲染期间（我认为），问题似乎正在发生。

最终呈现的视图有两个控制器：一个主控制器在 body 标签中，第二个控制器 'DealerLeads' 在其中。我已经尝试移除主控制器，但问题仍然存在。

我做错了什么？ understand/resolve 这个问题是否需要更多代码？

Answer 1

当您在绑定到路由的控制器中使用路由解析参数作为依赖项注入时，您不能将该控制器与 ng-controller 指令一起使用，因为名称为 HttpResponse 的服务提供者不存在。它是路由器在实例化要绑定到其各自局部视图中的控制器时由路由器注入的动态依赖项。

只需从视图中删除 ng-controller="DealerLeads" 并确保该视图是状态 leads @ templateUrl: "views/leads.html", 呈现的 html 的一部分。路由器会将其绑定到模板，为您解析动态依赖性 HttpResponse。如果您想使用 controllerAs，您可以在路由器本身中指定为：-

controller: 'DealerLeads',
controllerAs: 'leads' //Not sure if this is supported by ui router yet

或

controller: 'DealerLeads as leads',

当你这样做时：

.state('leads', {
        url: "/leads",
        templateUrl: "views/leads.html",
        data: { pageTitle: 'Dealer Leads' },
        controller: 'DealerLeads',
        resolve: DealerLeads.resolve
    })

确保在定义路由的地方可以访问DealerLeads。最好将路由定义移动到它自己的控制器文件中，以便它们都在一个地方。并且只要有可能，尤其是在路由的局部视图中，最好摆脱 ng-controller 启动指令，而是使用路由来实例化和绑定该模板的控制器。它在整个视图方面提供了更多的可重用性，而不是与控制器名称紧密耦合，而是仅与其契约紧密耦合。所以我不担心删除路由器可以实例化控制器的 ng-controller 指令。

Answer 2

我不是很理解你的问题，也不是angular中@PSL的专家。

如果您只是想将一些数据传递给控制器，也许下面的代码可以帮到您。

我从项目中复制了一段代码：

.state('masthead.loadTests.test',{
    url: '/loadTests/:id',
    templateUrl: 'load-tests/templates/load-test-entity.tpl.html',
    controller: 'loadTestEntityCtrl',
    data: { pageTitle: 'loadTests',
        csh: '1005'
    },
    resolve: {
        // Get test entity data before enter to the page (need to know running state)
        LoadTestEntityData: [
            '$stateParams',
            '$state',
            'LoadTestEntity',
            'LoggerService',
            '$rootScope',
            function ($stateParams, $state, LoadTestEntity, LoggerService, $rootScope) {
                // Get general data
                return LoadTestEntity.get({id: $stateParams.id},function () {
                },
                    // Fail
                    function () {
                        // When error navigate to homepage
                        LoggerService.error('error during test initiation');
                        $state.go('masthead.loadTests.list', {TENANTID: $rootScope.session.tenantId});
                    }).$promise;
            }
        ]
    }
})

这里的LoadTestEntityData就是我们注入controller的数据， LoadTestEntity 和 LoggerService 是构建数据所需的服务。

.factory('LoadTestEntity', ['$resource', function ($resource) {
    return $resource(
        '/api/xxx/:id',
        {id: '@id'},
        {
            create: {method: 'POST'},
            update: {method: 'PUT'}
        }
    );
}])

希望对您有所帮助！

AngularJS + 路由 + 解决

AngularJS + Routing + Resolve

javascript

angularjs

angular-ui-router

angularjs-routing