Javascript angularjs模块：扩展依赖项？现状_Javascript_Angularjs_Dependency Injection_Module

Javascript angularjs模块：扩展依赖项？现状

javascript angularjs dependency-injection module

Javascript angularjs模块：扩展依赖项？现状,javascript,angularjs,dependency-injection,module,Javascript,Angularjs,Dependency Injection,Module,我试图了解如何建立一个具有角度适应性的网站。在服务器上使用目录结构（用于脚本），大致如下： /scripts /external /phone /tablet /desktop ... 与诸如modernizer和LABjs之类的库一起，我可以设置如下内容： index.html <!doctype html> <head> ... </head> <body ng-controller="GlobalCtrl"> &l

我试图了解如何建立一个具有角度适应性的网站。在服务器上使用目录结构（用于脚本），大致如下：

/scripts
  /external
  /phone
  /tablet
  /desktop
  ...

与诸如

modernizer

和

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>

<!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>

此设置确保不会为每种类型的设备加载不必要的模块/脚本，例如

/scripts/{phone，tablet}

目录可能包含

Hammer.js

，而

/scripts/desktop

目录可能不包含

然而，问题在于，在每个

/scripts/{phone，tablet，desktop}/app.js

文件中，

GlobalCtrl

的定义可能存在大量重叠

可能性？为了补救这种情况，最好能有这样的东西：

/scripts/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

然后

/scripts/{phone，tablet，desktop}/app.js

文件将具有：

例如/scripts/phone/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

问题1）是否可以在不加载不必要的依赖项的情况下，在每个
```
GlobalCtrl
```
中不需要重复代码
问题2）另一方面，如果我这样做了：

/scripts/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

在每个

/scripts/{phone，tablet，desktop}/app.js

中，我有：

例如/scripts/phone/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

然后，

angular.module（'app'）

将为每种类型的设备加载所有特定于设备的依赖项，对吗？例如，如果

app.phone

和

app.tablet

依赖

angular signatures

，则

app

每次都会加载该模块（即使

app.desktop

模块未使用该模块）

也许我走错了方向。如果您有关于初始化模块和加载脚本的最佳实践的见解，请通知我！我不确定是否可以将每种类型设备通用的

GlobalCtrl

中的代码注入到每个控制器

第一个解决方案？在写这篇文章的时候，我意识到我（可能）是在逆向思考。我想我应该做的是：

/scripts/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

然后将此模块插入目录

/scripts/{phone，tablet，desktop}/app.js

中的每个特定于设备的模块，如：

例如/scripts/phone/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

最后，我需要使用Modernizer（有条件地）在脚本加载程序中引导

app.phone

、

app.tablet

、

app.desktop

中的一个

第二种解决方案？想到了另一个。对于每种设备类型，为

GlobalCtrl

创建一个子控制器

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>

<!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>

例如/scripts/phone/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
}]);

angular.module('app', ['modules', 'common', 'to', 'all'])

.controller('GlobalCtrl', ['injectables', 'common', 'to', 'all',
    function(injectables, common, to, all) {
        // code common to all
}]);

// add phone specific, module dependencies to angular.module('app')
// add code to 'GlobalCtrl' specific to phones

angular.module('app', ['common_dependencies', 'app.phone', 'app.tablet', 'app.desktop']);

angular.module('app.phone', ['phone', 'specific', 'dependencies']);

angular.module('app', ['common', 'dependencies'])

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code here
}]);

angular.module('app.phone', ['app', 'phone_specific_dependencies'])

// extend 'GlobalCtrl' here somehow

angular.module('app', ['common', 'dependencies'])

.constant('DEVICE', 'Phone') // set dynamically using modernizr

.controller('GlobalCtrl', ['common', 'injectables',
    function(common, injectables) {
        // common code
}]);

angular.module('app.phone', ['app','phone_specific_dependencies'])

.controller('Global.PhoneCtrl', ['phone_injectables',
    function(phone_injectables) {
        // scope here inherits from GlobalCtrl
}]);

万一有人路过，解决方案2似乎是最好的。

您似乎已经把一切都安排好了，那么问题是什么呢？：）