すでに作成されているsymfonyにangleをインストールする際に問題があります ドキュメントやチュートリアルはありますか? ありがとうsymfony2プロジェクトでangularjsを追加するには
答えて
私は@ Claiesに同意したにもかかわらず、AngularJSをSymfonyアプリケーションに統合する簡単な例を提供しています。私はLinuxを使用していますが、symfony
コマンドを使用してsymfonyプロジェクトをインストールし、サードパーティのフロントエンドライブラリをインストールするのにbower
を使用しています。あなたは好きなものを使うことができますが、それらはあなたの使い方が異なるかもしれません。まだお持ちでない場合は
1)を使用して)(新しいsymfonyプロジェクトをインストールします。
$ symfony new project_name version_number
2)ルートディレクトリに、新しい.bowerrc
ファイルを作成し、あなたがangularjs
を先ディレクトリを書きますインストールする:
{
"directory":"web"
}
3)により、bower.json
ファイルを作成します。
$ bower init
4))、1.5.8であることをangularjs
(不要をインストールするには、好きなバージョンをインストール:
$ bower install --save angular#1.5.8
5)angular.min.js
スクリプト内base.html.twig
ファイル(またはあなたが好きな他のファイル)、および場所を含めますhtml
タグ内ng-app
(またはdata-ng-app
)
<!DOCTYPE html>
<html data-ng-app>
...
{% block javascripts %}
<script src="{{ asset('angular/angular.min.js') }}"></script>
{% endblock %}
6)angularjsの使用を開始(または任意のHTMLタグを使用するには、必要があると思います)。例(すでにsymfonyの経路とpage.html.twig
テンプレートをレンダリングするコントローラを有すると仮定):
# app/Resources/views/default/page.html.twig
{% extends 'base.html.twig' %}
{% block body %}
{% verbatim %}
{{ 'This is angularJS code!' }}
{% endverbatim %}
{% endblock %}
TL; DR
はsymfonyプロジェクト内AngularJSを使用する最も簡単な方法は、手動でダウンロードすることで、 AngularJSライブラリ、web
ディレクトリに置き、そしてjavascripts
ブロックでbase.html.twig
でそれをリンク:
{% block javascripts %}
<script src="{{ asset('angular/angular.min.js') }}"></script>
{% endblock %}
data-ng-app
directiを含めることを忘れないでくださいve。
- 1. Symfony2プロジェクトに外部ライブラリを追加
- 2. フォームを追加するsymfony2
- 3. angularjsプロジェクトにangular2コンポーネントを追加する方法
- 4. symfony2プロジェクト用GITの設定:なぜgitignoreにweb/bundlesフォルダを追加する
- 5. 追加するスタイルはAngularJs
- 6. AngularJSでリストにプレーヤーを追加する
- 7. SVNにプロジェクトを追加するには?
- 8. プロジェクトにMSBuildを追加するには?
- 9. symfony2のデータベースにない子ファイルを追加するには
- 10. 既存のAngularjs 2プロジェクトにNativeScriptを追加
- 11. symfony2 twigフォームにインラインスタイルを追加
- 12. Symfony2登録フォームにreCaptchaフィールドを追加
- 13. Symfony2フォームのCollectionTypeに行を追加する方法は?
- 14. ページ提出後にSymfony2フォームコレクションタイプに追加項目を追加する
- 15. AngularJSでランブロックを追加する1.3.8
- 16. AngularJSコントローラーを動的に追加する
- 17. angularjsに遅延を追加する
- 18. AngularJS $ http.getにヘッダを追加する
- 19. angularjsのモデルにリスナーを追加する
- 20. AngularJS - $ cookieに配列を追加する
- 21. ロード中にAngularJSファイルを追加する
- 22. コンポーネントラッパーにdiretictiveバリデーターを追加する - AngularJS
- 23. AngularJSのスコープにjsonを追加する
- 24. AngularJS動的にディレクティブを追加する
- 25. Asp.netプロジェクトにasp.netページをプログラムで追加して追加するには?
- 26. AngularJsオプションを追加ボックスに追加する
- 27. AngularJSユニットテストでDOMにdivを追加するには?
- 28. プロジェクトを追加する
- 29. Androidプロジェクトを追加する
- 30. プロジェクトにカスタムフォントを追加する、プログラムで項目をplistに追加する
本、ツール、ソフトウェアライブラリ、チュートリアル、またはその他のオフサイトリソースを推奨するか、見つけようとする質問は、オピニオン回答とスパムを引き付ける傾向があるため、スタックオーバーフローのトピックではありません。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 – Claies
@ Claies thxから離れて話題の質問に私たちはDanの素晴らしい答えを得ました。 – eddy147