4

angular 2 を既存の symfony 2 プロジェクトに取り込むにはどうすればよいですか? 小さな角度2アプリを作成したいサブページがあります。すべてのソースを acme bundle public フォルダーに保存しました。私のサブページは/foo/bar、私の構成は次のようになります。

ベース小枝テンプレート:

{% block javascripts %}
{{ parent() }}

<!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {
            inlineSourceMap: true,
            emitDecoratorMetadata: true
        },
        packages: {
            'app': {
                defaultExtension: 'ts'
            }
        }
    });
    System.import({% block mainNgClass %}'/PATH/TO/MAIN.TS'{% endblock %})
            .then(null, console.error.bind(console));
</script>
{% endblock %}

拡張小枝テンプレート

{% block mainNgClass %} '{{ asset('bundles/acme/ListFlow/main.ts') }}' {% endblock %}

{% block content %}
    <list-flow>Loading...</list-flow>
{% endblock %}

私の単純な「Hello world」アプリは期待どおりに動作します:
ListFLow.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'list-flow',
    template: `<div>Hello world</div>`
})
export class ListFlow {

}

だからここに私の問題:

  1. html-template を相対パスにリンクする方法はありませんtemplateUrl: ./../lala/doo.html-> これは現在の場所 ( /foo/bar) に対して相対的であり、*.ts スクリプトに対して相対的ではありませんか?
  2. Dragula( https://github.com/valor-software/ng2-dragula )のようなサードパーティのコンポーネントを追加したい-> これをコンポーザーとリンクしてフロントエンドにロードするにはどうすればよいですか?
  3. libをダウンロードしdragulaて、自分でパブリックバンドルフォルダーに入れ、次のように含める場合

    import {DragulaService, Dragula} from "../../ng2-dragula/ng2-dragula";
    
    @Component({
        selector: 'list-flow',
        directives: [Dragula],
        viewProviders: [DragulaService],
    

    私はこのエラーが発生します:

    GET: .../foo/bar/dragula 404 が見つかりません

角度のあるアプリがルートパスの外にある場合、非常に多くの問題があります。これを処理するためのベストプラクティスは何ですか?

4

0 に答える 0