Question

我有一个包含多个部分的项目。每个部分（在下拉项目菜单中）都需要特定模板。我希望将这些模板分组到一个文件中，并在用户单击显示下拉菜单的菜单项时缓存它们。这样，当从下拉菜单中选择特定选项时，将加载相应的模板。其他部分也是如此。我不希望将所有模板放在索引文件中，也不想使用加载所有模板的脚本，因为用户不会导航到系统的所有部分。有什么建议吗？

Answer 1

听起来你可以利用$templateCache。

文件的加载必须由您自己完成，但是一旦模板在缓存中，您就可以照常使用它们。

Answer 2

正如TheHippo所说，你可以使用$templateCache。

但你可能想尝试grunt角度模板。因此，您可以开发多模板html文件，然后将这些模板合并到一个js文件中，并进行部署。

https://npmjs.org/package/grunt-angular-templates

Answer 3

我的解决方案：我创建了一个文件夹partials和inside文件夹，由包含分隔文件中的模板的部分命名。因此，使用ui-router和用户点击F5或直接导航到特定网址时没问题。之后，我使用grunt将所有这些文件连接在一起并将其抓取到部分文件夹中，并将其命名为section+'Templates.html'。现在，当用户单击以打开下拉菜单时，将使用上下文部分调用此方法。

    $scope.tempGroupLoaded=[];
    $scope.loadTemplates = function(section) {
        if ($scope.tempGroupLoaded.indexOf(section)>-1) return;
        $scope.tempGroupLoaded.push(section);
        $http.get('partials/'+section+'Templates.html').success(function(data) {
            $(data).filter('script,.myTemplates').each(function() {
                $templateCache.put('partials/'+section+'/'+$(this).attr('id'), $(this).html());
            });
        });
    }

从单个文件加载多个模板

3 个答案: