Getting Started

Step 1: Install Fudgel or include it into your project. This can take several forms, depending on your needs.

Installing locally as a package is simple.

• npm install fudgel
• yarn add fudgel
• bower install fudgel

Step 2: At this point you have access to the Fudgel object or the module's exports. It's time to write your first controller. Select the chunk of code that best fits your needs.

Step 3: You've already made a custom element at this point. What's left is adding content to the template and handling actions by users. Investigate the following topics to learn more about Fudgel's features.

Component creation and configuration:

• Best Practices - How to get the most benefit and avoid problems.
• Component Config - Configure your component.
• Styling - Style using either Light DOM or Shadow DOM.

Directives and data bindings used within the templates:

• Bindings - Connect the template to a controller.
• Directive Basics - Overview of directives.
• Event @ Directive - Respond to user actions.
• Property . Directive - Set properties on elements.
• #class Directive - Conditionally set CSS classes.
• #ref Directive - Reference elements in your controller.
• *for Directive - Repeat elements based on data.
• *if Directive - Conditionally include elements.
• *repeat Directive - Repeat elements a number of times.

Data flow:

• Content Projection - Insert user content into your component.
• Events - Communicate using custom events.
• Input - Receive information from outside.
• Output - Send information to outside.

Everything Else:

• Expressions - Use expressions in bindings and directives.
• Lifecycle - Respond to component lifecycle stages through events and methods.
• Routing - Create single-page applications with routing.
• Upgrading - Upgrade from older versions of Fudgel to the current version.
• Utilities - Helpful utility functions provided by Fudgel.