angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.54k stars 3k forks source link

RFC: Allow ui-view directive to used as a comment #1872

Closed malthejorgensen closed 9 years ago

malthejorgensen commented 9 years ago

The ui-view-directive is currently restricted to being used as an attribute, element, or style. (restrict: 'ECA' ref) I propose that the directive should be allowed to be used as a comment as well (restrict: 'ECAM')

That way it can be used via a named view to control the <title>, <meta name="description">, and other tags in <head>.

<head>
  ...
  <!-- directive: ui-view metatags --> <!-- Result of proposal -->

  <ui-view name="metatags" /> <!-- Current solution -->
  <!-- Cannot be used in `head` as the `ui-view` tag is moved into `body` -->
  ...
</head>

with an exemplified state configuration

$stateProvider
  .state('app', {
    abstract: true,
    views: {
      'meta': {
          templateUrl: 'meta.html',
      },
      'content': {}
    }
  })
  .state('frontpage', {
    parent: 'app'
    views: {
      'meta@': { template: '<title>Frontpage</title>' +
                           '<meta name="description" content="this is the frontpage">' },
      'content@': { ... }
    }
  })
  ...

For the Angular docs see: https://code.angularjs.org/1.3.7/docs/api/ng/service/$compile#-restrict-

eddiemonge commented 9 years ago

I am not sure how much benefit that would be since the metatags are mostly for search engines and they wouldn't normally render that specific view. For title, you could listen to stateChangeSuccess and change it there based on $state.current.data.title or something similar.

malthejorgensen commented 9 years ago

In our specific case we are using prerender.io in order to render the Angular-driven pages to search engines and other non-javascript enabled web crawlers (the Facebook crawler). In that case changing <meta> tags from Angular does make sense, albeit it is a special case.