[英]Webpack 2 and Angular 1: exporting and import modules
希望得到一些澄清,为什么以下不能按预期工作,希望,这是我可能忽略的一些简单。 没有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
应该导入文件(或者更确切地说, require
d,因为应用程序依赖于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模块。 在这种情况下,文件所需的顺序无关紧要。 传统的方法是从包含Angular模块的文件中导出和导入模块的name
属性:
//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;
该配方允许维持高度模块化单元的良好排列的深层次结构。 这有利于代码重用和测试。
只是想和你分享我的方法。 我已经使用它已经有一段时间了,它完美无缺。
// src/components/foo/foo.component.js
import './foo.scss';
export class FooComponent {
static NAME = 'foo';
static OPTIONS = {
controller: FooComponent,
template : require('./foo.template.html'),
bindings : {},
};
constructor(FooService) {
'ngInject';
this._FooService = FooService;
}
$onInit() { /* ... */ }
$onDestroy() { /* ... */ }
/* ... */
}
// src/components/foo/foo.service.js
export class FooService {
/* ... */
}
// src/components/foo/index.js
import { FooComponent } from './foo.component';
import { FooService } from './foo.service';
export const FOO_COMPONENT = angular.module('components.foo', [])
.service('FooService', FooService)
.component(FooComponent.NAME, FooComponent.OPTIONS)
.name;
// src/components/index.js
export { FOO_COMPONENT } from './foo';
export { BAR_COMPONENT } from './bar';
/* ... */
// src/app/users/index.js
import { CORE } from 'shared/core';
import {
FOO_COMPONENT,
BAR_COMPONENT,
} from 'components';
import { USERS_LIST_COMPONENT } from './users-list';
import { USER_PROFILE_COMPONENT } from './user-profile';
/* ... */
export const USERS_MODULE = angular
.module('app.users', [
CORE,
FOO_COMPONENT,
BAR_COMPONENT,
USERS_LIST_COMPONENT,
USER_PROFILE_COMPONENT,
])
.name
// src/app/index.js
import { USERS_MODULE } from './users';
import { PRODUCTS_MODULE } from './users';
import { AppComponent } from './app.component';
export const APP_MODULE = angular
.module('app', [
USERS_MODULE,
PRODUCTS_MODULE,
])
.component(AppComponent.NAME, AppComponent.OPTIONS)
.name;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.