Angel
Primary version
Primary version
  • Introduction
  • Migration from Angel 1.1.x
    • Rationale - Why a new Version?
    • Framework Changelog
    • 2.0.0 Migration Guide
  • ORM
    • About
    • Basic Functionality
    • Relations
    • Migrations
    • NoSQL
    • PostgreSQL
  • Guides
    • Getting Started
    • Basic Routing
    • Dependency Injection Patterns
    • Installation & Setup
    • Without the Boilerplate
    • Requests & Responses
    • Dependency Injection
    • Basic Routing
    • Request Lifecycle
    • Middleware
    • Controllers
    • Parsing Request Bodies
    • Using Plug-ins
    • Rendering Views
    • Service Basics
    • REST Client
    • Testing
    • Error Handling
    • Pattern Matching and Parameter
    • Command Line
    • Writing a Plugin
  • Example Projects
  • YouTube Tutorials
  • Ecosystem
  • Packages
    • Authentication
    • CORS
    • Database-Agnostic Relations
    • Configuration
    • Database Adapters
      • MongoDB
      • RethinkDB
      • JSON File-based
      • ORM
    • Front-end
      • Mustache Templates
      • Jael template engine
        • Github
        • Basics
        • Custom Elements
        • Strict Resolution
        • Directive: declare
        • Directive: for-each
        • Directive: extend
        • Directive: if
        • Directive: include
        • Directive: switch
      • compiled_mustache-based engine
      • html_builder-based engine
      • Markdown template engine
      • Using Angel with Angular
    • Hot Reloading
    • Pagination
    • Polling
    • Production Utilities
    • Reverse Proxy
    • Router
    • Serialization
    • Service Seeder
    • Static Files
    • Security
    • Server-sent Events
    • shelf Integration
    • Task Engine
    • User Agents
    • Validation
    • Websockets
Powered by GitBook
On this page
  • Interpolation
  • Attributes
  • Attribute Values
  • Quoted Attribute Names
  • Unescaped Attributes
  1. Packages
  2. Front-end
  3. Jael template engine

Basics

PreviousJael template engineNextCustom Elements

Last updated 6 years ago

Jael syntax is a superset of HTML. The following is valid both in HTML and Jael:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

However, Jael adds two major changes.

Interpolation

Firstly, text blocks can contain interpolations, which are merely Dart expression contained in double curly braces ({{ }}). The value within the braces, once evaluated will be HTML escaped, to prevent XSS. To achieve unescaped output, append a hyphen (-) to the first brace ({{- }}).

<div>
  {{ user.name }}
</div>

<!-- Do not HTML escape this: -->
<div>
  {{- raw.data.will.not.be('escaped') }}
</div>

Attributes

Secondly, whereas in HTML, the values of attributes can only be strings, Jael allows for their values to be any Dart expression:

<img src=profile.avatar ?? "http://example.com/img/avatars/default.png">
<a class=['btn', 'ban-default', 'btn-lg']>Link</a>
<p style={'color': 'red'}></p>

Attribute Values

Values are handled as such:

  • Maps: Serialized as though they were style attributes.

  • Iterables: Joined by a space, like class attributes.

  • Anything else: toString() is invoked.

Quoted Attribute Names

In case the name of your attribute is not a valid Dart identifier, you can wrap it with quotes, and it will still be processed as per normal:

<button "(click)"="myEventHandler($event)" />

Unescaped Attributes

These will also be HTML escaped; however, you can replace = with != to print unescaped text:

<img src!="<SCARY XSS STRING BEWARE!!!>" />
Interpolation
Attributes
Attribute Values
Quoted Attribute Names
Unescaped Attributes