Cómo incluir vista / estilo específico parcial en AngularJS

Hola usuario de nuestra web, descubrimos la solución a lo que necesitas, desplázate y la verás más abajo.

Solución:

Sé que esta pregunta es antigua ahora, pero después de investigar un montón sobre varias soluciones a este problema, creo que se me ha ocurrido una solución mejor.

ACTUALIZACIÓN 1: Desde que publiqué esta respuesta, agregué todo este código a un servicio simple que publiqué en GitHub. El repositorio se encuentra aquí. No dude en consultarlo para obtener más información.

ACTUALIZACIÓN 2: Esta respuesta es excelente si todo lo que necesita es una solución liviana para incorporar hojas de estilo para sus rutas. Si desea una solución más completa para administrar hojas de estilo bajo demanda en toda su aplicación, es posible que desee consultar el proyecto AngularCSS de Door3. Proporciona una funcionalidad mucho más detallada.

En caso de que alguien en el futuro esté interesado, esto es lo que se me ocurrió:

1. Cree una directiva personalizada para elemento:

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile)
        return 
            restrict: 'E',
            link: function(scope, elem)
                var html = '';
                elem.append($compile(html)(scope));
                scope.routeStyles = ;
                $rootScope.$on('$routeChangeStart', function (e, next, current) 
                    if(current && current.$$route && current.$$route.css)
                        if(!angular.isArray(current.$$route.css))
                            current.$$route.css = [current.$$route.css];
                        
                        angular.forEach(current.$$route.css, function(sheet)
                            delete scope.routeStyles[sheet];
                        );
                    
                    if(next && next.$$route && next.$$route.css)
                        if(!angular.isArray(next.$$route.css))
                            next.$$route.css = [next.$$route.css];
                        
                        angular.forEach(next.$$route.css, function(sheet)
                            scope.routeStyles[sheet] = sheet;
                        );
                    
                );
            
        ;
    
]);

Esta directiva hace lo siguiente:

1. Compila (usando $compile) un html string que crea un conjunto de etiquetas para cada elemento de la scope.routeStyles objeto usando ng-repeat y ng-href.
2. Anexa ese conjunto compilado de elementos a la etiqueta.
3. Luego usa el $rootScope para escuchar '$routeChangeStart' eventos. Para cada '$routeChangeStart' evento, toma el “actual” $$route objeto (la ruta que el usuario está a punto de dejar) y elimina su (s) archivo (s) css específicos parciales de la etiqueta. También agarra el “siguiente” $$route objeto (la ruta a la que el usuario está a punto de ir) y agrega cualquiera de sus archivos css específicos parciales al etiqueta.
4. Y el ng-repeat parte del compilado La etiqueta maneja todas las adiciones y eliminaciones de las hojas de estilo específicas de la página en función de lo que se agrega o elimina de la scope.routeStyles objeto.

Nota:esto requiere que tu ng-app attribute esta en elemento, no en o cualquier cosa dentro de .

2. Especifique qué hojas de estilo pertenecen a qué rutas utilizando el $routeProvider:

app.config(['$routeProvider', function($routeProvider)
    $routeProvider
        .when('/some/route/1', 
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        )
        .when('/some/route/2', 
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl'
        )
        .when('/some/route/3', 
            templateUrl: 'partials/partial3.html',
            controller: 'Partial3Ctrl',
            css: ['css/partial3_1.css','css/partial3_2.css']
        )
]);

Esta configuración agrega un personalizado css propiedad al objeto que se utiliza para configurar la ruta de cada página. Ese objeto se pasa a cada uno '$routeChangeStart' evento como .$$route. Entonces, al escuchar el '$routeChangeStart' evento, podemos agarrar el css propiedad que especificamos y adjuntamos / eliminamos esos etiquetas según sea necesario. Tenga en cuenta que especificar un css La propiedad en la ruta es completamente opcional, ya que se omitió de la '/some/route/2' ejemplo. Si la ruta no tiene css propiedad, la La directiva simplemente no hará nada por esa ruta. Tenga en cuenta también que incluso puede tener varias hojas de estilo específicas de página por ruta, como en el '/some/route/3' ejemplo anterior, donde el css la propiedad es una array de rutas relativas a las hojas de estilo necesarias para esa ruta.

3. Ya terminaste
Esas dos cosas configuran todo lo que se necesitaba y lo hace, en mi opinión, con el código más limpio posible.

Espero que ayude a alguien más que pueda estar luchando con este problema tanto como yo.

La solución de @ tennisgent es genial. Sin embargo, creo que es un poco limitado.

La modularidad y encapsulación en Angular va más allá de las rutas. De acuerdo con la forma en que la web se está moviendo hacia el desarrollo basado en componentes, es importante aplicar esto también en las directivas.

Como ya sabes, en Angular podemos incluir plantillas (estructura) y controladores (comportamiento) en páginas y componentes. AngularCSS habilita la última pieza que falta: adjuntar hojas de estilo (presentación).

Para una solución completa, sugiero usar AngularCSS.

1. Admite ngRoute, UI Router, directivas, controladores y servicios de Angular.
2. No es necesario tener ng-app en el etiqueta. Esto es importante cuando tiene varias aplicaciones ejecutándose en la misma página
3. Puede personalizar dónde se inyectan las hojas de estilo: cabeza, cuerpo, selector personalizado, etc …
4. Admite precarga, persistencia y eliminación de caché
5. Admite consultas de medios y optimiza la carga de la página a través de la API de matchMedia

https://github.com/door3/angular-css

Aquí hay unos ejemplos:

Rutas

  $routeProvider
    .when('/page1', 
      templateUrl: 'page1/page1.html',
      controller: 'page1Ctrl',
      /* Now you can bind css to routes */
      css: 'page1/page1.css'
    )
    .when('/page2', 
      templateUrl: 'page2/page2.html',
      controller: 'page2Ctrl',
      /* You can also enable features like bust cache, persist and preload */
      css: 
        href: 'page2/page2.css',
        bustCache: true
      
    )
    .when('/page3', 
      templateUrl: 'page3/page3.html',
      controller: 'page3Ctrl',
      /* This is how you can include multiple stylesheets */
      css: ['page3/page3.css','page3/page3-2.css']
    )
    .when('/page4', 
      templateUrl: 'page4/page4.html',
      controller: 'page4Ctrl',
      css: [
        
          href: 'page4/page4.css',
          persist: true
        , 
          href: 'page4/page4.mobile.css',
          /* Media Query support via window.matchMedia API
           * This will only add the stylesheet if the breakpoint matches */
          media: 'screen and (max-width : 768px)'
        , 
          href: 'page4/page4.print.css',
          media: 'print'
        
      ]
    );

Directivas

myApp.directive('myDirective', function () 
  return 
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  
);

Además, puede utilizar el $css servicio para casos extremos:

myApp.controller('pageCtrl', function ($scope, $css) 

  // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
  $css.bind( 
    href: 'my-page/my-page.css'
  , $scope);

  // Simply add stylesheet(s)
  $css.add('my-page/my-page.css');

  // Simply remove stylesheet(s)
  $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

  // Remove all stylesheets
  $css.removeAll();

);

Puede leer más sobre AngularCSS aquí:

http://door3.com/insights/introducing-angularcss-css-demand-angularjs

Podría agregar una nueva hoja de estilo al encabezado dentro $routeProvider. Por simplicidad estoy usando un string pero también podría crear un nuevo elemento de enlace o crear un servicio para hojas de estilo

/* 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('');

El mayor beneficio de precargar en la página es que las imágenes de fondo ya existirán, y menos FOUC

Si sostienes algún reparo o forma de enriquecer nuestro división puedes ejecutar un comentario y con deseo lo ojearemos.

---

---

Utiliza Nuestro Buscador