19

私は CodeIgniter で書かれた既存のサイトに取り組んでおり、多くのフロントエンド機能を必要とするいくつかのページに AngularJS を使用することを検討していますが、すべての CodeIgniter ビューを (一度に (まだ)) 置き換えたくありません。

angularのルーターによって制御され、javascriptによって処理されるリンクをクリックしますが、次のリンクはCodeIgniterフレームワークによって処理される「通常の」リクエストである可能性があります。

これら2つの方法を組み合わせるエレガントな方法はありますか? サイトはまだ本番環境で実行されていないため、クライアント側の余分なオーバーヘッドはあまり気にしません。

4

6 に答える 6

29

Angular アプリケーションが成長するにつれて、CodeIgniter (CI) ルーティングの使用を徐々に減らしたいと考えているようです。これは難しくありませんが、多くの詳細が必要です。どの方法が機能するかは、プロジェクトの構造によって異なります。注: Code Igniter の URL から index.php を削除したため、以下のパスはデフォルトとは異なる場合があります。

1) ルートにインストールされた CodeIgniter

CI がサーバーのルートにインストールされている場合は、CI 内にフォルダーを作成できます (たとえば、"ng" フォルダーがあります)。プロジェクトは次のようになります。

    /controllers
    /models
    /ng
    (etc)
    /index.php (code igniter index file)

次のように .htaccess ファイルを配置/ngします。

    Order allow, deny
    Allow from all

/ngこれにより、 CI のルーティング システムを介してそれらの要求を送り返すのではなく、内部のファイルに直接アクセスできます。たとえば、これを直接ロードできます。 example.com/ng/partials/angular-view.html

メイン Web ページは引き続き CodeIgniter によって作成されますが、部分ビューなどの Angular アセットを含めることができるようになりました。最終的には、単純なページを返すだけで CodeIgniter が行っていることのほとんどを置き換えることができ、Angular に部分ビューをロードさせることができます。/ngそれが設計されているように。

CodeIgniter は最初のページが読み込まれるかどうかを (CI コントローラーのユーザー認証コードを介して) 制御できるため、この方法は便利です。ユーザーがログインしていない場合、リダイレクトされ、Angular アプリは表示されません。

2) ディレクトリ内の CodeIgniter

CI がディレクトリにインストールされている場合、そのexample.com/myapp/(code igniter)隣にディレクトリを作成するだけで、example.com/myappNg/

    /myapp/
    /myapp/controllers/
    /myapp/models/
    /myapp/(etc)
    /myapp/index.php (code igniter index file)
    /myappNg/
    /myappNg/partials/
    /myappNg/js/
    /myappNg/(etc)

これで、Angular アプリケーションでは、Angular アプリに対してではなく、ドメイン ルートに対して相対的なパスを作成することで、CI からリソースを要求できます。たとえば、Angular では、Angular フォルダーから部分ビューをリクエストするのpartials/angular-view.htmlではなく、CI からビューをリクエストする必要があります/myapp/someResource。先頭に注意してください/。「someResource」は、html ドキュメント、JSON、または最初に Code Igniter で行っていることを返すことができます。

最終的に、参照するパスの数を置き換えることができます/myapp/。CI を何にも使用しなくなったら、Angular の index.html を に配置するだけで、/myapp/引き続き でパスを参照できます/myappNg/。

TL;DR Angular アプリを完全に利用できるようにし、CodeIgniter から分離します。CodeIgniter ページにリンクする代わりに、Angular の部分ビューやその他の JSON ソースを使用する方向に徐々に移行します。最終的に、CodeIgniter エンドポイントを、Angular をブートストラップする HTML ファイルに置き換えます。

于 2013-09-09T18:24:30.813 に答える
2

最善の策は、バックエンド コードを angular コードから分離し、codeInginter コードを API として使用することです。

/Codeigniter コード /Angular コード

CodeIgniter にはセキュリティ機能の一部が付属しているため、これが最善の策です。

于 2016-06-16T13:29:43.383 に答える
1

私は Angular を使用したことがありませんが、これは役立つかもしれません。

だから私はAngularのルーターによって制御されているリンクをクリックし、それはjavascriptによって処理されます

この JavaScript は、CI のコントローラーの 1 つに Ajax リクエストを送信しますか? その場合、CI にはis_ajax_request()メソッドがあり、リクエスト (POST または GET) が ajax 経由で送信されているかどうかを確認できます。Ajax からのリクエストと通常のリクエストに基づいて、異なる方法で処理を進めることができます。

ユーザー ガイド (ページの下部): http://ellislab.com/codeigniter/user-guide/libraries/input.html

それが役に立てば幸い！

于 2013-02-04T08:46:34.523 に答える
1

CI アプリを継承し、主にリクエストのルーティングに Angular と CI を使用しています。私の場合、Angular テンプレートを使用していないので、$routeProvider 構成のテンプレート オプションに ' ' 空を使用しますが、スペース パラメータを使用します。これにより、元のサーバー側コードにあまり変更を加えることなく、通常の CI ajax リクエストを実行できます。 

angular.module('my_app', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
   when('/', { template: " ", controller: my_routes.mainpage}). 
   when('/design/:designId/:action', {template: " ", controller: my_routes.show_design}).
   when('/vote_design/:designId', {template: " ", controller: my_routes.vote_design}).
   otherwise({redirectTo: '/'});
}]);
于 2013-06-22T18:29:08.553 に答える