使用AngularJS和Middleman制作类似博客的单页应用程序

时间:2015-06-24 17:32:18

标签: html json angularjs single-page-application middleman

我想创建一个充满类似条目的SPA:带描述的图片。 (我不会是添加新条目的人。必须尽可能简单而不使用GUI。

据我所知,我不需要大框架甚至数据库,为每个条目创建一个文件应该足够/更好。如果我不想让它成为SPA,我会和Middleman一起生成一堆静态页面。我试图了解Middleman和AngularJS之间的所有依赖关系以及如何使用所有东西,但我感到非常迷茫。如果我理解我需要采取的所有步骤,请告诉我。

  1. 设置中间人应用
  2. 为每个博客条目创建一个YAML文件。
  3. 获取自动生成的静态HTML内容块
  4. 添加AngularJS控制器,将在正确的位置显示此块
  5. 或者:

    1. 设置AngularJS应用
    2. 为每个博客条目创建一个JSON文件
    3. 从模板和所有JSON获取SPA
    4. 我只是想确定我的思路正确,我不会在某个时候陷入困境。

1 个答案:

答案 0 :(得分:1)

我假设您没有使用后端技术,因此内容完全是静态的,并且您只需在用户滚动或点击的同时将Angular用于延迟加载图像组。 一个简单的方法就是将它们全部作为一个独特的静态网站加载,并用一些“懒惰加载”的JS库隐藏/显示它们。

但是,如果数据量很大,这种方法可能不是您想要的。这带来了你建议的第一种方法:通过AJAX加载HTML块。

Middleman可以预先生成dynamic pages,因此您可以将所有数据放入一个唯一的YAML文件中,例如一个名为“images”的数组,并将整个图像组合成多个页面。然后使用Angular,您可以根据需要动态加载每个HTML切片。