[英]Exporting angularjs module as es6 module
You are supposed to wrap angularjs modules in an IIFE according to the styleguide, which we use您应该根据我们使用的样式指南将 angularjs 模块包装在 IIFE 中
https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife
my-dir.js我的目录.js
(function() {
'use strict';
angular
.module('my.dir', [])
.controller('MyDirController', MyDirController),
.directive('my-dir', MyDirDirective);
function MyDirController() {
}
function MyDirDirective() {
return {
restrict: 'E',
controller: MyDirController
}
}
})();
app.js应用程序.js
(function() {
'use strict';
angular
.module('app', ['my.dir'])
})();
But as we are now using webpack to bundle es6 modules.但是因为我们现在使用 webpack 来捆绑 es6 模块。 How are we supposed to use this IIFE and
export
?我们应该如何使用这个 IIFE 并
export
? We can't do export default angular.module('my-dir', [])
as export must be a top-level command.我们不能做
export default angular.module('my-dir', [])
因为 export 必须是顶级命令。 Also, we should just be returning a string of the name of the module?另外,我们应该只返回模块名称的字符串吗? So that it can be included as a require in the
app
module.这样它就可以作为
app
模块中的需求包含在内。 What is best practice?什么是最佳实践?
This works, but you have to retype the module name, and seems a bit messy having the export outside the IIFE (Which I assume has to be the case)这有效,但您必须重新输入模块名称,并且在 IIFE 之外导出似乎有点混乱(我认为必须是这种情况)
(function() {
angular.module('my.dir', [])
.controller('MyDirController', MyDirController)
.directive('my-dir', MyDirDirective);
function MyDirDirective(appPath) {
return {
restrict: 'E',
scope: {},
bindToController: {},
controllerAs: '$ctrl',
template: '<div ng-bind="$ctrl.msg"></div>',
controller: MyDirController
};
}
function MyDirController() {
var self = this;
self.msg = "Hello World";
}
})();
export default 'my.dir'
After moving to modules, the new structure has become移到模块后,新的结构变成了
app.js应用程序.js
import myDir from './my-dir.js'
angular.module('app', [myDir.name]);
my-dir.js我的目录.js
// import template from './my-dir.html'; // Can use this with template property
export default angular.module('my.dir', [])
.controller('MyDirController', MyDirController)
.directive('my-dir', MyDirDirective);
function MyDirDirective() {
return {
restrict: 'E',
scope: true,
bindToController: {},
controllerAs: '$ctrl',
template: '<div ng-bind="$ctrl.msg"></div>',
controller: MyDirController
};
}
function MyDirController() {
const self = this; // Not needed if using arrow functions
self.msg = "Hello World";
}
The IIFE is no longer needed as now everything is by default a module if always using any kind of javascript module system不再需要 IIFE,因为如果总是使用任何类型的 javascript 模块系统,默认情况下一切都是模块
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.