Question

我通过调查发现，有三种方法可以在角度

中获取自定义标记或指令

1）直接将文件作为文件在templateUrl中的位置

/* controller */
var foundation = angular.module('foundation', []);
foundation.directive('viewdesign', function() {
 return {
   restrict : 'EA',
   templateUrl: "templates/viewdesign.html"
 };
});

2）在模板中给出字符串化表格

/* controller*/
var foundation = angular.module('foundation', []);
foundation.directive('viewdesign', function() {
 return {
   restrict : 'EA',
   template: <stringified template file contents>
 };
});

3）将字符串化的表单存储在templatecache中并将其提供

/* controller */
var foundation = angular.module('foundation', ["templates/viewdesign.html"]);

angular.module("templates/viewdesign.html", []).run(["$templateCache" ,
                                                     function( $templateCache)
       { $templateCache.put("templates/viewdesign.html",
                                     <stringified template file contents>
);
}]);
foundation.directive('viewdesign', function() {
 return {
   restrict : 'EA',
   templateUrl: "templates/viewdesign.html"
 };
});

所以我们可以在html中访问模板，如下所示

<div ng-app="foundation">
    <viewdesign></viewdesign>
</div>

我的怀疑是

这三种方法中的效率很高
为什么有三种不同的方法可以做到这一点
用于获得更好性能的地方

Answer 1

第一个将在第一次使用该指令时使用AJAX请求下载模板。它允许通过编辑HTML文件轻松自定义模板。

第二个通过将模板直接存储在指令中来避免额外的AJAX请求。这会强制您修改指令本身以自定义模板。

第三个结合了上述两种技术：它从URL获取模板，但立即填充缓存，以便不需要AJAX请求。这很有用，因为您可以轻松地提供两个版本的JS文件：一个包含没有模板的指令（让用户按照自己的意愿自定义模板），一个包含指令和包含其模板的预填充缓存（如果用户对标准模板感到满意。）

Answer 2

第一种和第二种方法相同，唯一的区别是第一种方法使用外部模板，第二种方法使用内联模板。为了更好的代码组织，最好使用外部模板，但这是对服务器进行额外的ajax调用

外部模板

var foundation = angular.module('foundation', []);
foundation.directive('viewdesign', function() {
 return {
   restrict : 'EA',
   templateUrl: "templates/viewdesign.html"
 };
});

viewdesign.html

<h1>Hi to you</h1>

内联模板

var foundation = angular.module('foundation', []);
foundation.directive('viewdesign', function() {
 return {
   restrict : 'EA',
   template: '<h1>Hi to you</h1>'
 };
});

第三个tehnique在第一次使用它时将模板预加载到缓存中

$templateCache.put("templates/viewdesign.html",'<h1>Hi to you</h1>');

哪三种方法有效，为什么有三种不同的方法可以做同样的事情，哪些方法可以用呢？

2 个答案: