我正在尝试了解如何使用angular构建自适应网站。使用服务器上的目录结构（用于脚本）：
/scripts
/external
/phone
/tablet
/desktop
...
与modernizr和LABjs等库一起，我可以设置如下内容：
的index.html
<!doctype html>
<head> ... </head>
<body ng-controller="GlobalCtrl">
<div ng-view=""></div>
<script src="/scripts/external/LABjs"></script>
<script>
var prefix = '';
switch(deviceType) {
case 'phone': prefix = '/scripts/phone'; break;
case 'tablet': prefix = '/scripts/tablet'; break;
case 'desktop': prefix = '/scripts/desktop'; break;
}
$LAB
// load third party scripts
.script("/scripts/external/modernizer.js")
.script("/scripts/external/angular.js")
.script(etc...).wait()
// load device specific scripts, last should bootstrap module 'app'
.script(prefix.concat('/app.js'))
.script(etc...)
</script>
</body>
</html>
然后，当然，目录/scripts/{phone,tablet,desktop}等将包含一个文件：
app.js
angular.module('app',['device', 'specific', 'dependencies'])
// all other controllers inherit from this controller's scope
.controller('GlobalCtrl', ['device', 'specific', 'injectables',
function(device, specific, injectables) {
// setup global helpers here, e.g. user authentication
}]);
此设置可确保不为每种类型的设备加载不必要的模块/脚本，例如/scripts/{phone,tablet}目录可能包含Hammer.js，而/scripts/desktop则不包含GlobalCtrl。
然而，问题是每个/scripts/{phone,tablet,desktop}/app.js文件中angular.module('app', ['modules', 'common', 'to', 'all'])
.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
function(injectables, common, to, all) {
// code common to all
}]);
的定义可能存在大量重叠。
为了解决这个问题，最好有这样的事情：
/scripts/app.js
/scripts/{phone,tablet,desktop}/app.js然后// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones
文件将具有：
例如，/ script / phone / app.js
GlobalCtrl问题1）上述情况是否可行，以便在不加载不必要的依赖项时，不需要在每个angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);
中重复代码？
问题2）另一方面，如果我做了：
/scripts/app.js
/scripts/{phone,tablet,desktop}/app.js我在每个angular.module('app.phone', ['phone', 'specific', 'dependencies']);
的位置：
例如，/ script / phone / app.js
angular.module('app')然后app.phone会为 EVERY 类型的设备加载所有设备特定的依赖项，对吧？例如，如果app.tablet和angular-gestures具有app作为依赖关系，则每次都会app.desktop加载该模块（即使GlobalCtrl未使用该模块1}}模块）？
也许我会以错误的方式解决这个问题。如果您对初始化模块和加载脚本的最佳实践有所了解，请通知我！我不确定是否可以将每种类型设备共用的angular.module('app', ['common', 'dependencies'])
.controller('GlobalCtrl', ['common', 'injectables',
function(common, injectables) {
// common code here
}]);
中的代码注入每个控制器？
在写这篇文章时，我意识到我（可能）正在考虑它。我想我应该做的是：
/scripts/app.js
/scripts/{phone,tablet,desktop}/app.js然后将此模块注入目录angular.module('app.phone', ['app', 'phone_specific_dependencies'])
// extend 'GlobalCtrl' here somehow
中的每个设备特定模块，如：
例如，/ script / phone / app.js
app.phone最后，我需要使用modernizr（有条件地）在脚本加载器中引导app.tablet，app.desktop，GlobalCtrl中的一个。
另一个想法。对于每种设备类型，将子控制器设为<!doctype html>
<head> ... </head>
<body ng-controller="GlobalCtrl">
<div ng-controller="Global.{{DEVICE}}Ctrl">
<div ng-view=""></div>
</div>
<script src="/scripts/external/LABjs"></script>
<script>
// script load etc...
</script>
</body>
</html>
。
的index.html
angular.module('app', ['common', 'dependencies'])
.constant('DEVICE', 'Phone') // set dynamically using modernizr
.controller('GlobalCtrl', ['common', 'injectables',
function(common, injectables) {
// common code
}]);
/scripts/app.js
angular.module('app.phone', ['app','phone_specific_dependencies'])
.controller('Global.PhoneCtrl', ['phone_injectables',
function(phone_injectables) {
// scope here inherits from GlobalCtrl
}]);
例如，/ script / phone / app.js
{{1}}
答案 0 :(得分：0)
万一有人停下来，解决方案2似乎是最好的。