Question

我很难在网上找到这方面的任何信息，所以请点击：

在角度应用中，有几个选项可以包含模板。根据应用程序的使用，不同的方法可能会证明是优越的。就我而言，我正在编写一个应用程序，每次使用该应用程序时都会查看大多数页面。

我目前使用$routeProvider方法为每个视图使用templateUrl，这会导致在各个阶段获取多个.html文件。在我看来，这会对网络服务器造成不必要的负担。

是否有其他选项可以在单个请求中包含完整内容，这符合角度最佳做法？

我目前最好的想法是在索引文件中包含所有模板，并使用ng-if仅显示当前相关视图。

Answer 1

值得一看$templateCache，可以将其注入到TemplateService中（如下所示）;服务的工作是加载传递给它的任何文件。您可以将服务注入顶级控制器并缓存稍后可能需要的任何文件：

<强> MainCtrl

app.controller('MyMainCtrl', ['TemplateService', function(TemplateService) {
    /* Specify templates to be loaded */
    var templates = [ '/foo.html', '/bar.html' ];

    /* Fetch and cache each template */
    _.each(templates, function(template) {
       TemplateService.loadTemplate(template)
           .done(function() {
                console.log('Loaded template: ' + template);
           });
    });
}]);

<强> TemplateService

app.service('TemplateService', ['$templateCache', function ($templateCache) {
    return {
        loadTemplate: function(template) {
            var deferred = new $.Deferred();

            /* Check if the template is already been loaded */
            if ($templateCache.get(template)) {
                deferred.resolve();
            } else {
                var options = {
                    async: false,
                    type: 'GET',
                    url: template
                };
                /* Fetch template */
                $.ajax(options)
                    .done(function (response) {
                        $templateCache.put(template, response);
                        deferred.resolve();
                    })
                    .fail(function () {
                        console.log('Unable to load template: ' + template);
                        deferred.reject();
                    });
            }
            return deferred.promise();
        }
    }
}]);

Answer 2

这是一种完全合法的方式，路由提供商可以处理何时加载。当你输入一个新的路线时，angular将破坏旧的路线并加载新的路线，因此它不像你的所有模板同时在DOM中一样，与ng-if相同。

如果您觉得您的应用程序非常庞大且包含大量视图，您可以查看带有角度的延迟加载以及类似于Requirejs的内容。如果你采取这条路线我会等待几周Angular 1.4以及他们为它发布的新路由器

Angular使用templateUrl或HTML模板

2 个答案: