2016-12-31 2 views
-4

すでに作成されているsymfonyにangleをインストールする際に問題があります ドキュメントやチュートリアルはありますか? ありがとうsymfony2プロジェクトでangularjsを追加するには

+1

本、ツール、ソフトウェアライブラリ、チュートリアル、またはその他のオフサイトリソースを推奨するか、見つけようとする質問は、オピニオン回答とスパムを引き付ける傾向があるため、スタックオーバーフローのトピックではありません。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 – Claies

+0

@ Claies thxから離れて話題の質問に私たちはDanの素晴らしい答えを得ました。 – eddy147

答えて

6

私は@ 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。

関連する問題