重构大AngularJS模块配置为独立的文件 [英] refactor large AngularJS module config into separate files
问题描述
问题：大配置（）
我AngularJS应用程序的配置在增长相当大。你会如何重构以下为独立的文件？
// app.js
angular.module（'对myApp'）
的.config（函数（$ urlRouterProvider，$ stateProvider，$ httpProvider）{
//配置路由（uiRouter）
$ urlRouterProvider.when（'/网站'，'/网站/欢迎'）;
$ stateProvider.state（'主'，...
... //配置HTTP拦截器
$ httpProvider.interceptors.push（函数（）{
...
}）;
}）;
选项1.多个配置（）取值
我知道我可以有多个配置（）和它们放在像这样单独的文件：
// app.js
angular.module（'对myApp'）;// routerConfiguration.js
angular.module（'对myApp'）
的.config（函数（$ urlRouterProvider，$ stateProvider）{
//配置路由（uiRouter）
$ urlRouterProvider.when（'/网站'，'/网站/欢迎'）;
$ stateProvider.state（'主'，...
...// httpInterceptorConfig.js
angular.module（'对myApp'）
的.config（函数（$ httpProvider）{
//配置HTTP拦截器
$ httpProvider.interceptors.push（函数（）{
...
}）;
}）;
我不喜欢这个怎么样，是在原app.js，有没有得到什么是在启动时运行的概述的方式。
选项2注入的东西
我将在app.js. preFER做这样的事情，因为它会更容易看到什么配置，直接不过，我知道这是不可能的，因为我们不能注入服务纳入配置（）。
我用提供商来解决这个？有没有更好的办法？
// app.js
angular.module（'对myApp'）
的.config（功能（routerConfig，httpInterceptorConfig）{
routerConfig.setup（）;
httpInterceptorConfig.setup（）;
}）;// routerConfig.js
angular.module（'对myApp'）
.factory（'routerConfig'，函数（$ urlRouterProvider，$ stateProvider）{
返回{
设置：功能（）{
//配置路由（uiRouter）
$ urlRouterProvider.when（'/网站'，'/网站/欢迎'）;
$ stateProvider.state（'主'，...
...
}
};
}）;
}）;// httpInterceptorConfig.js
angular.module（'对myApp'）
.factory（'httpInterceptorConfig'，函数（$ httpProvider）{
返回{
设置：功能（）{
//配置HTTP拦截器
$ httpProvider.interceptors.push（函数（）{
...
}
};
}）;
}）;
您可以使用 .constant 作为依赖于的.config ，所以你可以使用config声明作为手动组成根源。例如：
angular.module（'对myApp'）
的.config（函数（$ urlRouterProvider，$ stateProvider，$ httpProvider，
routerConfig，httpInterceptorConfig）{
routerConfig（$ urlRouterProvider，$ stateProvider）;
httpInterceptorConfig（$ httpProvider）;
}）;// routerConfig.js
angular.module（'对myApp'）
.constant（'routerConfig'，函数（$ urlRouterProvider，$ stateProvider）{
...
}）;
}）;// httpInterceptorConfig.js
angular.module（'对myApp'）
.constant（'httpInterceptorConfig'，函数（$ httpProvider）{
...
}）;
}）;
缺点这种方法是，你必须注入的所有的你的配置依赖到根的配置功能，然后手动将它们注入到您的常量配置功能。如果你有很多不同的配置的功能，这可能会导致混乱。它也可以看有点像你的配置功能都具有由角注入的依赖关系，但事实上，你正在做手工。你需要确保你记住每次添加新的配置功能的时间做手工布线。
pferred办法我的$ P $仅仅是呼吁一个文件夹配置仅包含CONFIG电话。
Problem: Large config()
The config of my AngularJS app is growing quite large. How would you refactor the following into separate files?
// app.js
angular.module('myApp')
.config(function($urlRouterProvider, $stateProvider, $httpProvider) {
// Configure routing (uiRouter)
$urlRouterProvider.when('/site', '/site/welcome');
$stateProvider.state('main', ...
...
// Configure http interceptors
$httpProvider.interceptors.push(function () {
...
});
});
Option 1. Multiple config()s
I know that I can have multiple config()s and place them in separate files like this:
// app.js
angular.module('myApp');
// routerConfiguration.js
angular.module('myApp')
.config(function($urlRouterProvider, $stateProvider) {
// Configure routing (uiRouter)
$urlRouterProvider.when('/site', '/site/welcome');
$stateProvider.state('main', ...
...
// httpInterceptorConfig.js
angular.module('myApp')
.config(function($httpProvider) {
// Configure http interceptors
$httpProvider.interceptors.push(function () {
...
});
});
What I do not like about this, is that in the original app.js, there is no way of getting an overview of what is run at startup.
Option 2. Inject something
I would prefer to do something like this, because it would be easier to see what is configured, directly in the app.js. However I know that this is not possible, since we cannot inject services into config().
Can I use providers to solve this? Is there a better way?
// app.js
angular.module('myApp')
.config(function(routerConfig, httpInterceptorConfig) {
routerConfig.setup();
httpInterceptorConfig.setup();
});
// routerConfig.js
angular.module('myApp')
.factory('routerConfig', function($urlRouterProvider, $stateProvider) {
return {
setup: function() {
// Configure routing (uiRouter)
$urlRouterProvider.when('/site', '/site/welcome');
$stateProvider.state('main', ...
...
}
};
});
});
// httpInterceptorConfig.js
angular.module('myApp')
.factory('httpInterceptorConfig', function($httpProvider) {
return {
setup: function() {
// Configure http interceptors
$httpProvider.interceptors.push(function () {
...
}
};
});
});
You can use .constant as a dependency in a .config, so you could use the config declaration as a manual composition root. For example:
angular.module('myApp')
.config(function($urlRouterProvider, $stateProvider, $httpProvider,
routerConfig, httpInterceptorConfig) {
routerConfig($urlRouterProvider, $stateProvider);
httpInterceptorConfig($httpProvider);
});
// routerConfig.js
angular.module('myApp')
.constant('routerConfig', function($urlRouterProvider, $stateProvider) {
...
});
});
// httpInterceptorConfig.js
angular.module('myApp')
.constant('httpInterceptorConfig', function($httpProvider) {
...
});
});
Drawbacks to this approach are that you have to inject all of your config dependencies into the root config function, then manually inject them into your constant config functions. If you have a lot of different config functions, this could get messy. It can also look kind of like your config functions are having dependencies injected by Angular, but in fact you are doing it manually. You would need to make sure you remember to do the manual wiring every time you add a new config function.
My preferred approach is just to have a folder called "config" containing exclusively config calls.
这篇关于重构大AngularJS模块配置为独立的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
