角度成分のスタイルガイド

Question

：

(function() { 
    'use strict'; 

    angular 
     .module('arroyo') 
     .component('intro', component); 

    /* @ngInject */ 
    function component() { 
     var settings = { 
      template: '<h1>test</h1>', 
      controller: Controller, 
     }; 

     return settings; 
    } 

    Controller.$inject = []; 

    /* @ngInject */ 
    function Controller() { 

    } 
})(); 

ただし、上記のコードを使用して動作していないようです。コンソールエラーはありませんが、コンポーネント自体（<intro></intro>）は何も表示しません。次のコードを使用すると、正常に動作することがわかりました。

(function() { 
    'use strict'; 

    angular 
     .module('arroyo') 
     .component('intro', { 
      template: '<h1>test</h1>' 
     }); 
})(); 

最初のスニペットで何が問題になっていますか？

Answer 1

あなたはそうのような機能コンポーネントを呼び出す必要があります：

angular 
    .module('arroyo') 
    .component('intro', component()); 

新しいコンポーネントメソッドは、実際にあなたがそのオブジェクトを返す関数を呼び出すことによって、設定を与えているオブジェクトを受け取ります。

詳細はdocsをご覧ください。