11

私は最近angularjsを掘り下げ始め、新しいプロジェクトで大いに役立つでしょうが、ビュー構造の部分に固執しました。

だから私が本当に理解していないのは、それを構築する方法です。htmlの角度部分ビューを作成し、laravelビューを作成しない場合は問題ありません。そのため、laravelはデータベースの挿入編集削除のみを処理し、角度部分ビューは結果の表示とフォームを処理します。

だから私のbuoldupはこのようになります。マイアセットフォルダ

/css
/img
/js
 /lib
 /partials
         /home
             index.html
         /users
             users.html
             details.html

そしてrestful controllers、彼らのために上記のハンドルを作成します

または、誰かがこれについての私の基本的な例を示すことができれば、コントローラーとビューの部分、結果を表示する単一のページを構築する方法、およびIDで取得するページを作成する方法は本当にありがたいです。

ありがとうございました

4

2 に答える 2

26

Laravel＆AngularJSプロジェクトを開始するときは、バックエンドとフロントエンドを担当します。基本的に3つのオプションがあります。

  1. アプリ全体を同じフォルダーに保持し、angularjsのものをパブリックフォルダーに保持します。
  2. アプリ全体を同じフォルダーに保持し、AngularJSビューをlaravelビューフォルダーに保持します。
  3. バックエンドとフロントエンドを完全に分離します。

最初と2番目のオプションは最も単純で、中小規模のアプリケーションの場合は問題ありません。この場合、すべてのAngularJSファイルをパブリックフォルダーに保持するか、それらをlaravelビューと混合することを選択した場合は、.blade拡張子をドロップする（またはlaravelblade / anglejsテンプレート構文を変更する）だけです。

SPAアプリを実行するときは、バックエンドをできるだけ落ち着かせておくのが最善だと思います。ポイントは、ロジックをブラウザーにプッシュすることです。これは、phpとjsを混ぜすぎると、アプリが混乱する可能性があることを意味します。

フォルダ構造は完全にあなた次第であり、どのオプションを選択するかは問題ではありません。しかし、良いスタートは、アプリを論理的な部分に分割することです。

/app
    application.js
    /partials
         user.html
         login.html
         etc.html
    /vendor
         Angular.js
         Lodash.js
         Etc.js
    /controllers
         User.js
         Etc.js
    /directives
         Charts.js
         Etc.js
    /filters
         Custom.js
         Etc.js
    /services
         Backend.js
         Etc.js

また、これをチェックして、優れたangularjsスタイルガイドを確認することもできます。

上記は基本的なフォルダ構造です。最もよく見えるようにカスタマイズしてください。小さなアプリをお持ちの場合は、フォルダーを削除して、controllers.js directives.js and services.js (etc)すべてのJavaScriptを同じファイルに保存することができます。これは完全にあなた次第です。アプリケーションが大きくなったときに分離し、常にリファクタリングします。

3番目のオプションを選択した場合は、バックエンドを少しカスタマイズする必要があります。これは最も難しいオプションかもしれませんが、柔軟性もあります。基本的に、laravelをすべて一緒にドロップして、node.jsでバックエンドを構築するか、コードを変更せずに、Ember.jsで記述された別のSPAアプリのバックエンドとしてlaravelを使用できます。このオプションを選択している場合は、ブレードテンプレートなどの一部のlaravelのものを使用できないことに注意してください。また、CORS用にlaravelアプリをセットアップする必要があります。また、セキュリティに関しては、CSRFトークンなどのコーディングがさらに増える可能性があることに注意してください。

アプリを使用して本番環境に移行する場合、ビルドツールを使用して、フロントエンドアプリを1つのファイルに最小化および連結できます。縮小化のためにng-minをチェックアウトします。

于 2013-01-30T16:44:30.363 に答える
0

これは私が取り組んでいるプロジェクトの1つです。Angularjsで部分的なビューがどのように表示されるかを確認できます。上記のように、ビューファイルをパブリックフォルダに置く必要はありません。

https://github.com/naveensky/wm-demo-tracker

于 2013-02-03T16:10:10.693 に答える