-2

好的，这个想法可能看起来有点疯狂，而且有点疯狂（至少对我来说是这样）。我有一个相当标准的 Rails 应用程序（一些内容页面、一个博客、一个新闻块、一些身份验证）。我想把它变成一个单页应用程序。

我想要完成的是：

  1. AJAX所有页面都像 using 一样被获取turbolinks，除了 AJAX 仅返回view part（布局中的 yield 部分）而没有布局本身，它保持不变（响应中的数据更少，渲染和加载时间更快）。
  2. 这些页面大多只是带有AngularJS标记的静态 html，因此不需要处理太多。
  3. 所有实际数据都通过 JSON 单独加载并填充到视图中。
  4. 网址和页面标题也会相应更改。

我已经考虑这个概念很长一段时间了，但我似乎无法想出一个解决方案。在这一点上，我已经有了一些关于如何实际完成的想法以及一些我无法通过的问题。非常感谢任何想法或解决方案。或者可能是我刚刚疯了，加载页面的 3 个小请求比我需要在服务器端完成所有渲染的大请求更糟糕。

所以，这是我的想法和已知问题。

  1. 当用户第一次访问应用程序时，带有角度标记的视图模板会定期呈现，第二个请求来自Angular Resource.
  2. 然后在 ngClick 上将地址发送到内容包装器的 ngInclude 的任何链接。
    1. 如何在任何链接上绑定该 onClick 以及如何从该绑定中排除某些链接（例如，指向外部身份验证服务的链接）？
    2. 如果请求来自 Angular，我如何告诉服务器不要呈现布局？我虽然关于向请求添加参数，但可能有更好的主意。
  3. 当 ngInclude 获取请求的模板时，它会触发该模板中控制器（通常是单个控制器）的 ngInit 函数，并从服务器获取 JSON 格式的数据（以及正确的页面标题）。
  4. Angular 用接收到的数据填充模板，将浏览器 url 设置为链接的 url，并将页面标题设置为刚刚获得的内容。
    1. 如何更改页面标题和页面 url？可以使用 jQuery 更改标题，但有没有通过 Angular 本身的方法？
    2. 再一次，我一直在考虑某种动画，以使这种变化更加花哨。
  5. 利润！

所以。你们有什么感想？

4

1 回答 1

1

好的，以防万一有人发现这个想法值得思考。关键可以解决如下。

服务器端决定是否渲染视图。

如果存在该参数，请在控制器中使用参数ngInclude并设置控制器。layout: false还没有找到更简单的方法。

客户端绑定所有链接，除了那些具有特定类的链接 no-ajax 这是一个执行它的指令。

App.directive('allClicks', function($parse) {
    return {
      restrict: 'A',
      transclude: true,
      replace: true,
      link: function(scope, element, attrs) {
        var $a = element.find('a').not($('a.no-ajax')),
            fn = $parse(attrs['allLinks']);
        $a.on('click', function(event) {
          event.preventDefault();
          scope.$apply(function() {
            var $this = angular.element(event.target);
            fn(scope, {
              $event: event,
              $href: $this.attr('href'),
              $link: $this
            });
          });
        });
      }
    };
  })

然后在一些包装器div或body标签上使用它<body ng-controller="WrapperCtrl" all-links="ajaxLink($href)">，然后在你的内容 div 中使用<div id="content" ng-include="current_page_template">

在您的角度控制器中，将 current_page 模板设置为 document.URL 并实现该 ajaxLink 函数。

$scope.ajaxLink = function(path) {
   $scope.current_page_template = path+"?nolayout=true";
}

然后，当您从服务器获取带有数据的 JSON 时，不要忘记使用history.pushState设置 url 行和设置document.title =标题。

于 2013-11-05T19:10:07.587 回答