Convert AngularJS templates to Jinja2 templates for SEO.
The basic idea is to create a version of an Angular-powered website that can be rendered on the server for consumption by search engines. This is accomplished in two parts:
- Use angulart2tmpl to convert Angular templates to Jinja2 templates. This may
require implementing custom Angular directives in Python (using
xml.dom.minidom
). - Implement a Python WSGI app that gathers the necessary data using the same API that powers your Angular app and passes it to the generated Jinja2 templates.
This project expressly does not intend to be a full implementation of AngularJS in Python. Instead, it intends to implement a minimal subset of Angular sufficient to provide server-side rendering for the purposes of SEO. The resulting server-rendered sites need not be interactive, but they should look roughly the same as their JavaScript-based counterparts.
- Reuses existing Angular templates and backend API
- Avoids the expense and complexity of running a headless browser
- Compatible with PaaS platforms such as Google App Engine
angular2tmpl is pre-alpha software. It currently implements a very minimal
subset of the ng
and ngRoute
modules and makes little attempt to address
edge cases. No guarantees are made at this time about maintaining backwards
compatibility. Unit tests are still a twinkle in its eye.
That said, angular2tmpl does currently satisfy the needs of the site that it was built for.
Installation is easy:
pip install angular2tmpl
The only dependencies are Jinja2 and html5lib, both of which will be automatically installed. angular2tmpl was built on Python 2.7, but with the intention of making conversion with 2to3 fairly painless. If you try it, let me know how it goes.
Just run angular2tmpl
. Try --help
to see the available flags and default
values, then run it on each of your Angular templates. angular2tmpl directives
are intended to be similar to Angular directives while staying Pythonic and
taking advantage of the reduced complexity that comes from non-interactive
rendering. See modules/ng.py
for examples.
Due to differences in the semantics of Angular vs. Jinja2 expressions, some modifications to the default Jinja2 environment and your template data are necessary:
- Angular is extremely generous about ignoring errors and missing values in
templates. To emulate this behavior, set the
undefined
property of your Jinja2 environment object toangular2tmpl.jinja2.PermissiveUndefined
. - JavaScript objects allow access to non-existent properties and treat
foo.bar
andfoo['bar']
the same way. To get the same behavior out of your template variables, convert them usingangular2tmpl.jinja2.js_data
.
For more information about how Google handles JavaScript-heavy sites and how to make it request a special server-rendered version of your site, see https://developers.google.com/webmasters/ajax-crawling/docs/specification. For more information about other approaches to making Angular work within the bounds of this specification, see http://www.ng-newsletter.com/posts/serious-angular-seo.html.
angular2tmpl is not affiliated in any way with Google or AngularJS.