AngularJS + 路由 + 解析 [英] AngularJS + Routing + Resolve

问题描述

我收到此错误:

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

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

注入器未知提供者

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

Here's my router (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) {
...
    }
}

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

The data is getting to the controller, I see it in the alert. However, after the controller is done, during the rendering of the view (I think), the issue seems to be happening.

最终呈现的视图有两个控制器:一个位于 body 标签中的主控制器，以及位于其中的第二个控制器DealerLeads".我已尝试移除主控制器，但问题仍然存在.

The final rendered view has two controllers: One main controller in the body tag, and the second controller 'DealerLeads' inside of that. I've tried removing the main controller, and the issue is still present.

我做错了什么?是否还有其他代码需要理解/解决问题?

What am I doing wrong? Is there any more code that is necessary to understand/resolve the issue?

推荐答案

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

When you use route resolve argument as dependency injection in the controller bound to the route, you cannot use that controller with ng-controller directive because the service provider with the name HttpResponse does not exist. It is a dynamic dependency that is injected by the router when it instantiates the controller to be bound in its respective partial view.

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

Just remove the ng-controller="DealerLeads" from the view and make sure that view is part of the html rendered by the state leads @ templateUrl: "views/leads.html",. Router will bind it to the the template for you resolving the dynamic dependency HttpResponse. If you want to use controllerAs you can specify that in the router itself as:-

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 指令，路由器可以在其中实例化控制器.

make sure that DealerLeads is accessible at the place where the route is defined. It would be a better practice to move the route definition to its own controller file so that they are all in one place. And whenever possible especially in a partial view of a route it is better to get rid of ng-controller starting the directive and instead use route to instantiate and bind the controller for that template. It gives more re-usability in terms of the view as a whole not being tightly coupled with a controller name and instead only with its contract. So i would not worry about removing ng-controller directive where router can instantiate the controller.

这篇关于AngularJS + 路由 + 解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！