Dependency injection 如何让AngularJS模块使用自己的控制器？

我试图学习AngularJS的视图和路由机制，如下所示

我的问题是，教程将其所有控制器声明为全局范围，我认为这是一种不好的做法，因为我们在添加更多控制器时会污染它

这是一个快速工作的页面，我已经能够按照前面提到的教程构建（有：

试验
“严格使用”；
var MyFirstController=函数（$scope）{
//在这里做点什么。
};
var MySecondController=函数（$scope）{
//在这里做点什么。
};
var myModule=angular.module（“myModule”，[]）；
myModule.config（[“$routeProvider”），函数（$routeProvider）{
$routeProvider.when（“/第一页”{
模板：“我的第一个控制器。
”，
控制器：MyFirstController
});
$routeProvider.when（“/第二页”{
模板：“我的第二个控制器。
”，
控制器：MySecondController
});
}]);
$（文档）.ready（函数（）{
引导（文档，[“MyModule]”）；
});
试验

出于天真，我尝试在模块内移动控制器：

myModule.config（[“$routeProvider”），函数（$routeProvider）{
$routeProvider.when（“/第一页”{
模板：“我的第一个控制器。
”，
控制器：MyFirstController
});
$routeProvider.when（“/第二页”{
模板：“我的第二个控制器。
”，
控制器：MySecondController
});
}]);
控制器（“MyFirstController”、[“$scope”、函数（$scope）{
//在这里做点什么。
}]);
控制器（“MySecondController”，[“$scope”，函数（$scope）{
//在这里做点什么。
}]);

唉，它（显然）不起作用，抛出一个

ReferenceError:MyFirstController未定义
异常

如何让AngularJS模块在自己的routes配置中使用自己的控制器？
了解解决方案后，非常简单：只需将控制器指定为字符串而不是对象：

myModule.config（[“$routeProvider”），函数（$routeProvider）{
$routeProvider.when（“/第一页”{
模板：“我的第一个控制器。
”，
控制器：“MyFirstController”
});
$routeProvider.when（“/第二页”{
模板：“我的第二个控制器。
”，
控制器：“MySecondController”
});
}]);

这样AngularJS将把控制器名称解析为您在模块中定义的名称

而且它也很安全

我创造了