AngularJS is widely used for SPAs but is not necessarily everyone's first choice for enhancing web content - jQuery and other libraries are typically used for DOM manipulation.

However, with it's directive API, using AngularJS to enhance web content is a powerful alternative and can be used where semantic mark-up and SEO is important.

I recently did some development for the Westminster Abbey website. One of the requirements for this mobile-first site was a carousel view for both mobile and desktop which made use of Bootstrap v3 components carousel and collapse.

Example project available on Github

An example project is available on Github.

First, clone the repo.

$ git clone https://github.com/ducksoupdev/web-content-angularjs.git

Next, install everything that is required.

$ cd web-content-angularjs
$ npm install
$ bower install

The home page of the site has a carousel showing a selection of highlighted content. The following is what the site looks like on both mobile and desktop:

The rendered components are collapse (mobile) and carousel (desktop) and are built from the following example markup:

<div class="wa-hero" data-interval="-1">
    <section title="Section 1">...</section>
    <section title="Section 2">...</section>
    <section title="Section 3">...</section>
</div>

The <section> elements are required for the component to work correctly. However, each section can contain any element - images, video, text etc.

AngularJS directive

An AngularJS directive, named hero, was created to render the same content in both the collapse and carousel components.

Summary

The only limitation is that the directive contains a set of section elements.

The markup does not use any AngularJS specific attributes or elements and is SEO-friendly. It also transforms the existing content to fit the view which enhances the web content for a better user experience.