web-dev-qa-db-ja.com

AngularjsとCodeIgniterの組み合わせ

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

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

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

phpjavascriptcodeigniterangularjs
19
Han Dijk

angularアプリケーションが成長するにつれて、CodeIgniter（CI）ルーティングの使用を徐々に少なくしたいと考えているようです。これは難しいことではありませんが、多くの詳細が必要です。 注：Code Igniter URLからindex.phpを削除したため、以下のパスはデフォルトと異なる場合があります。

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

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

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

以下を使用して、/ng内に.htaccessファイルを配置します。

    Order allow, deny
    Allow from all

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

メインのWebページはCodeIgniterによって引き続き作成されますが、部分ビューなどのAngularアセットを含めることができます。ページ、およびAngularが設計されているように/ngから部分ビューをロードします。

CodeIgniterはその初期ページを（CIコントローラーのユーザー認証コードを介して）ロードするかどうかを制御できるため、このメソッドは素晴らしいです。ユーザーがログインしていない場合、リダイレクトされ、Angular app。

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 app。ではなく、ドメインルートに相対的なパスを作成することにより、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ファイルに置き換えます。

28
Aaron Martins

最善の策は、バックエンドコードをangularコードとは別にし、codeInginterコードをAPIとして使用することです

/ Codeigniterコード/ Angularコード

CodeIgniterにはセキュリティ機能が備わっているため、これが最善の策です

2
Sydney Collins

私は一度もAngularを使用したことはありません-それにもかかわらず、これは役立つかもしれません。

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

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

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

それが役に立てば幸い！

1
istos

CIアプリを継承し、主にリクエストのルーティングにAngularを使用しています。私の場合、Angularテンプレートを使用していないため、 ''空ですが、$ routeProvider configのテンプレートオプションのスペースパラメータを使用すると、元のサーバー側コードにあまり変更を加えることなく、通常の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: '/'});
}]);
1
Peter Drinnan

アーロン・マーティンの答えに加えて、それをクライアント-サーバーアプローチとして使用することもできます。

プロジェクトのルートに2つのフォルダーを作成するとしましょう。

  1. クライアント

  2. サーバ

Clientフォルダーには、AngularJSのすべてのコードと、BowerおよびNpmライブラリを含むクライアント側ライブラリが含まれます。クライアント側のルーティングもAngularJSルーターによって処理されます。

クライアント側では、angularjsのプロバイダーとして機能する工場またはサービスがあります。これらのファイルには、サーバー側からのリクエストの送信とレスポンスの受信のコードが含まれます。

サーバーフォルダーのコードは、LaravelまたはCodeIgniterまたはその他のPHPフレームワークです。リクエストのすべてのAPIを作成します。したがって、PHPセクション（サーバーディレクトリ）は、すべてのメディアファイルとデータベースファイルを格納します。さらに、RSSフィードの受信リンクなどもあります。オン。

クライアントは、サーバー上の任意のAPIで要求するときに、JSONまたはXML形式ですべての応答を受信するだけです。

私によると、これはWebappsを開発するための最高のプラクティスの1つです。

0
Tirthraj Rao

私が働いている別のプログラマーからCIサイトをピックアップしました。それは数ヶ月の休暇中です。私たちのサイトは、その目的の性質上、多くのangularで構築されています。ソリューションは少し異なっていました。

標準CIフレームワークと異なるのは、いくつかのフォルダーのみです：js\angular\controllers andjs\angular\modulesすべてのangularモデルおよびコントローラーファイルを保持するためのCIのアプリケーションフォルダー。次に、angular docsをアプリケーションベースフォルダーにロードします。

0
Timothy Moffett