1

因此，假设我有一个类似于博客的单页应用程序：有一个带有路由的索引页面，site.com/其中列出了所有帖子，还有一个带有路由的“帖子视图”页面site.com/post/:post_id。所有数据都是异步加载的。

现在一切都依赖于一个ng-view，路由器设置如下：

$routeProvider.
  when('/', {
    templateUrl: '/partials/index.html',
    controller: 'Index'
  }).
  when('/post/:post_id', {
    templateUrl: '/partials/post.html',
    controller: 'Post'
  })

显然，当在索引页面和发布页面之间切换时，视图会从 DOM 中移除并重新加载控制器。

实现索引视图缓存的最佳方法是什么，以便每次从回发切换到索引页面时都不会重新呈现它？我使用服务缓存服务器响应数据，所以让我担心的是重新渲染。

4

1 回答 1

2

我不会担心重新渲染......这会很快。让 Angular 担心这个。至于获取和缓存您的模板，我可以想到两种方法可以避免 Ajax 对模板的调用：

  1. <script>将您的模板以标签的形式放在页面上：

    <script type="text/ng-template" id="/partials/index.html">
   Your template here
</script>

<script type="text/ng-template" id="/partials/post.html">
    Another template here
</script>

    Angular 会将这些模板加载到$templateCache. 如果您使用的是 ASP.NET MVC、Ruby on Rails、Grails 或类似的服务器端技术，那么在这些技术中创建包含您的模板的部分视图很简单。

  2. 如果你不喜欢<script>在页面上放置标签，你可以有一个“构建”步骤来编译你的模板并将它们放在模板缓存中。结果将是一个巨大的 JavaScript 文件，其中包含 JavaScript 形式的所有模板。

    有一个 GruntJS 插件可以为您的 Angular 模板执行此操作。我相信它本质上构建了一个模块，它将所有模板加载到$templateCache. 这可以在这里找到：https ://github.com/karlgoldstein/grunt-html2js

于 2013-05-29T22:37:28.270 回答