Question

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

这样的事情是理想的：

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

Answer 1

这是@gargc对答案的补充。

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

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

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

Answer 2

有模板缓存服务：$templateCache，可用于在javascript模块中预加载模板。

例如，取自文档：

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

从html文件预生成javascript模块甚至还有一项艰巨的任务：grunt-angular-templates

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

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

表示稍后可以使用与路径配置中的真实网址相同的方式解决模板（templateUrl: 'templates/Template1.html'）

Answer 3

我认为基于Raman Savitski的方法，我对这个问题有一个略微改进的解决方案，但它有选择地加载模板。它实际上允许像这样要求的原始语法：

$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 });
                }
            }
        }
    })
]);

Answer 4

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

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});
      }
    }
})

Answer 5

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

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

将所有模板连接成一个大文件。如果使用Visual Studio 2013，请下载Web essentials - 它会添加一个右键菜单来创建HTML Bundle

添加这个人编写的代码来更改角度$ templatecache服务 - 它只是一小段代码并且可以工作： - ）

https://gist.github.com/vojtajina/3354046

您的路线templateUrl应如下所示：

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

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

5 个答案: