AngularJS控制器注入Resolver失败，报未知提供者错误求解决建议

看起来你在AngularJS里尝试用resolve给控制器注入依赖时踩坑了，这个Unknown provider: urlParasProvider <- urlParas <- MyController报错其实是很常见的配置问题，我来帮你梳理下问题所在和解决办法：

问题根源 #

你目前的代码里有个关键错误：把控制器的依赖注入配置绑定到了AngularJS模块（myApp）上，而不是控制器构造函数本身，这就导致AngularJS找不到要注入的urlParas依赖。

具体修正步骤 #

1. 修正控制器的依赖注入配置 #

你写的myApp.$inject = ['$scope','urlParas'];是错误的，$inject属性应该绑定到你的控制器构造函数上。正确的写法如下：

// 定义控制器构造函数
function MyController($scope, urlParas) {
  // 现在可以正常使用resolve传来的urlParas了
  console.log('Resolve传来的参数：', urlParas);
}

// 给控制器配置依赖注入（关键！）
MyController.$inject = ['$scope', 'urlParas'];

// 把控制器注册到你的模块
myApp.controller('MyController', MyController);

2. 确保resolve函数的依赖正确注入（如果需要用到其他服务） #

如果之后你要在resolve里使用$location这类AngularJS服务，记得要在resolve的函数里注入它，否则会出现类似的找不到提供者的错误。比如：

resolve: {
  urlParas: function($location) {
    return $location.absUrl();
  }
}

3. 检查路由配置的完整性 #

别忘了确保你的模块依赖了ngRoute（因为要用$routeProvider），同时路由配置要正确注册到模块的config块中：

// 创建模块时依赖ngRoute
var myApp = angular.module('myApp', ['ngRoute']);

// 注册config块
myApp.config(['$routeProvider', config]);

function config($routeProvider){
 $routeProvider
 .when('/abc',{
 controller: 'MyController',
 // 建议加上模板配置，否则控制器可能无法正常挂载
 template: '<div>测试页面</div>',
 resolve: {
 urlParas : function(){
 return 'abc';
 }
 }
 })
 .otherwise({
 controller: 'MyController',
 template: '<div>默认页面</div>',
 resolve: {
 urlParas : function(){
 return 'abc';
 }
 }
 });
}

总结 #

只要把依赖注入的$inject属性正确绑定到控制器构造函数上，再确保路由和控制器的注册流程正确，这个Unknown provider的报错就会消失啦。

内容的提问来源于stack exchange，提问作者Don