javascript - Angular 组件样式指南

Question

我正在使用angular-js-styleguide-snippets对于 Atom ，当我输入 ngcomponent 时在我的编辑器上，扩展为以下结构:

( 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了解更多信息。