角1.5組件和es6模塊

我是新的角，我試圖在角1.5中使用新的組件助手。角1.5組件和es6模塊

我的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(''); 
    } 
    });

我收到以下錯誤

Uncaught Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

這顯然是因爲當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創建組件：從「角」

進口角;

import logIn from './components/logIn'; 

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

這感覺不對。

來源

2016-02-14 dagda1

你可以嘗試在logIn.js angular.module（ '應用'）上依賴。 angular.module（'app'，[]）用於聲明。我們通常會宣佈一次。 –

@NagaSandeep我認爲你是因爲當我刪除空陣列時，我得到的錯誤：模塊'應用程序'不可用我認爲這是因爲import語句在模塊代碼之前運行。不知道該怎麼做 – dagda1

您可以創建另一個模塊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() { 
});

來源

2016-02-14 15:16:50

角1.5組件和es6模塊

回答

相關問題