dotCMS and AngularJS
We had to update elements of website navigation to keep the proper deep linking of the site, but wanted to avoid the use of hashbangs in urls in favor of having pretty url links instead.
In the angular application we turned on HTML5 mode
And in the html template source we added
To ensure proper linking, we had to exclude the native dotCMS Java application links (which use hashbangs by default), but this single page application navigation process was violating strict java application rules and required a creative workaround.
Since we developed our project as a separate dotCMS plugin, it allowed us to set any rewrite rule in a valid manner by adding an entry to the
url-rewrite.xml file. Once we deployed the plugin, the new rule was now present:
<condition type="request-uri" operator="notequal">^/(home/index.html|support|app|admin|bower_components|c/(.*)|api|(.*).js|(.*).css|(.*).jpg|(.*).gif|(.*).ico|(.*).png|(.*).woff|(.*).ttf)</condition>
<to type="proxy" last="true">https://www.genb.com/home/index.html</to></rule>
Rewrite rule in the urlrewrite-ext.xml file.
In the rule body, we proxied all non-dotCMS life-cycle related linking to our website. This way we were able to allow each section and assets being rendered to be performed in the AngularJS application. We then added a sitemap.xml generator to the page so that we could include it for indexing in the Google search console. Finally, we needed to include custom html title/descriptions in our page, so we made a custom angular component to update the html head when the page section was changed as a user (or search engine bot) navigated throughout the site.
It is worth mentioning that there are some new solutions one the market that are made to help resolve such problems, namely Universal Angular - https://universal.angular.io/ - it is based on node.js server and the Angular2+ framework and it provides an intuitive way of server side page rendering, that should resolve a lot of these headaches in most scenarios.