Question

我是角色的新手，我正在尝试在角1.5中使用新的组件助手。

我的index.html文件如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Github Invoicing</title>
  <link rel="icon" type="image/x-icon" href="/img/favicon.ico">

  <base href="/">
</head>
<body ng-app="app">
  <div ng-controller="mainCtrl as ctrl">
    <log-in/>
  </div>
</body>
</html>

我的app.js文件如下所示：

import angular from 'angular';
import logIn from './components/logIn';

angular.module('app', [])
  .controller('mainCtrl', function() {
});

我的logIn.js文件看起来像这样

import angular from 'angular';

angular.module('app')
  .component('logIn', {
    template: function($element, $attrs) {
      return [
        '<div>Content</div>'
      ].join('');
    }
  });

我收到以下错误

未捕捉错误：[$ injector：nomod]模块＆＃39; app＆＃39;不可用！您要么错误拼写模块名称，要么忘记加载它。如果注册模块确保您将依赖项指定为第二个参数。

这显然是因为logIn.js的导入语句从app.js执行时尚未创建应用程序。

如果这是反应或贪图，我会以某种方式导出该组件，但由于我是角色的新手，我不知道该怎么做。

我能让这个工作的唯一方法是定义logIn.js，如下所示：

import angular from 'angular';

const logIn = {
  template: function($element, $attrs) {
    return [
      '<div>Content</div>'
    ].join('');
  }
};

export default logIn;

然后在app.js中创建组件：

从角度＆＃39 ;;

导入角度

import logIn from './components/logIn';

angular.module('app', [])
  .controller('mainCtrl', function() {
  }).component('logIn', logIn);

这感觉不对。

Answer 1

你可以创建另一个模块e.x.成分

import angular from 'angular'

    angular.module('component',[])
      .component('logIn', {
        template: function($element, $attrs) {
          return [
            '<div>Content</div>'
          ].join('');
        }
      });

并且您的应用将依赖于此模块

import angular from 'angular';
import logIn from './components/logIn';

angular.module('app', ['component'])
  .controller('mainCtrl', function() {
});

angular 1.5组件和es6模块

1 个答案: