AngularJS and meta tags in SPA mode?

Question

Has anyone of you already figured out an elegant way on how to deal with meta tags with AngularJS in SPA mode?

In a base template I have some default meta tags. For each

Answer 1

A pattern I have used comes from the ngBoilerplate project. In this pattern, there is an overall app controller which deals with a "global" scope, including meta tags.

You individual pages' controllers could emit an event when they are navigated to, $locationChangeSuccess if you are using the default router.

The app controller listens for this event, and uses it to update the page title in the case of ngBoilerplate: https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js#L17-L21

However, there's nothing to stop you from emitting an object with whatever meta tag info you like, then having a listener for that event.

// on your individual app pages goes something like this
function SomePageController($scope) {
   // the event gets fired when the page is loaded and the controller is called.
   $scope.$emit('newPageLoaded', { 'title': 'Some Page', 'description': 'blah' });
}

// your overall app controller
function AppController($scope) {
    $scope.metadata = {
        'title': 'default title',
        'description': 'default description',
    };

    // whenever a controller emits the newPageLoaded event, we update the app's metadata
    $scope.$on('newPageLoaded', function(event, metadata) {
        $scope.metadata = metadata
    });
}

Then in your header you could do something like this:

I've not tested this code, so there may be errors, but I think the general principle is sound.

A note re: Social Media sharing

In your question you mention the use-case of incorporating tags for social media sharing. I assume you mean something like open graph or twitter etc.

In this case it is important to know that currently the crawlers that these sites (facebook ,twitter, pinterest etc) use will not execute your JavaScript and will thus not be able to read any meta tags that you dynamically populate with Angularjs.

I have written a blog post about this issue, with a suggested solution: http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/