在使用AngularJS路由时，有没有方法预加载模板？

在Angular应用程序加载后，我需要一些离线可用的模板

像这样的东西很理想：

$routeProvider
  .when('/p1', {
    controller: controller1,
    templateUrl: 'Template1.html',
    preload: true
  })

---

有一个模板缓存服务：可用于在javascript模块中预加载模板

例如，取自文档：

var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

甚至还有一个grunt任务从html文件预生成javascript模块：

另一种可能不太灵活的方法是使用内联模板，例如，在index.html中有这样一个脚本标记：

<script type="text/ng-template" id="templates/Template1.html">template content</script>

模板内容

---

这意味着模板可以稍后以与路由配置中的真实url相同的方式寻址（

templateUrl:'templates/Template1.html'

）

这是@gargc对答案的补充

如果不想使用脚本标记指定模板，并且想从文件加载模板，可以执行以下操作：

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

---

如果将每个模板包装在脚本标记中，例如：

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

---

预加载模块路由中定义的所有模板

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})

---

我认为我有一个基于Raman Savitski方法的稍微改进的解决方案，但是它选择性地加载模板。它实际上允许使用要求的原始语法，如下所示：

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

$routeProvider.when（'/p1'，{controller:controller1，templateUrl:'Template1.html'，preload:true}）

这使得您只需修饰路线，而不必担心在其他地方更新另一个预加载配置

以下是启动时运行的代码：

angular.module('MyApp', []).run([
    '$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
        var url;
        for (var i in $route.routes) {
            if ($route.routes[i].preload) {
                if (url = $route.routes[i].templateUrl) {
                    $http.get(url, { cache: $templateCache });
                }
            }
        }
    })
]);

---

谢谢，这正是我想要的！我真的希望能够在$templateCache.put（）中指定模板文件，脚本标记替代项会弄乱我的IDE，并且我没有使用grunt。我最终使用了$http。详细信息请参见我自己的答案。我还没有测试Grunt插件，但是。。。它也包括控制器吗？还是仅仅是模板？为了快速加载视图，可以预加载所有可能的内容。谢谢+1用于内联模板。内联模板允许更快的初始加载，但可以灵活地在以后替换内容。@derrylwc：我现在正努力解决相反的问题。我有一个用grunt生成器（grunt angular fullstack）创建的项目，它自动包含并配置许多grunt任务。其中之一是grunt角度模板。因为我想用我的身份验证框架拦截服务器的加载，所以我需要服务器的请求，但我没有得到它们。是的，它还会加载controller.js文件。如果需要从URL获取模板：

myApp.run（函数（$templateRequest）{$templateRequest（'/URL/to/template.html'，true）；}）顺便说一下，
$http.get（'Template1.html'，{cache:$templateCache}）应具有相同的效果。虽然，这并没有多大区别：）这绝对是一个比我建议的更简单的选择。再次感谢：）我更喜欢这个解决方案，因为它不需要从HTML模板构建JavaScript文件。这一行“$http.get（'Template1.HTML'，{cache:$templateCache}”）；”也意味着要将它添加到angular cache？我已经尝试过了，但是由于http.get是异步的，我的模板还没有加载到我真正需要它的地方。有人知道如何解决这个问题吗？Sobieck00给出了与原始问题相匹配的最佳答案。如果存在明确的
preload:false
，则我会稍微将其更改为“仅不预加载”，因此默认情况下会为路线启用预加载。但我认为描述是个人品味，取决于你想做什么。除了那个伟大的片段+1当我写这篇文章时，我只是想从大约20条路线中加载两条路线。因此，显式的
preload:true
对我来说效果更好。这是目前为止最好的答案。我很高兴在这里找到你的回应。我一直在努力寻找缓存模板的方法。谢谢，如果你和我一样，来这里使用uiRouter寻找解决方案，就像这个想法一样：。它将加载状态及其定义的任何视图的模板。如果模板的内容动态更改，会发生什么情况？这是正确显示还是将显示与来自缓存的内容相同的内容？如果内容是动态的，则没有必要“预加载”它。或者我不明白你的情况。