AngularJS模板加载用法详解

```

2. 通过script标签引入模板

另一种内存加载模板的方式是通过在HTML中使用script标签引入模板内容，通过设置type属性为"text/ng-template"来指定这是一个AngularJS模板。示例代码如下：

```html

```

在实际使用中，可以通过ng-include指令引用该script标签的id属性，即可获取该模板内容。示例代码如下：

```html

```

三、AJAX加载模板

当访问项目入口文件 时，你会邂逅一个精彩纷呈的网页世界。一个名为 `lovestory.html` 的文件，被巧妙地嵌入到了页面中，以 `

想象一下这样一个场景：你正在构建一个名为 `myApp` 的 Angular 模块，并在这个模块中定义了一个名为 `templateDemo` 的指令。这个指令不仅具有日志功能，还能加载一个名为 `butterfly.html` 的模板文件。当这个模板被加载到内存中后，你可以通过 AJAX 请求来访问它，请求的地址是 `$templateCache` 中。这意味着，除非页面刷新或手动删除，否则这些内容会一直保存在内存中，不会被丢失。别忘了，AJAX 是有缓存控制的，这意味着你可以更高效地管理和加载模板。

现在让我们来谈谈内存模板的优点。在雅虎前端优化的34条建议中，“合并压缩文件”是一个关键策略。这一策略不仅减少了HTTP请求的数量，还减小了网络传输量。对于JS和CSS文件来说，这种策略非常实用，因为它们可以轻松地合并和压缩。HTML文件是个例外，由于路径依赖的问题，它们无法合并。但在Angular的世界里，我们可以利用虚拟路径来优化这一过程。通过去除 server-side 的路径依赖，我们可以减少多次HTTP请求加载模板的浪费。想象一下，如果你有六个控制器需要六个模板文件，原本需要六次HTTP请求。但现在，通过虚拟路径的方式，你只需要一次请求就能加载所有的模板文件。这无疑减轻了服务器的压力，也提高了页面的加载速度。这种方式的坏处是可能会增加内存的使用。但在PC上这通常不是问题，而在开发web app（如移动应用）时，只需注意一些关键事项即可。