angel_html 2.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 50

html #

Pub build status

A plug-in that allows you to return html_builder AST's from request handlers, and have them sent as HTML automatically.

package:html_builder is a simple virtual DOM library (without diffing, you can find that here), with a handy Dart DSL that makes it easy to build HTML AST's:

import 'package:html_builder/elements.dart';

Node myDom = html(lang: 'en', c: [
  head(c: [
    meta(name: 'viewport', content: 'width=device-width, initial-scale=1'),
    title(c: [
      text('html_builder example page')
    ]),
  ]),
  body(c: [
    h1(c: [
      text('Hello world!'),
    ]),
  ]),
]);

This plug-in means that you can now return these AST's, and Angel will automatically send them to clients. Ultimately, the implication is that you can use html_builder as a substitute for a templating system within Dart. With hot reloading, you won't even need to reload your server (as it should be).

Installation #

In your pubspec.yaml:

dependencies:
  angel_html: ^1.0.0

Usage #

The renderHtml function does all the magic for you.

configureServer(Angel app) async {
  // Wire it up!
  app.fallback(renderHtml());
  
  // You can pass a custom StringRenderer if you need more control over the output.
  app.fallback(renderHtml(renderer: new StringRenderer(html5: false)));
  
  app.get('/greet/:name', (RequestContext req) {
    return html(lang: 'en', c: [
     head(c: [
       meta(name: 'viewport', content: 'width=device-width, initial-scale=1'),
       title(c: [
         text('Greetings!')
       ]),
     ]),
     body(c: [
       h1(c: [
         text('Hello, ${req.params['id']}!'),
       ]),
     ]),
   ]);
  });
}

By default, renderHtml will ignore the client's Accept header. However, if you pass enforceAcceptHeader as true, then a 406 Not Acceptable error will be thrown if the client doesn't accept */* or text/html.

configureServer(Angel app) async {
  // Wire it up!
  app.fallback(renderHtml(enforceAcceptHeader: true));
  
  // ...
}

2.0.0 #

  • Angel 2 + Dart 2 updates.

example/main.dart

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_framework/http.dart';
import 'package:angel_html/angel_html.dart';
import 'package:html_builder/elements.dart';
import 'package:logging/logging.dart';

main() async {
  var app = Angel(), http = AngelHttp(app);
  app.logger = Logger('angel_html')
    ..onRecord.listen((rec) {
      print(rec);
      if (rec.error != null) print(rec.error);
      if (rec.stackTrace != null) print(rec.stackTrace);
    });

  app.fallback(renderHtml());

  app.get('/html', (req, res) {
    return html(c: [
      head(c: [
        title(c: [text('ok')])
      ])
    ]);
  });

  app.get(
    '/strict',
    chain([
      renderHtml(
        enforceAcceptHeader: true,
        renderer: StringRenderer(
          doctype: null,
          pretty: false,
        ),
      ),
      (req, res) {
        return div(c: [text('strict')]);
      },
    ]),
  );

  app.fallback((req, res) => throw AngelHttpException.notFound());

  await http.startServer('127.0.0.1', 3000);
  print('Listening at ${http.uri}');
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  angel_html: ^2.0.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:angel_html/angel_html.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

We analyzed this package on Oct 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21

Platforms

Detected platforms: Flutter, other

Primary library: package:angel_html/angel_html.dart with components: io.

Health suggestions

Fix lib/angel_html.dart. (-1 points)

Analysis of lib/angel_html.dart reported 2 hints:

line 18 col 9: DO use curly braces for all flow control structures.

line 21 col 11: DO use curly braces for all flow control structures.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
angel_framework ^2.0.0-alpha 2.0.4+1 2.0.5-beta
html_builder ^1.0.0 1.0.5
Transitive dependencies
angel_container 1.1.0
angel_http_exception 1.1.0
angel_model 1.0.3
angel_route 3.0.6
charcode 1.1.2
code_buffer 1.0.1
collection 1.14.12
combinator 1.1.0
convert 2.1.1
crypto 2.1.3
dart2_constant 1.0.2+dart2
file 5.1.0
http2 1.0.0
http_parser 3.1.3
http_server 0.9.8+3
intl 0.16.0
matcher 0.12.5
merge_map 1.0.2
meta 1.1.7
mime 0.9.6+3
mock_request 1.0.6
path 1.6.4
quiver 2.0.5
quiver_hashcode 2.0.0
source_span 1.5.5
stack_trace 1.9.3
string_scanner 1.0.5
term_glyph 1.1.0
tuple 1.0.3
typed_data 1.1.6
uuid 2.0.2
Dev dependencies
angel_test ^2.0.0-alpha
html ^0.13.2
logging ^0.11.0 0.11.3+2
pedantic ^1.0.0 1.8.0+1
test ^1.0.0