CODEWITHSUNDEEP
javascriptangularjs
Tiago
Tiago

Reputation: 4480

Angular component styleguide

I'm using angular-js-styleguide-snippets for Atom, which, when I type ngcomponent on my editor, expands into the following structure:

( 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() {

    }
} )();

However, using the code above does not seem to be working. While there are no console errors, the component itself (<intro></intro>) does not render anything. After some fiddling around I found out that using the code below works as expected:

( function() {
    'use strict';

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

What's wrong with the first snippet?

Upvotes: 0

Views: 86

Answers (1)

Peter_Fretter
Peter_Fretter

Reputation: 1165

You must call the function component like so:

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

The new component method actually takes an object in which you give the settings, by calling the function you return that object.

Check out the docs for more info.

Upvotes: 1

Related Questions