configuration - single - rutas con angular js

¿Es posible obtener plantillas desde $ templateCache al configurar mi $ routeProvider?

Question

Mi intención es cargar todas las plantillas de mi aplicación web con una sola llamada a un archivo JSON externo que contiene una lista de todos los nombres y valores de la plantilla.

Actualmente estoy cargando estas plantillas en la fase de ejecución de mi aplicación:

app.run(function ($http, $templateCache) {
    $http.get(''/templates/all.json'').success(function (data) {
        var i;
        for (i = 0; i < data.length; i++) {
            $templateCache.put(data[i].name, data[i].template);
        }
    });
});

Sin embargo, la fase de configuración de Angular.js se ejecuta antes de la fase de ejecución, por lo que cuando pretenda cargar desde templateCache:

app.config(function($routeProvider, $locationProvider) {
    //App routing
    $routeProvider.
        //Homepage
        when(''/'', {templateUrl: ''home.html''}).

        //My schedule
        when(''/my-schedule'', {templateUrl: ''my-schedule.html''});
});

Angular intenta cargar home.html desde el servidor, porque $templateCache aún no se ha completado.

Supongamos que all.json contiene las plantillas para home.html y my-schedule.html para el ejemplo de prevous.

¿Es posible completar $templateCache antes de configurar $routeProvider la aplicación?

Answer 1

si usa un interceptor HTTP, puede inyectar $templateCache allí:

    $provide.factory(''myHttpInterceptor'', [''$templateCache'', function($templateCache) {
        return {
            request: function(config) {
                // do fancy things with $templateCache here
                return config;
            }
        };
    }]);

Answer 2

Tuve el mismo problema y después de pasar horas dedicadas a la investigación, me di cuenta de que me estaba haciendo la pregunta equivocada, ya que lo que quería hacer no era cargar plantillas usando XHR, sino simplemente asegurarme de que estén almacenadas y almacenadas en caché. un archivo

Tengo la tarea ronca de compilar todas mis plantillas JADE en HTML y envolverlas en un gran módulo angular que se carga como un archivo JS separado llamado templates.js. Todas estas cosas se hacen automáticamente en segundo plano, por lo que después de haber dedicado 10 minutos a configurarlo, puede olvidarse del trabajo mono y centrarse en el código / marcado.

(En aras de la brevedad, voy a omitir la parte de JADE aquí)

1. editar archivo html
2. tarea grupa-contrib-watch:
   1. capta el cambio
   2. genera módulos angulares con $ templateCache habilitado
3. mi sitio web se vuelve a cargar (usando liveReload)

Así es como me acerqué al problema usando Grunt.js / JADE y html2js:

Sección principal de mi archivo index.jade

  script(src=''js/modernizr.js'')
  script(src=''js/vendor.js'')
  script(src=''js/templates.js'')
  script(src=''js/app.js'')

Principio del módulo de aplicación principal (utilizando CoffeeScript aquí)

''use strict''
# Declare app level module which depends on filters, and services
App = angular.module(''app'', [ 
  ''templates'' // just include the module and forget it
  ''foo''
  ''bar'']).config(...)

GruntFile.json (configuración de grunt.js)

Necesitaba eliminar el 80% del código y dejar solo las tareas relacionadas con las plantillas, considérelo solo como un borrador.

module.exports = (grunt)->
  imports = grunt.file.readJSON ''app/imports.json''
  grunt.initConfig
    pkg: grunt.file.readJSON ''package.json''



    watch:
      options:
        livereload: yes


      templates:
        files: ''app/**/*.jade''
        tasks: [''buildTemplates'']

    jade:
      default:
        options:
          client: no
          wrap: no
          basePath: ''app/''
          pretty: yes
        files:
          ''public/'': [''app/**/*.jade'']

    html2js:
      options:
        module: ''templates''
        base: ''public/''

      main:
        src: ''public/partials/**/*.html''
        dest: ''public/js/templates.js''


    connect:
      server:
        options:
          port: 8081
          base: ''public''
          keepalive: yes


      livereload:
        options:
          port: 8081
          base: ''public''
          # middleware: (connect, options)-> [lrSnippet, folderMount(connect, options.base)]

    copy:
      assets:
        files:[
          src:[''**''], dest:''public/'', cwd:''assets/'', expand: yes
        ]



  grunt.loadNpmTasks ''grunt-contrib-concat''
  grunt.loadNpmTasks ''grunt-contrib-copy''
  grunt.loadNpmTasks ''grunt-contrib-coffee''
  grunt.loadNpmTasks ''grunt-contrib-clean''
  grunt.loadNpmTasks ''grunt-contrib-connect''
  grunt.loadNpmTasks ''grunt-contrib-compass''
  grunt.loadNpmTasks ''grunt-contrib-watch''
  grunt.loadNpmTasks ''grunt-contrib-livereload''
  grunt.loadNpmTasks ''grunt-jade''
  grunt.loadNpmTasks ''grunt-html2js''

  grunt.registerTask ''buildTemplates'', [''clean:templates'', ''copy:assets'', ''jade'', ''html2js:main'', ''livereload'']


  grunt.registerTask ''default'', [ ''connect:livereload'', ''watch'']

Resultado

Archivo .js único que contiene una lista de todas las plantillas de aplicaciones envueltas en módulos angulares similares a este:

angular.module("partials/directives/back-btn.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("partials/directives/back-btn.html",
    "<a ng-href=/"{{href}}/" class=/"page-title-bar__back/"> <i class=/"icon-chevron-left/"> </i></a>");
}]);

Campo de golf

1. grunt.js
2. plugin huntml html2js

Answer 3

Este violín es lo que necesitas.

Básicamente, puede poner la clave $templateCache en el templateUrl: valor de propiedad dentro de la configuración $routeProvider .