Since I found myself desperately lacking modern front end skills, I decide to spend some time in creating an example Angular app.
This article covers the following questions:
- What are some interesting UI component libraries I discovered?
- How can I embed my Angular app to my WordPress posts?
An overview of Angular component libraries
The Official
Angular Material (16104 Stars): the best stuff if material style is indeed wanted. Its components are amazingly detailed. Vivid animations.
Even if material style is not desired, this library also provides a sortHeader that does not style anything, but provides the rare-to-find three-way switching behavior (ascending, descending and natural ordering).
The Others: Angular-Focused
I try to list a few UI library vendors that only works on Angular, but not React nor Vue. Sadly, all but Nebula apparently lack popularity and in case of Amexio, also quality.
Nebula (2598 Stars). They have also created an amazing damo.
Amexio (Not on Github): provides d3.js binding for a few kinds of charts.
Truly-UI (61 Stars)
The Others: Cross-Framework
PrimeFaces creates components for a number of front-end technologies, but the components are native. They just rewrite everything for every front end and keep the theming system to be compatible.
PrimeNG (4620 Stars)
Similarly, here are two attempts to rewrite Bootstrap 4 in Angular but still use the Bootstrap CSS files.
ng-bootstrap (6133 Stars) / ngx-bootstrap (4361 Stars)
The Others: With a Design System in Mind
Some vendors build a design system first, then a UI library. Most of them are less adventurous than Material though.
Clarity (4125 Stars) – VMWare
Ant (3804 Stars) – Alibaba Ant
Lightning (693 Stars) – Salesforce
Element (342 Stars) – Ele.me
The Others: Ported
Some UI libraries are wrapped to Angular.
Onsen UI (6815 Stars)
Semantic UI (968 Stars)
Vaadin (351 Stars)
Embedding Angular app to WordPress
Since I really need a non-trivial example to make sure I reach all the corners of the problem, I decide to make a “revision statistics” plugin. The goal would be to show the number of revisions done to each post in my own blog. Since I often mend my pages, this should ensure a highly dynamic input, and hence warrant an Angular app to do the job.
The code can be found at https://github.com/ahyangyi-de-finibus/revision-stats.
Replace app-root with something else
First, the root component of the default Angular app is named <code>app-root</code>. Thus, if two components are loaded, the page will be screwed.
The first step is thus to rename the component name to something else.
Building the project without having a Deploy URL in mind
ng build --prod --deploy-url ./
The relative path sounds weird but it actually works, at least as long as no routing is involved. Obviously I didn’t try routing, since routing and embedding are two ideas that are simply not compatible.
Creating the WordPress Plugin
The best way I know to manage such apps in blogs is as WordPress plugins.
Basically, such a plugin replaces a shortcode with a few script tags, and add the required CSS file to the page. Thus all the needed files are packed in one unit, and can be managed by Git on its own.
<?php
/*
* Plugin Name: Revision Stats
* Description: Include revision stats with shortcode revision_stats
* Version: 1.0
* Author: Yi Yang
* Author URI: https://blog.ahyangyi.org
*/
function add_revision_stats(){
$dir = plugin_dir_url( __FILE__ );
wp_enqueue_style("revision_stats", $dir . "/" . "styles.e12c2598acce6741fd25.css");
return "<revision-stats></revision-stats>" .
"<script type=\"text/javascript\" src=\"" . $dir . "/runtime.4ccf67c919f9077afc3e.js\"></script>" .
"<script type=\"text/javascript\" src=\"" . $dir . "/polyfills.f6ae3e8b63939c618130.js\"></script>" .
"<script type=\"text/javascript\" src=\"" . $dir . "/main.f1157bf21cd4b076ba75.js\"></script>";
}
add_shortcode('revision_stats', 'add_revision_stats');
?>Demo time!
Other concerns
While this definitely works, there is three-way danger of page CSS affecting the app, app CSS affecting somewhere else on the page, and two apps affecting each other.
Theoretically, Angular offers CSS encapsulation. But there are two caveats:
- CSS encapsulation is not designed to solve the “two apps on one page” scenario. It might work, but maybe something needs to be done.
- Most component libraries, the official
ng-materialincluded, assume the presence of a global CSS file. And the chance that a global CSS file interfering with another is immediately much much higher. And to make things worse, due to the encapsulation mechanism Angular offers, if some components asks for a global CSS file, I have to use a global CSS file as no other method could penetrate into that component.
Currently, I do not have real solutions for the problems. So far I can only rely on practices. There might be something useful, such as this one, that I need to read and learn.