Components

Create component

To create a component witch will be a custom tag do you need two files with same name(eg. "module-a.js" and "module-a.html"). By convention FerrugemJS know that "module-a.js" is a controller file and "module-a.html" is the view of it and you can easily import it into your main app html file or into other module and use as a component with a custom tag.

eg. "module-a.js" file.

export class ModuleA{
    constructor({title}){
      this.title = title;
    }
}

eg. "module-a.html" file.

<template>
    <h1>My First APP with ${this.title}</h1>
</template>

now, we can importe into other template

<template>
    <require from="./module-a"/>
    <div>
      <module-a title="new title!"/>
    </div>
</template>

Otherwise a module controller can be written in different forms as below:

With Typescript

export class ModuleA{
    private title:string;
    constructor({title}:{title:string}){
      this.title = "test!";
    }
}

We recommend Typescript to large/medium projects because it´s language features.

With a exported object.

export default {
    "desc":"default desc",
    doTest(){
        this.desc = "desc changed!";
    },
    attached(){
        this.desc = "changed when connected!";
    }
}

With javascript basic function or “immediately invoked” function using AMD

define(["require", "exports"], function (require, exports) {
    "use strict";
    var ModuleA = (function () {
        function ModuleA() {
            this.title = "test!";
        }
        return ModuleA;
    }());
    exports.ModuleA = ModuleA;
});

Without a model controller.

See in template no model-attribute page.

With a custom model controller.

See in template model attribute page.