Graceful improvement (no degradation) with Angular.js?

Question

We restart the landing page of our company (contains information, jobs, a team and a help section) and decided that we will no longer support the Rails project only for this part of our service and, therefore, switch to static HTML.

As we want to give our HR and support teams the opportunity to edit texts (especially in the workplace and the help section) without listening to the development team, we will get the Angular.js application on the page and the patch in the content using JSON APi (for example, Wordpress .com offers http://developer.wordpress.com/docs/api/ , or we could even use https://www.contentful.com/ ).

However, since we need our landing page to load very quickly (conversion is king), we are thinking of serving the initial part of our landing page as static HTML and gracefully adding Angular.js after the user has access to the most important information . We don’t care if people with deactivated JS cannot use the rest of our page, so we would call this process a nifty improvement.

Are there any better methods and / or Angular.js modules to achieve what I just described? What is the correct terminology for this effect?

PS: We take care of SEO by providing the rest of our landing page (teams, jobs, etc.) using Phantom.js, so SEO is not a topic. This is only about the loading speed of the initial part of our landing page.

Answer 1

You can display a static page (whichever way you create it) and add an event listener after the page loads. Then in the event listener you can use angular.bootstrap to start the application manually. Thus, Angular can take its sweet time, and not be afraid of the user.