作者：好学的程序员 | 来源：互联网 | 2023-02-04 19:59
希望得到一些澄清,为什么以下不能按预期工作,希望,这是我可能忽略的一些简单.没有Webpack,当前的实现可以按预期工作.
理想情况下,我希望保持当前的实现,我觉得注册组件/控制器/等应该在自己的文件中完成,只需指向相关模块.但如果这不是最佳做法,我也希望看到另一个建议.
文件root.module是我定义根模块的地方,然后在root.component文件中我将组件添加到该模块.
不导入模块的当前实现:
//root.component.js
'use strict';
var root = {
template: require('./root.html')
};
module.exports = angular
.module('root')
.component('root', root);
'use strict';
//root.module.js
module.exports = angular
.module('root', [
require('./common').name,
require('./components').name
]);
如果我按预期执行以下工作并加载模块:
//root.component.js
'use strict';
var root = {
template: require('./root.html')
};
module.exports = root;
//root.module.js
'use strict';
module.exports = angular
.module('root', [
require('./common').name,
require('./components').name
])
.component('root', require('./root.component'));
当前目录树:
??? ./src
? ??? ./src/app
? ? ??? ./src/app/app.less
? ? ??? ./src/app/app.spec.js
? ? ??? ./src/app/common
? ? ? ??? ./src/app/common/app.component.js
? ? ? ??? ./src/app/common/app.controller.js
? ? ? ??? ./src/app/common/app.html
? ? ? ??? ./src/app/common/footer
? ? ? ? ??? ./src/app/common/footer/app-footer.component.js
? ? ? ? ??? ./src/app/common/footer/app-footer.controller.js
? ? ? ? ??? ./src/app/common/footer/app-footer.html
? ? ? ? ??? ./src/app/common/footer/index.js
? ? ? ??? ./src/app/common/header
? ? ? ? ??? ./src/app/common/header/app-nav.component.js
? ? ? ? ??? ./src/app/common/header/app-nav.controller.js
? ? ? ? ??? ./src/app/common/header/app-nav.html
? ? ? ? ??? ./src/app/common/header/index.js
? ? ? ??? ./src/app/common/index.js
? ? ? ??? ./src/app/common/sideBar
? ? ? ??? ./src/app/common/sideBar/app-sidebar.component.js
? ? ? ??? ./src/app/common/sideBar/app-sidebar.controller.js
? ? ? ??? ./src/app/common/sideBar/app-sidebar.html
? ? ? ??? ./src/app/common/sideBar/index.js
? ? ??? ./src/app/components
? ? ? ??? ./src/app/components/auth
? ? ? ? ??? ./src/app/components/auth/auth-form
? ? ? ? ? ??? ./src/app/components/auth/auth-form/auth-form.component.js
? ? ? ? ? ??? ./src/app/components/auth/auth-form/auth-form.controller.js
? ? ? ? ? ??? ./src/app/components/auth/auth-form/auth-form.html
? ? ? ? ? ??? ./src/app/components/auth/auth-form/index.js
? ? ? ? ??? ./src/app/components/auth/auth.service.js
? ? ? ? ??? ./src/app/components/auth/auth.user.js
? ? ? ? ??? ./src/app/components/auth/index.js
? ? ? ? ??? ./src/app/components/auth/login
? ? ? ? ? ??? ./src/app/components/auth/login/index.js
? ? ? ? ? ??? ./src/app/components/auth/login/login.component.js
? ? ? ? ? ??? ./src/app/components/auth/login/login.controller.js
? ? ? ? ? ??? ./src/app/components/auth/login/login.html
? ? ? ? ??? ./src/app/components/auth/register
? ? ? ? ??? ./src/app/components/auth/register/index.js
? ? ? ? ??? ./src/app/components/auth/register/register.component.js
? ? ? ? ??? ./src/app/components/auth/register/register.controller.js
? ? ? ? ??? ./src/app/components/auth/register/register.html
? ? ? ??? ./src/app/components/index.js
? ? ??? ./src/app/root.component.js
? ? ??? ./src/app/root.html
? ? ??? ./src/app/root.module.js
? ??? ./src/index.ejs
??? ./webpack.config.js
Estus Flask..
9
应该导入文件(或者更确切地说,required,因为应用程序依赖于CommonJS模块)以便执行它.
在第一个片段root.module.js中不包含require('./root.component'),因此root.component.js永远不会执行.
它应该是
//root.module.js
module.exports = anglar
.module('root', [
require('./common').name,
require('./components').name
])
.component('root', require('./root.component'));
require('./root.component');
请注意,在定义模块root.component.js后应该要求root,以相反的顺序执行这些操作将导致$injector:modulerr错误.
消除竞争条件和利用模块化的成熟方法是每个文件有一个Angular模块.在这种情况下,文件所需的顺序无关紧要.传统的方法是name从包含Angular模块的文件中导出和导入模块的属性:
//root.component.js
module.exports = angular.module('root.rootComponent', [])
.component('root', {
template: require('./root.html')
})
.name;
//root.module.js
var rootCompOnentModule= require('./root.component');
var commOnModule= require('./common');
var compOnentsModule= require('./components');
module.exports = angular
.module('root', [
rootComponentModule,
commonModule,
componentsModule
])
.name;
该配方允许维持高度模块化单元的良好排列的深层次结构.这有利于代码重用和测试.
1> Estus Flask..：
应该导入文件(或者更确切地说,required,因为应用程序依赖于CommonJS模块)以便执行它.
在第一个片段root.module.js中不包含require('./root.component'),因此root.component.js永远不会执行.
它应该是
//root.module.js
module.exports = anglar
.module('root', [
require('./common').name,
require('./components').name
])
.component('root', require('./root.component'));
require('./root.component');
请注意,在定义模块root.component.js后应该要求root,以相反的顺序执行这些操作将导致$injector:modulerr错误.
消除竞争条件和利用模块化的成熟方法是每个文件有一个Angular模块.在这种情况下,文件所需的顺序无关紧要.传统的方法是name从包含Angular模块的文件中导出和导入模块的属性:
//root.component.js
module.exports = angular.module('root.rootComponent', [])
.component('root', {
template: require('./root.html')
})
.name;
//root.module.js
var rootCompOnentModule= require('./root.component');
var commOnModule= require('./common');
var compOnentsModule= require('./components');
module.exports = angular
.module('root', [
rootComponentModule,
commonModule,
componentsModule
])
.name;
该配方允许维持高度模块化单元的良好排列的深层次结构.这有利于代码重用和测试.
京公网安备 11010802041100号