45

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

像这样的东西是理想的：

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

5 回答 5

56

这是@gargc 对答案的补充。

如果你不想使用 script 标签来指定你的模板，并且想从文件中加载模板，你可以这样做：

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

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });
于 2013-09-10T13:21:02.707 回答
45

有一个模板缓存服务：$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>

意味着模板可以稍后以与您的路由配置中的真实 url 相同的方式处理 ( templateUrl: 'templates/Template1.html')

于 2013-09-10T09:41:42.707 回答
28

我认为基于 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 });
                }
            }
        }
    })
]);
于 2014-05-07T16:09:39.147 回答
18

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

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});
      }
    }
})
于 2014-02-06T11:41:06.117 回答
0

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

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

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

添加这个人编写的代码来更改 angular $templatecache 服务 - 它只是一小段代码，它可以工作:-)

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

您的路线 templateUrl 应如下所示：

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
于 2014-02-03T10:42:41.287 回答