-2

わかりました、このアイデアはかなりおかしなことに思えるかもしれません。私はかなり標準的な Rails アプリ (いくつかのコンテンツ ページ、ブログ、ニュース ブロック、いくつかの認証) を持っています。そして、それをシングルページアプリにしたいです。

私が達成したいことは次のとおりです。

  1. AJAXを使用する場合と同様に、すべてのページがフェッチされますturbolinks。ただし、AJAX はview part(レイアウトの生成部分) のみを返し、レイアウト自体は同じままです (応答のデータが少なくなり、レンダリングと読み込み時間が短縮されます)。
  2. ページはほとんどがマークアップ付きの静的な html でAngularJSあるため、処理する必要はありません。
  3. すべての実際のデータは、JSON を介して個別に読み込まれ、ビューに入力されます。
  4. また、それに応じて URL とページ タイトルが変更されます。

私はかなり長い間このコンセプトについて考えてきましたが、解決策が思い浮かびません。この時点で、これが実際にどのように行われるかについて、いくつかのアイデアを得ることができました。どんなアイデアや解決策も大歓迎です。または、私が気が狂って、ページをロードするための 3 つの小さな要求が、サーバー側ですべてのレンダリングを行う必要がある大きな要求よりも悪いのかもしれません。

だから、ここに私の考えと既知の問題があります。

  1. ユーザーが最初にアプリにアクセスすると、Angular マークアップを含むビュー テンプレートが定期的にレンダリングされ、2 番目の要求はAngular Resource.
  2. 次に、そのアドレスがコンテンツ ラッパーの ngInclude に送信されるリンクの ngClick で。
    1. その onClick を任意のリンクにバインドするにはどうすればよいですか? また、そのバインドから特定のリンク (外部認証サービスへのリンクなど) を除外するにはどうすればよいですか?
    2. リクエストが Angular からのものである場合、レイアウトをレンダリングしないようにサーバーに指示するにはどうすればよいですか? リクエストにパラメーターを追加することについて考えましたが、より良いアイデアがあるかもしれません。
  3. ngInclude が要求されたテンプレートを取得すると、そのテンプレートのコントローラー (通常は 1 つ) の 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">

angular コントローラーで current_page テンプレートを document.URL に設定し、その ajaxLink 関数を実装します。

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

history.pushStateそして、サーバーからデータを含む JSON を取得するときは、url 行を設定しdocument.title =、タイトルを設定するために使用することを忘れないでください。

于 2013-11-05T19:10:07.587 に答える