title: How to append a stylesheet to <head> in AngularJS $routeProvider?
body: <p>I want to load a specific CSS file only when a user accesses the <code>contact.html</code> view on my AngularJS app/site. I found this answer which almost made sense to me <a href="https://stackoverflow.com/questions/15193492/how-to-include-view-partial-specific-styling-in-angularjs">How to include view/partial specific styling in AngularJS</a> The accepted answer by charlietfl reads :</p>
  
  <blockquote>
    <p>Could append a new stylesheet to head within <code>$routeProvider</code>. For
    simplicity am using a string but could create new link element also,
    or create a service for stylesheets</p>
  
  <pre><code>/* check if already exists first - note ID used on link element*/
  /* could also track within scope object*/
  if( !angular.element('link#myViewName').length){
      angular.element('head').append('&lt;link id="myViewName" href="myViewName.css" rel="stylesheet"&gt;');
  }
  </code></pre>
    
    <p>Biggest benefit of prelaoding in page is any background images will
    already exist, and less lieklyhood of <code>FOUC</code></p>
  </blockquote>
  
  <p>The problem is that I do not know exactly where in my <code>$routeProvider</code> to add the code. charlietfl mentions where to put it in a comment which reads </p>
  
  <blockquote>
    <p>not if the when for the route hasn't been called. Can put this code in
    controller callback of when within the routeProvider, or perhaps
    within resolve callback which likely triggers sooner</p>
  </blockquote>
  
  <p>I have modified my <code>$routeProvider</code> following the advice. I added a <code>resolve</code> in the object following <code>.when('/contact'</code>. Here is my code</p>
  
  <pre><code>angular.module('maxmythicApp', ['ngResponsiveImages'])
    .config(function ($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix = '!';
      $routeProvider
        .when('/', {
          templateUrl: '/views/design.html',
          controller: 'MainCtrl'
        })
        .when('/design', {
          templateUrl: '/views/design.html',
          controller: 'MainCtrl'
        })
        .when('/about', {
          templateUrl: '/views/about.html',
          controller: 'MainCtrl'
        })
        .when('/contact', {
          templateUrl: '/views/contact.html',
          controller: 'MainCtrl',
          resolve: 
            if( !angular.element('link#myViewName').length){
              angular.element('head').append('&lt;link id="myViewName" href="myViewName.css" rel="stylesheet"&gt;');
            }
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p>Would this work?</p>