php - AngularjsとCodeIgniterの組み合わせ




javascript (6)

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

だから私は角度のルータによって制御されているリンクをクリックし、それはjavascriptによって処理されますが、次のリンクはCodeIgniterフレームワークによって処理されるべき "通常の"要求である可能性があります。

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


Answers

あなたの角度のアプリケーションが成長するにつれ、徐々にCodeIgniterの(CI)ルーティングの使用を少なくすることを目指しているように思えます。 これは難しいことではありませんが、多くの詳細が必要です。 どの方法が機能するかは、プロジェクトの構造によって異なります。 注:コードイグナイターの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アセットが追加されるようになりました.CodeIgniterが行っている処理のほとんどは、単純なページを返すだけで済みます。 /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などをコードイグナイターで返すことができます。

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

TL; DRあなたのAngularアプリケーションを完全に利用可能にし、CodeIgniterからデカップリングします。 CodeIgniterページにリンクするのではなく、Angularパーシャルビューや他のJSONソースを使用するように徐々に移行してください。 最終的に、CodeIgniterエンドポイントをAngularをブートストラップするHTMLファイルに置き換えてください。


Angularを使ったことは一度もありませんが、これは役に立ちます。

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

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

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

それが役に立てば幸い!


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

/コードシグネチャコード/角度コード

CodeIgniterにはセキュリティ機能のシェアが付いているので、これが最善の策になるはずです


Aaron Martinが与えた答えに加えて、これをクライアント - サーバーアプローチとして使用することもできます。

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

  1. クライアント

  2. サーバ

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

クライアント側でangularjsのプロバイダとして機能する工場やサービスがあります。 これらのファイルには、要求を送信し、サーバー側から応答を受け取るコードが含まれます。

サーバーフォルダには、LaravelまたはCodeIgniterのコードやその他のPHPフレームワークがあります。 要求のすべてのAPIを作成し、それに応じて機能を開発します。 したがって、PHPセクション(サーバーディレクトリ)全体で、すべてのメディアファイルとデータベースファイルが格納されます。 さらに、RSSフィードなどの受信リンクもあります。

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

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


私はそれを使って作業する別のプログラマーから数ヶ月間休暇中のCIサイトを手に入れました。 私たちのサイトは、その目的の性質上、大部分が角張っています。 私たちのソリューションは少し異なりました。

すべての角度モデルとコントローラファイルを保持するには、CIのアプリケーションフォルダのjs\angular\controllersjs\angular\modules 2つのフォルダが標準のCIフレームワークと異なります。 その後、角度のドキュメントをアプリケーションのベースフォルダにロードします。


このブログは、例とわかりやすい説明を作成するすべてのものに取り上げられています。

AngularJS $scope関数$watch(), $digest()$apply()は、AngularJSの中心的な機能の一部です。 AngularJSを理解するには、 $watch()$digest()$apply()を理解することが不可欠です。

ビューのどこかから$ scopeオブジェクトの変数にデータバインディングを作成すると、AngularJSは内部的に「時計」を作成します。 ウォッチは、AngularJSが$scope object変数の変更を監視することを意味し$scope object 。 フレームワークは変数を「見ている」。 時計は$scope.$watch()関数を使用して作成されます。この関数については、後で説明します。

アプリケーションのキーポイントで、AngularJSは$scope.$digest()関数を呼び出します。 この関数は、すべての監視を繰り返し、監視された変数のいずれかが変更されたかどうかをチェックします。 監視対象の変数が変更された場合、対応するリスナー関数が呼び出されます。 リスナー関数は、監視対象変数の新しい値を反映するようにHTMLテキストを変更するなど、必要な作業を行います。 したがって、 $digest()関数は、データバインディングを更新するトリガーです。

ほとんどの場合、AngularJSは$ scope()と$scope.$digest()関数を呼び出しますが、状況によっては自分で呼び出す必要があります。 したがって、どのように動作するか知ることは本当に良いことです。

$scope.$apply()関数はいくつかのコードを実行するために使われ、その後$scope.$digest()呼び出すので、すべての監視がチェックされ、対応する監視リスナ関数が呼び出されます。 $apply()関数は、AngularJSを他のコードと統合するときに便利です。

このテキストの残りの部分では、 $watch(), $digest()および$apply()関数について詳しく説明します。

$ watch()

$scope.watch()関数は、ある変数の時計を作成します。 ウォッチを登録すると、 $watch()関数に2つの関数をパラメータとして渡します。

  • 値関数
  • リスナー関数

次に例を示します。

$scope.$watch(function() {},
              function() {}
             );

最初の関数は値関数であり、2番目の関数はリスナー関数です。

value関数は、監視されている値を返さなければなりません。 その後、AngularJSは最後に返されたウォッチ関数の値に対して返された値をチェックすることができます。 AngularJSはその値が変更されたかどうかを判断できます。 次に例を示します。

$scope.$watch(function(scope) { return scope.data.myVar },
              function() {}
             );

この例のvalule関数は、 $scope変数scope.data.myVar返します。 この変数の値が変更されると、別の値が返され、AngularJSはリスナー関数を呼び出します。

value関数がどのようにスコープをパラメータとして取りますか(名前に$は含まない)に注目してください。 このパラメータを使用すると、value関数は$scopeとその変数にアクセスできます。 value関数は必要に応じてグローバル変数を見ることもできますが、たいていは$scope変数を見ることがよくあります。

リスナー関数は、値が変更された場合に必要な処理を行う必要があります。 おそらく、別の変数の内容を変更したり、HTML要素などの内容を設定したりする必要があります。 次に例を示します。

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("").innerHTML =
                      "" + newValue + "";
              }
             );

この例では、HTML要素の内部HTMLを、値を太字にするb要素に埋め込まれた変数の新しい値に設定します。 もちろん、コード{{ data.myVar }を使用してこれを行うこともできますが、これはリスナー関数内で行うことのできる例です。

$ digest()

$scope.$digest()関数は、 $scope object内のすべてのウォッチとその子$ scopeオブジェクト(存在する場合$scope.$digest()反復処理します。 $digest()が時計を反復すると、各時計のvalue関数が呼び出されます。 value関数によって返された値が最後に呼び出されたときに返された値と異なる場合、その時計のリスナー関数が呼び出されます。

$digest()関数は、AngularJSが必要と考えるときはいつでも呼び出されます。 たとえば、ボタンクリックハンドラが実行された後、またはAJAX呼び出しが返された後(done()/ fail()コールバック関数が実行された後)。

AngularJSがあなたのために$digest()関数を呼び出さないコーナーケースが発生するかもしれません。 通常、データバインディングが表示された値を更新しないことに気づいて、それを検出します。 その場合、 $scope.$digest()を呼び出すとうまくいくはずです。 あるいは、 $scope.$apply()使うこともできますが、これについては次のセクションで説明します。

$ apply()

$scope.$apply()関数は、実行されるパラメータとして関数をとり、その$scope.$digest()後に$scope.$digest()が内部的に呼び出されます。 これにより、すべてのウォッチがチェックされ、すべてのデータバインディングがリフレッシュされるようにすることが容易になります。 $apply()例を以下に示します:

$scope.$apply(function() {
    $scope.data.myVar = "Another value";
});

$apply()関数にパラメータとして渡された関数は、 $scope.data.myVar値を変更します。 関数が終了すると、AngularJSは$scope.$digest()関数を呼び出し、すべての監視が監視された値の変更をチェックするようにします。

$watch()$digest( )および$apply()動作を説明するには、この例を見てください:

<div ng-controller="myController">
    {{data.time}}

    <br/>
    <button ng-click="updateTime()">update time - ng-click</button>
    <button id="updateTimeButton"  >update time</button>
</div>


<script>
    var module       = angular.module("myapp", []);
    var myController1 = module.controller("myController", function($scope) {

        $scope.data = { time : new Date() };

        $scope.updateTime = function() {
            $scope.data.time = new Date();
        }

        document.getElementById("updateTimeButton")
                .addEventListener('click', function() {
            console.log("update time clicked");
            $scope.data.time = new Date();
        });
    });
</script>

彼の例は$scope.data.time変数を補間指示$scope.data.time 、変数値をHTMLページにマージします。 このバインディングは、 $scope.data.time variable内部的に時計を作成し$scope.data.time variable

この例には2つのボタンも含まれています。 最初のボタンにはng-clickリスナがアタッチされています。 このボタンをクリックすると$scope.updateTime()関数が呼び出され、その後AngularJSは$scope.$digest()呼び出してデータバインディングを更新します。

2番目のボタンは、コントローラー関数の内部から標準のJavaScriptイベントリスナーを取得します。 2番目のボタンがクリックされると、そのリスナー機能が実行されます。 ご覧のとおり、両方のボタンのリスナー機能はほぼ同じですが、2番目のボタンのリスナー機能が呼び出されると、データバインディングは更新されません。 これは、 $scope.$digest()は、2番目のボタンのイベントリスナーが実行された後に呼び出されないためです。 したがって、2番目のボタンをクリックすると、 $scope.data.time変数で時刻が更新されますが、新しい時刻は決して表示されません。

この問題を解決するには、 $scope.$digest()ボタンイベントリスナーの最後の行に追加することができ$scope.$digest()

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
    $scope.$digest();
});

ボタンリスナー関数の中で$digest()を呼び出す代わりに、 $apply()関数を次のように使用することもでき$apply()

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    $scope.$apply(function() {
        console.log("update time clicked");
        $scope.data.time = new Date();
    });
});

$scope.$apply()関数がボタンイベントリスナーの中からどのように呼び出されているのか、そして$scope.data.time変数の更新がパラメータとして$apply()関数に渡された関数内でどのように更新されるのかに$scope.data.timeしてください。 $apply()関数呼び出しが終了すると、AngularJSは$digest()内部的に呼び出し、すべてのデータバインディングが更新されます。





php javascript codeigniter angularjs